javascript - 数据库查询后 jQuery Mobile 刷新 ListView

Question

我有一个带有 ListView 统计信息的 jQuery Mobile 网站。用户可以单击传递弹出窗口的“操作”按钮。根据他们在弹出窗口中的回答， ListView 中的数字/统计数据可能会发生变化。数据库查询成功，但页面没有自动更新；我必须手动刷新它才能看到更改。我正在使用 .post() 来查询数据库(最后的代码)。

我已经看到这个问题在这里被问过多次，而且通常使用相同的解决方案。在成功的回调或弹出“afterclose”中，使用:

$('#somelist').listview('refresh');

或者

$("#page").tigger("create");

不幸的是，这些解决方案似乎都不适合我。这对我来说已经成为一个非常令人沮丧的问题，所以我希望有人能提供帮助!

这是我的代码的简化版本:

<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 -->

我的数据库通过 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");
        });

    }); 

还有我的弹出式 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");
            }
        }); 

同样，除了我必须执行手动刷新以更新 ListView 中的值外，一切正常。如果有人有建议，我将不胜感激。

提前致谢!

Answer 1

从您的缩写 php 代码假设您的帖子响应包含一个完整的无序列表，包括 <ul></ul>标签(顺便说一下，您的缩写代码不包含 </ul> ，也许您在缩写时 chop 了它)而不仅仅是列表标签 <li></li>您需要在接收到的 ListView 的父 div 上触发创建事件。

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

这段代码为父 div 中包含属性 data-role="listview"的子 html 无序列表创建了一个新的 ListView 。

我相信$('#somelist').listview('refresh');用于仅在注入(inject)时使用 <li></li>标记到一个已经存在的 <ul>然后用新的 <li> 刷新预先存在的列表内容。

当我在应用程序中遇到类似问题并且它们无法正常工作时，我发现使用刷新等的结果类似，因为 jquery mobile 尚未将新的 html 无序列表视为 ListView ，因此它无法刷新“ ListView ”。请注意对 ListView 的引用，而不是包含属性 data-role="listview"的 html 无序列表，jquery mobile 似乎不会将无序列表视为 ListView ，直到您“创建”它。

使用包含 data-role="listview"的列表手动刷新页面将其标记为 ListView ，就像在页面加载时处理任何其他 jquery 移动属性一样，这就是它在刷新时起作用的原因。