Geek Answers Handbook

JQuery Mobile: Uncaught TypeError: Cannot read property "jQuery ..." from undefined

I have a jQuery Mobile project that is distributed in different files, for example.

<!DOCTYPE html> <html> <head> <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <link rel="stylesheet" href="css/custom.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script src="js/methods.js"></script> </head> <body> <!-- Termine Page --> <div data-role="page" id="firstPage"> <div data-role="header" data-position="fixed"> <h1>Header 1</h1> ... </div><!-- /navbar --> <div data-role="content"> ... </div> </div> </body> </html> secondPage.html <!DOCTYPE html> <html> <head> <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <link rel="stylesheet" href="css/custom.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script src="js/methods.js"></script> </head> <body> <div data-role="page" id="pageTwo" class="ui-page"> <div data-role="header" data-position="fixed" id="terminDetailSeiteHeader"> <h1>Header 2</h1> </div> <div data-role="content"> <div id="contentToFillWithDynamicListView"></div> </div> </div> </body> </html>

Then I got a script that should make a call to php-Script and create a list:

 function listViewCreation() { var url = 'http://www.myServer.com/myPhp.php?someParameters=1&callback=?'; $.getJSON(url, function(data) { $('#contentToFillWithDynamicListView').empty(); var collapsibleList = '<ul data-role="listview">'; var myselfIsIncluded = 0; $.each(data, function(key, value) { collapsibleList += '<li>' + value['displayName'] + '</li>'; }); collapsibleList += '</ul>'; $('#contentToFillWithDynamicListView').html(collapsibleList).trigger('create'); }); }

..trigger ('create') leads to an error ... what am I missing?

EDIT 1

listViewCreation is named as follows:

 $("#pageTwo").live("pageshow", function(e, data){ listViewCreation(); });

EDIT 2 I get deleted data from another server, which seems to be causing the error; but I don’t know how to solve it ... I collect data on both pages (1 and 2); for the first page it works, for the second it doesn’t ...

 $.getJSON(url, function(data) { ... }
+6
source share
1 answer

I see that you are using the latest stable version of jQuery mobile.

Your problem

 trigger('create');

it is not used for restyling jQuery mobile lists. You should use:

 .listview('refresh');

instead of this. Do not trust the official jQM documentation, trigger ('create') should be deprecated. Each jQM widget has a function designed to update it, for example, a ('refresh') button .

Also do not use trigger ('create') when changing the header, footer or content, this will not work, you can call pagecreate on the page:

 trigger('pagecreate');

EDIT:

When:

Unused error: cannot call methods in list view before initialization; tried to call the 'refresh' method

Call:

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

The first call will be initialized, and the second will stylize it.

Read more about this topic in the ARTICLE .

+9
source

More articles:


All Articles