I have a dynamic select box in my application. On click of any list item I need to show the item details in popup. But I'm unable to open the popup/dialog box which is not happening now, my code is,
$( "#locationList" ).on( "click", "li", function( event ) {
alert("click event");
$.mobile.changePage('#myPopupDialog', 'pop', true, true);
});
I'm able to see the alert, but dialog box is not opening.
<div data-role="dialog" id="dialog">
<div data-role="header">
<h1>List Item details</h1>
</div>
<div data-role="main" class="ui-content">
<h2>Welcome to my Popup Dialog!</h2>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
List elements should come dynamically from Db, like,
var optionheading = '<li value="Select Location">Select Location</li>';
for (var i = 0; i < res.rows.length; i++)
{
var opt = '<li value="';
opt += res.rows.item(i).Location;
opt += '">';
opt += res.rows.item(i).Location;
opt += '</li>';
$("#locationList").append(opt);
}
$("#locationList").listview('refresh');
HTML:
<ul data-role="listview" id="locationList" data-dismissible="false" style="height: 150px;border:1px solid #ccc;background:#f2f2f2;font:normal 11px/15px arial;padding:6px;color:#333; overflow: auto" name="locationList" data-inset="true">
</ul>
any suggestions!!
Your dialog has
id="dialog"
However your javascript is trying to popup a dialog with an id of myPopupDialog:
$.mobile.changePage('#myPopupDialog', 'pop', true, true);
These IDs must match!
If you are using jQM 1.4.x, your dialog page should use data-dialog="true":
<div data-dialog="true" id="myPopupDialog">
Here is a working DEMO
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.