JQuery Mobile - the correct way to initialize a list

Question

Here is my problem. There are several hardcoded pseudo pages in my index. Some are filled with content, some are empty, which will be filled during user interaction using only ajax. This ajax content contains html lists. When they load, they don’t have an attractive jquery mobile view, so I have to call the .listview () method, so the jqm structure will parse it on my ajax callback. This is where I often get this JS error:

Uncaught TypeError: Cannot read property 'jQuery162027575719612650573' from undefined

The number is never the same ...

I wonder if I'm using the right way to parse a list when a page loads ajax content. the error seems to be triggered when there is a slight delay for loading, and the full event fires too early, and my list is not in the DOM yet at this point, just a hunch. What is the recommended way to initialize a list after ajax call?

This is very sad, because when a js error occurs, it seems to freeze the further execution of js ...

so here is my empty pseudo page:

<div data-role="page" id="playlist" data-add-back-btn="true"> <div data-role="header"> <h1><g:message code="pd.playlist" /></h1> </div> <div data-role="content"></div> </div> 

right below it there is a script tag with an ajax call binding on the pages to activate listview

 <script type="text/javascript"> $('#playlist').bind('pageshow', function () { $.ajax({ url: "updatePlaylistTemplate.gsp", error:function(x,e){handleAjaxError(x,e);}, beforeSend:function(){$.mobile.showPageLoadingMsg();}, complete:function(){ $.mobile.hidePageLoadingMsg(); $('[data-role="listview"]').listview(); //re-active all listview }, success:function(data, textStatus, jqXHR){ $('#playlist').find('[data-role="content"]').html(data); } }); }); </script> 

UpdatePlaylistTemplate returns this (extract):

 <ul data-role="listview" data-split-theme="d"> <li data-icon="delete"> <a href="javascript:void(0);" onclick="loadGet('urlToRemoveProdiver',$('#playlist'),doOnCallBack);">Provider: Bell</a> </li> <li data-icon="delete"> <a href="javascript:void(0);" onclick="loadGet('urlToRemoveChannel',$('#playlist'),doOnCallBack);">Rock - Classic Rock</a> </li> <li data-icon="refresh" data-theme="e"><a href="javascript:void(0);" onclick="loadGet('urlToReloadPlaylist',$('#playlist'),doOnCallBack)">Refresh list</a></li> <li data-role="list-divider">Next song</li> <li> <a href="urlToViewSongInfo"> <img src="images/song.gif" /> <h3>Albert Flasher</h3> <p>The Guess Who</p> <p class="ui-li-aside">Next</p> </a> </li> <li data-role="list-divider">Now playing</li> <li> <a href="urlToviewSongInfo"> <img src="images/song.gif" /> <h3>Crime of the Century</h3> <p>Supertramp</p> <p class="ui-li-aside">14h49</p> </a> </li> <li data-role="list-divider">Previous songs</li> <li> <a href="urlToViewSongInfo"> <img src="images/song.gif"" /> <h3>Desperado</h3> <p>Alice Cooper</p> <p class="ui-li-aside">14h45</p> </a> </li> [...] </ul> 

Answer 1

What version of jQuery Mobile are you using? In the latest beta (1.0b2), you can trigger the create event on the dom element to initialize it:

New "create" event: easily expand all widgets at once

As long as the page plugin no longer calls each plugin, it dispatches the "pagecreate" event, which most widgets use to automatically initialize itself. While the widget plug-in script is referenced, it will automatically improve any widget instances it finds on the page, as before. For example, if the selectmenu plugin is loaded, it will improve any selections that it finds in the newly created page.

This structure now allows us to add a new creation event that can be triggered on any element, saving the task of manually initializing each plug-in contained in this element. Until now, if a developer is loaded into content via Ajax or dynamically generated markup, they must manually initialize all the plugins contained in it (list button, select, etc.) to improve widgets in the markup.

Now our convenient create event initializes all the necessary plugins within this markup, just like the page improvement process works. If you want to use Ajax to load HTML markup in a block (for example, an input form), you can automatically create an automatic creation, convert all the widgets that it contains (inputs and buttons in this case) into advanced versions. Code for this script:

$ (... new markup containing widgets ...). appendTo (".ui-page") .trigger ("create");

Create vs. Update: An Important Difference

Note that there is an important difference between the create event and the update method that some widgets have. A create event is suitable for improving raw layouts containing one or more widgets. update method that some widgets should use on existing (already enhanced) widgets that have been processed programmatically and you need to update the interface to match.

For example, if you have a page on which you dynamically added a new unordered list with the data-role = listview attribute after creating the page, initiating the creation of this list in the parent element will transform it into a list-style widget. If there were more list items then with programmatic addition, calling the view list update method, update only these new list items in the expanded state and leave the existing list items untouched.

Link: http://jquerymobile.com/blog/

You can also copy the output that jQuery Mobile creates and uses this structure, instead of using <li> tags and initializing it depending on jQM:

 <li data-role="list-divider" class="ui-li ui-li-divider ui-btn ui-bar-a ui-btn-up-undefined" role="heading"><span>List Divider</span></li> <li data-theme="b" class="ui-li ui-li-static ui-body-b">Regular LI</li>