Search jQuery

jQuery Forum

Jquery Mobile Listview crashes with undefined properties when not launching page on first page in multipage document

in jQuery Mobile • 10 months ago

I have a multipage document and i am loading content in through json to create a list view when i initialize the listview it does it for content blocks that have the data-role listview. But when i load the whole document from another page (eg www.example.com#page2) jQuery cannot load the list views and this is the stack trace in chrome i get. Some help solving the issue would be wonderful.

jquery files used:

jquery-1.7.2.js

jquery.mobile-1.1.1.js

part of my html markup for the code that is failing

<div data-role="page" id="favs">
<div data-role="header" data-position="fixed">
<h1>Favorites</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="favs_content">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" class="navigation">
<ul>
<li><a href="#favs" data-icon="star" class="ui-btn-active ui-state-persist">Favorites</a></li>
<li><a href="#all" data-icon="info">All Schools</a></li>
<li><a href="#events" data-icon="check">Events I'm going to</a></li>
<li><a href="#settings" data-icon="gear" class="last">Settings</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="all">
<div data-role="header" data-position="fixed">
<h1>All Schools</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="all_content">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" class="navigation">
<ul>
<li><a href="#favs" data-icon="star">Favorites</a></li>
<li><a href="#all" data-icon="info" class="ui-btn-active ui-state-persist">All Schools</a></li>
<li><a href="#events" data-icon="check">Events I'm going to</a></li>
<li><a href="#settings" data-icon="gear" class="last">Settings</a></li>
</ul>
</div>
</div>
</div>

The listview is dynamically inserted by this code.

var html = "";
var i = 0;
for (i in json.favs) {
html = html + "<li><a OnClick=\"javascript: change_page(" + json.favs[i].id + ")\" rel=\"external\">" + json.favs[i].name + "<span class=\"ui-li-count\">" + json.favs[i].events_today + "</span></a></li>\n";
}
document.getElementById('favs_content').innerHTML = html;
$('#favs_content').listview();
$('#favs_content').listview('refresh');
//all schools
html = "";
i = 0;
for (i in json.all)
{
html = html + "<li><a OnClick=\"javascript: change_page(" + json.all[i].id + ")\" rel=\"external\">" + json.all[i].name + "<span class=\"ui-li-count\">" + json.all[i].events_today + "</span></a></li>\n";
}
document.getElementById('all_content').innerHTML = html;
//$('#all_content').listview();
//$('#all_content').listview('refresh');

Here is the stack trace that appears when i open the document from the second page:

Uncaught TypeError: Cannot read property 'jQuery17205018431162461638' of undefined jquery.mobile-1.1.1.js:5189

$.widget._createSubPagesjquery.mobile-1.1.1.js:5189
$.widget.refreshjquery.mobile-1.1.1.js:5022
$.widget._createjquery.mobile-1.1.1.js:4907
$.Widget._createWidgetjquery.mobile-1.1.1.js:1062
$.widget._createWidgetjquery.mobile-1.1.1.js:1179
$.widget.$.(anonymous function).(anonymous function)jquery.mobile-1.1.1.js:963
$.widget.bridge.$.fn.(anonymous function)jquery.mobile-1.1.1.js:1025
jQuery.extend.eachjquery-1.7.2.js:660
jQuery.fn.jQuery.eachjquery-1.7.2.js:271
$.widget.bridge.$.fn.(anonymous function)jquery.mobile-1.1.1.js:1020
(anonymous function)/app/www/#all:31
jQuery.Callbacks.firejquery-1.7.2.js:1075
jQuery.Callbacks.self.fireWithjquery-1.7.2.js:1193
donejquery-1.7.2.js:7538
jQuery.ajaxTransport.send.callback

The done in the stack i believe is a console log i have later in the jaavscript.

Help would be wonderful, thanks.

Replies(4)

watusiware

Re: Jquery Mobile Listview crashes with undefined properties when not launching page on first page in multipage document

10 months ago

I'd start by loading a version of jQuery that's compatible with jQuery Mobile.

1.7.2 isn't.

Drop back to 1.7.1.

cujomalai..

Re: Jquery Mobile Listview crashes with undefined properties when not launching page on first page in multipage document

10 months ago

It says as long as you are using 1.1 your fine, but i only updated once i actually came across the problem and ran out of answers

joerajeev

Re: Jquery Mobile Listview crashes with undefined properties when not launching page on first page in multipage document

5 months ago

I have the same issue... has anyone found a resolution?

RESOLVED:

Do a

$.mobile.loadPage('#favs')

before calling

  $('#favs_content').listview();
                    $('#favs_content').listview('refresh');

watusiware

Re: Jquery Mobile Listview crashes with undefined properties when not launching page on first page in multipage document

5 months ago

It says as long as you are using 1.1 your fine

Ignore what jQuery documentation says. It's wrong.

The very first sentence of the jQuery Mobile documentation for JQM 1.1:

Welcome. jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet and desktop devices. For jQuery 1.6.4 and 1.7.1.

Not sure why the jQuery and jQuery Mobile teams can't agree on version compatibility. But it's a persistent problem that seems to recur with every release.

I would trust the JQM docs. One would assume the JQM folk know better what jQuery versions it works with then the jQuery folk. A bit of communication between the two would be helpful. It's unfortunate that misinformation just sits out there for months without being corrected.

-----

That's not the issue here, though.

The real problem here is trying to mix a multi-page document with single-page documents. JQM wasn't designed to do that. If you do, then the entire framework is reloaded. Glad you found a work-around, but the real fix is to not do this.

Just use single-page documents. You can use data-dom-cache and data-preload to achieve pretty-much the same thing. (Except for packing multiple pages into a single request-response.)

Top Reply

Response title

Attachments

jQuery Forum

Jquery Mobile Listview crashes with undefined properties when not launching page on first page in multipage document

Replies(4)

Re: Jquery Mobile Listview crashes with undefined properties when not launching page on first page in multipage document

Re: Jquery Mobile Listview crashes with undefined properties when not launching page on first page in multipage document

Re: Jquery Mobile Listview crashes with undefined properties when not launching page on first page in multipage document

Re: Jquery Mobile Listview crashes with undefined properties when not launching page on first page in multipage document

Statistics

Tags

Actions

Related Posts