CODEWITHSUNDEEP
javascriptjquerylistviewjquery-mobile
mrbranden
mrbranden

Reputation: 1050

jQuery Mobile refresh listview after database query

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!

Upvotes: 1

Views: 2299

Answers (1)

Ray Andison
Ray Andison

Reputation: 284

Assuming from your abbreviated php code that your post response contains an entire unordered list including the <ul></ul> tags (btw your abbreviated code does not contain </ul>, perhaps you truncated that when abbreviating) and not just the list tags <li></li> you will need to trigger a create event on the parent div of the received listview.

$("#parentDIV").listview().trigger("create");

This codes creates a new listview for the child html unordered list containing attribute data-role="listview" within that parent div.

I believe $('#somelist').listview('refresh'); is used for when you are ONLY injecting <li></li> tags into an already existing <ul> and then afterwards refreshing that pre-existing list with the new <li> contents.

I found similar results to use refresh etc when I had similar problems in an app and they were not working because jquery mobile did not consider the new html unordered list as a listview yet, so it could not refresh the 'listview'. Notice the reference to listview as opposed to html unordered list that contains an attribute data-role="listview", jquery mobile appears to not consider the unordered list as a listview until you 'create' it.

Manually refreshing a page with a list containing data-role="listview" marks it up as a listview just as any other jquery mobile attributes are processed on page load, thats why it works when you were refreshing it.

Upvotes: 2

Related Questions