jQuery Mobile在数据库查询后刷新listview

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");
            }
        }); 

再次，一切正常，除了我必须执行手动刷新以获取要更新的listview中的值。 如果有人提出建议，我将不胜感激。

提前致谢！

Answer 1

假设您的缩写php代码包含一个完整的无序列表，其中包括<ul></ul>标记（顺便说一句，您的缩写代码不包含</ul> ，但您缩写时将其截断了），而不仅仅是列表标记<li></li>您将需要在接收到的listview的父div上触发一个create事件。

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

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

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

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

手动刷新包含data-role =“ listview”的列表的页面，就像在页面加载时处理任何其他jquery移动属性一样，将其标记为listview，这就是为什么刷新时它可以工作。