1

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!

7
  • Remove .trigger() you don't need it here. You should call .listview('refresh') after successfully appending items, otherwise you'll get an error. Commented Oct 30, 2013 at 23:32
  • Omar: thank you for your response. I've tried calling .listview("refresh") many times, but it doesn't appear to do anything. Commented Oct 31, 2013 at 12:27
  • As per your code, ul - listview - has no id? Commented Oct 31, 2013 at 12:48
  • That is correct. I originally had an id for ul, but the W3C validator didn't like it. What I did was wrap the unordered list in a div named "testdiv". Commented Oct 31, 2013 at 13:20
  • Also, just to clarify, I'm not appending data to the list view. Instead, I'm changing/updating existing in the listview. Commented Oct 31, 2013 at 13:22

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

3 Comments

Thank you for your response! You were absolutely right about the closing </ul>. I actually caught that after I submitted the post but, unfortunately, that didn't fix the issue. I added a div (#testdiv) to wrap around the unordered list and created the trigger per your recommendation. I think it's a step in the right direction as "something" happens now - it flickers and appears to redraw the listview... but it still doesn't get the updated value from the database until I manually refresh. I've updated my code above, if you have time to take a look again. Thank you!
Based on your description of how it flickers but the information only comes in on page refresh, have you checked your entire flow of making the request to insert the new list from beginning to end throughout your code? It sounds as if your ajax request is not putting the information in correctly somehow? If the listview is flickering and not showing results, it sounds like your listview is now creating ok, but has nothing to show in it? Without more code example of your ajax request flow it's difficult for me to determine where in your code the bugs are. Can you edit to show full code workflow
Also check out Create vs Refresh: An important distinction paragraph for more detail on the difference between the two here: view.jquerymobile.com/1.3.2/dist/demos/faq/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.