jQuery Mobile Listview in Dialog won't initialize

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').

$('#myDialog #myList').listview(); this way. In your code you're calling .listview() on both dialog and listview. — Omar
– Omar, Commented Jan 31, 2014 at 20:05
@Omar - $('#myList', '#myDialog') should be a selector for '#myList' in the context of (inside of) '#myDialog' — Brian
– Brian, Commented Jan 31, 2014 at 20:17
@Omar - I've seen some other posts you have responded to on SO and I have a question... Is it not possible to call the .listview() method on a listview that is not on the currently active page? I didn't see that anywhere in the jQuery Mobile docs. — Brian
– Brian, Commented Jan 31, 2014 at 20:49

Omar · Accepted Answer · 2014-01-31 21:26:56Z

1

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

answered Jan 31, 2014 at 21:26

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Mobile Listview in Dialog won't initialize

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related