javascript - JQuery Mobile content only shown on reload -
i have index.html containing following:
index.html
<html> <head>...</head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#pagetwo" id="pagetwo">page two</a> </li> <li><a href="#pagethree" id="pagethree">page three</a> </li> </ul> </div> </div> <div data-role="page" id="pagetwo"> </div> <div data-role="page" id="pagethree"> <div id="headerpagethree" data-role="header"> <div data-role="main"> <div id="anydiv"></div> </div> </div> </div> <body> <html> as see, navbar in index.html links between pagetwo , pagethree.
furthermore have main.js
main.js
$(document).ready(function () { $('<select>').attr({'name': 'fuu','id': 'load-fuu', 'data-native-menu': 'false'}).appendto('#headerpagethree'); $('<option>').html('load').appendto('#load-fuu'); $('select').selectmenu(); }); let's open index.html chrome. url is
file:///c:/users/index.html then click on "page three" in navbar. url then
file:///c:/users/index.html#pagethree the problem is, styling of items selectmenu looks absolutely strange. it's transparent example. add more things shown in main.js example , of them aren't displayed. meaning there nothing should be.
but curious thing is, if press f5 on page url is
file:///c:/users/index.html#pagethree , perfect. don't this.
what difference between pressing f5 on index.html , pressing f5 on index.html#pagethree?
can help?
thanks lot.
the theme must set on element, isn't being applied parent page. not sure why though...
this can done adding data-theme attribute when create select element:
$(document).ready(function () { $('<select>').attr( {'name': 'fuu','id': 'load-fuu', 'data-native-menu':'false', 'data-theme': 'a' }).appendto('#headerpagethree'); $('<option>').attr({'value': '1'}).html('load').appendto('#load-fuu'); $('#load-fuu').selectmenu(); }); lastly, if like, a codepen example.
edit: point made option needing value selection valid (though still theme after add data-theme)
Comments
Post a Comment