ajax - trouble styling dynamically created jquery mobile listview -
i trying generate jquery mobile listview on fly pulling down movie data tmdb , constructing each <li> , appending existing <ul> element. trouble is, can't format no matter do. i'm getting data , tmdb fine list view isn't styling when call $("#ul").listview("refresh"); here of code ( relevant stuff):
ajax call grabs data , builds each <li>:
$.ajax({ type: "post", data: { action: 'searchfilm', film: film }, datatype: "json", url: "./php/functions.php", success: function(json) { console.log(json); for(var = 0; < object.size(json); i++){ var film = json[i.tostring()]; $('#film-search-results').append("<li data-theme='j'><img src='" + film.poster_path + "' alt='poster' /><a href=''><h3 class='ui-li-heading'>" + film.title + "</h3><p class='ui-li-desc'><strong>" + film.tagline + "</strong></p><p class='ui-li-desc'>" + film.overview + "</p></a></li>"); } }, error: function(jqxhr, status, text){ console.log(jqxhr); } }); existing content div holds <ul> element:
<div id="content-add-title" data-role="content"> <ul id='film-search-results' data-role='listview'></ul> </div><!-- end content-add-title --> and function calls ajax method:
$('#add-add-title-btn').click(function() { if ($('#add-title-type-select').val() === "movie") { $('#right-panel3').panel("close"); $('#film-search-results').html(""); searchfilms($('#add-title-name-field').val()); $('#add-title-page').trigger("create"); $('#film-search-results').listview("refresh"); } }); really not sure why won't style 1 have ideas?
you need refresh listview in success of ajax call, not in click event handler -
success: function(json) { console.log(json); for(var = 0; < object.size(json); i++){ var film = json[i.tostring()]; $('#film-search-results').append("<li data-theme='j'><img src='" + film.poster_path + "' alt='poster' /><a href=''><h3 class='ui-li-heading'>" + film.title + "</h3><p class='ui-li-desc'><strong>" + film.tagline + "</strong></p><p class='ui-li-desc'>" + film.overview + "</p></a></li>"); } $('#add-title-page').trigger("pagecreate"); // <- trigger pagecreate here, shouldnt need listview refresh }, i'm guessing ajax call inside of searchfilms function. when call $('#film-search-results').listview("refresh"); , $('#add-title-page').trigger("create"); after call searchfilms ajax call isn't complete yet , hasn't populated listview json response. why not working.
Comments
Post a Comment