I have a jQuery Mobile site with a listview statistics. The user may click an "action" button that delivers a pop-up. Depending on their answer in the popup, the number/statistic in the listview may change. The database query is successful, but the page doesn't update automatically; I have to manually refresh it to see the change. I'm using .post() to query the database (code at the end).
I've seen this question asked multiples times on here, often with the same solution. In the successful callback or popup "afterclose", use:
$('#somelist').listview('refresh');
Or
$("#page").tigger("create");
Unfortunately, neither of those solutions seem to work for me. This has become a very frustrating problem for me, so I'm hoping someone out there can help!
Here's an abbreviated version of my code:
<div id="testdiv">
<ul data-role="listview" data-inset="true" data-theme="a" data-count-theme="a">
<li data-role="list-divider">Combat Round: <?php echo $round; ?><span class="combat_result"></span></li>
<?php
for ($i = 0; $i < $numrows; $i++) {
?>
<li class="combatant" id="combatant_<?php echo $i; ?>"><h3 class="ui-li-heading"><span class="player_name"><?php echo $member[$i]['player_name']; ?></span></h3><span class='ui-li-count'><?php echo $member[$i]['player_total_init']; ?></span>
<p class="ul-li-desc"><strong>Actions Remaining: </strong><span class="remaining"><?php echo $member[$i]['player_actions_remain']; ?></span></p>
</li>
<?php
}
?>
</ul>
</div> <!-- testdiv -->
My database query via JS:
$(document).on('click', '#commit_save', function(e) {
e.preventDefault();
var combatid=$("#save_data_holder").data("combat_id");
var combat_desc=$("#combat_desc").val();
$.post("commit_save.php", {
combatid: combatid,
combat_desc: combat_desc
}, function(data) {
$(".save_result").html(data);
$('#combat_list').listview("refresh");
$("#home").trigger("create");
});
});
And my pop-up JS:
$("#enter_num_actions").popup({
beforeposition: function( event, ui ) {
$("#data_holder").data({"combatant_name": combatant_name, "combat_id": combat_id});
},
afterclose: function( event, ui ) {
$("#testdiv").listview().trigger("create");
}
});
Again, everything works fine except that I have to perform a manual refresh to get the value in the listview to update. If anyone has a suggestion, I appreciate it.
Thanks in advance!
.trigger()you don't need it here. You should call.listview('refresh')after successfully appending items, otherwise you'll get an error.ul- listview - has no id?