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>，也许你在缩写时截断了它而不仅仅是列表标签<li></li>您将需要在收到的列表视图的父div上触发创建事件。

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

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

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

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

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

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

1 个答案: