Search jQuery

jQuery Forum

Screen name:
cujomalainey

cujomalainey's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Jquery Mobile Listview crashes with undefined properties when not launching page on first page in multipage document
[4Replies]
- 16-Jul-2012 01:55 AM
- Forum: jQuery Mobile
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.
1. var html = "";
2. var i = 0;
3. for (i in json.favs) {
4. 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";
5. }
6. document.getElementById('favs_content').innerHTML = html;
7. $('#favs_content').listview();
8. $('#favs_content').listview('refresh');
10. //all schools
11. html = "";
12. i = 0;
13. for (i in json.all)
14. {
15. 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";
16. }
17. document.getElementById('all_content').innerHTML = html;
18. //$('#all_content').listview();
19. //$('#all_content').listview('refresh');
Here is the stack trace that appears when i open the document from the second page:
1. Uncaught TypeError: Cannot read property 'jQuery17205018431162461638' of undefined jquery.mobile-1.1.1.js:5189

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend