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

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

Magento/PHP - Get phones on all members in a customer group -

session - Logging Out Using PHP -