数据库查询后jQuery Mobile刷新列表视图

Question

我有一个带有 listview 统计信息的 jQuery Mobile 网站。用户可以点击传递弹出窗口的“动作”按钮。根据他们在弹出窗口中的回答，列表视图中的数字/统计数据可能会发生变化。数据库查询成功，但页面没有自动更新；我必须手动刷新它才能看到变化。我正在使用 .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");
            }
        }); 

再次，一切正常，除了我必须执行手动刷新以获取要更新的列表视图中的值。如果有人有建议，我很感激。

提前致谢！

Answer 1

假设从您的缩写 php 代码中，您的帖子响应包含一个完整的无序列表，包括 <ul></ul> 标签（顺便说一句，您的缩写代码不包含 </ul>，也许您在缩写时截断了它）而不仅仅是列表标签 @ 987654324@你需要在收到的listview的父div上触发create事件。

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

此代码为子 html 无序列表创建一个新的列表视图，该列表在该父 div 中包含属性 data-role="listview"。

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

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

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