jQuery Mobile Listview in Dialog won't initialize

StackOverflow https://stackoverflow.com/questions/21488733

Question

I am dynamically creating a dialog that contains a listview and appending it to body when the user navigates to a specific data-role=page. After appending the dialog to body I call

$('#myDialog').dialog();
$('#myList', '#myDialog').listview();

When I call the listview() function I get the following error:

Uncaught TypeError: Cannot read property 'jQuery19105852627926506102' of undefined

The only way I have been able to initialize my listview is to do it during the pageshow event of the dialog, but then the user actually sees the listview items without styling until the listview() function is complete.

Is there any way I can initialize a listview inside a dialog before the dialog has been shown?

Update: I get the same error if I use `$('#myDialog').trigger('create').

Was it helpful?

Solution

Dialogs are treated the same way pages are. When appending a page/dialog dynamically into DOM, you dont need to call any kind of enhancement, as they get initialized, as well as all widgets within, prior to showing them.

All you need is to append dialog to <body> or $.mobile.pageContainer and then open the dialog using $.mobile.changePage().

$.mobile.pageContainer.append("dialog HTML markup");
$.mobile.changePage("#dialog_ID");

Note that calling enhancement methods on elements within a page that isn't created/initialized yet, will result an error. However, you can refresh widgets on visited/initialized pages.

Demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top