Menu
I've got a jQuery Mobile project which is distributed in different files, e.g.
<!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 which should make a call to a php-Script and generate a listview:
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');
});
}
The .trigger('create') leads to the error... what am I missing?
EDIT 1
listViewCreation is called the following way:
$("#pageTwo").live("pageshow", function(e, data){
listViewCreation();
});
EDIT 2 I'm fetching remote data from a different server, that seems to be the reason for the error; but I don't know how to solve it... I'm fetching data on both pages (1 and 2); for the first page it works, for the second it doesn't...
$.getJSON(url, function(data) {
...
}
564
I can see you are using last stable version of jQuery mobile.
Your problem is
trigger('create');
it is not used for jQuery mobile listview restyling. You should use :
.listview('refresh');
instead. Don't trust official jQM documentation, trigger('create') should be deprecated. Every jQM widget has a function meant to refresh it, for example button('refresh').
Also don't use trigger('create') when changing header, footer or content, it won't work, you can trigger pagecreate on the page:
trigger('pagecreate');
EDIT :
In case of:
Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh'
Call:
$('#listviewid').listview().listview('refresh');
First call will initialize it and second one will style it.
Find more about this topic in this ARTICLE.
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
