javascript - jQuery Mobile dialog BLANK -
i've been searching solution on internet didn't find any.
in jquery mobile application, have multiple html files each 1 representing page keep workflow clean, therefore use ajax navigation.
have button on map in page fleet.html (3rd in navigation) opens dialog, opening process done javascript, when click on button shows me blank dialog no text , no buttons in it.
here's fleet.html :
<div data-role="page" id="fleetpage" class="no-bg"> <div data-role="header" data-theme="b"> <h1>flotte</h1> </div> <div data-role="content" data-theme="a"> <div class="map-container"> <div id="fleet-map"></div> </div><!-- end map-container --> </div><!-- end content --> <div data-role="dialog" id="deviceinfodialog" data-theme="b" data-close-btn="right"> <div data-role="header" data-theme="b"> <h3>informations</h3> </div> <div data-role="content"> <p>poi infos</p> </div> </div> </div><!-- end page --> and here's how open dialog :
function onselectfeature() { $("#fleetpage #deviceinfodialog").dialog(); $.mobile.changepage($("#fleetpage #deviceinfodialog"), { transition: "slidedown" }); }
move dialog div outside of page div. add hidden link when clicked open dialog. rework script function emulate link getting clicked.
i tested , works fine:
<div data-role="page" id="fleetpage" class="no-bg"> <div data-role="header" data-theme="b"> <h1>flotte</h1> </div> <div data-role="content" data-theme="a"> <div class="map-container"> <div id="fleet-map"> <a href="javascript: onselectfeature();">onselectfeature</a></div> </div><!-- end map-container --> </div><!-- end content --> <script> function onselectfeature() { $("#lnkdeviceinfodialog").click(); } </script> <a id='lnkdeviceinfodialog' href="#deviceinfodialog" data-rel="dialog" data-transition="slidedown" style='display:none;'></a> </div><!-- end page --> <div data-role="dialog" id="deviceinfodialog" data-theme="b" data-close-btn="right"> <div data-role="header" data-theme="b"> <h3>informations</h3> </div> <div data-role="content"> <p>poi infos</p> </div> </div>
Comments
Post a Comment