ajax后刷新jQuery mobile listview

Posted 2023-05-09

【中文标题】ajax后刷新jQuery mobile listview

【英文标题】：Refresh jQuery mobile listview after ajax

【发布时间】：2012-07-19 13:17:24

【问题描述】：

我正在尝试在 ajax 发布后刷新 jQuery 移动列表视图，我一直在尝试使用 .trigger("create") 来执行此操作：

<div data-role="content">


<div id="linksHolder" data-role="controlgroup" data-type="horizontal">
    <a id="most-played" href="#" data-role="button" data-mode="mostplayed">Most Played</a>
    <a id="latest-added" href="#" data-role="button" data-mode="latestadded">Latest Added</a>
    <a id="featured" href="#" data-role="button" data-mode="featured">Featured</a>
</div>

@html.HiddenFor(model => model.Mode)
<ul class="video-list" data-role="listview" data-divider-theme="a" data-inset="true"></ul>

</div><!-- /content -->


<script class="videoTemplate" type="text/x-jQuery-tmpl"> 
    <li data-theme="c">
        <a href="$LinkToVideo">
            <img src="$ThumbnailPath"  />
            <div class="title">$Title</div>
            <div class="description">$Description</div>
            <div class="additional-details">
                <b>Category:</b> $Category<br />
                <b>Contributor:</b> $Contributor
            </div>
        </a>
    </li>  
</script>

<script type="text/javascript">
    DrawPageContent();

    // function to redraw the page content with the mode passed
    $(document).on("click", "#linksHolder a", function () 
            //alert("Inside link");
            var mode = $(this).attr("data-mode");
            $("#Mode").val(mode);
            DrawPageContent();
    );

    // Renders the JSON data into HTML and displayed through a jQuery template
    function DrawPageContent() 
        var mode = $("#Mode").val();
        var jsonUrl = "/mobile/GetVideos?mode=" + mode;

        $.ajax(
            'async': false,
            'global': false,
            'url': jsonUrl,
            'dataType': "json",
            'success': function (data) 
                // Render the videos using the template
                $(".video-list").html($(".videoTemplate").tmpl(data));
                $(".video-list").trigger("create");
            
        );
    
</script>

我也尝试过使用 $('.video-list').listview('refresh');但这也不起作用。它可以很好地刷新 JSON 数据，但它没有应用 jquery 移动 CSS 类，因此我丢失了 listview 样式。有什么想法吗？？

谢谢

【问题讨论】：

请发布您的 HTML，以便我们查看您的选择器指向的内容。

嗨 Calavoow，我已经编辑了帖子以显示 HTML 和 jQuery 模板。谢谢

在你的代码中 标签不完整

嗨 Harry - 只是在编辑帖子上的代码时出现格式错误。这个标签就完成了。谢谢

您可以尝试只创建标题列表视图而不使用模板插件，而不是使用 jQuery 模板来格式化您的代码。另一个提示：您可以使用 jQuery 的 .getJSON(..) 命令通过 AJAX 获取 JSON。

【参考方案1】：

解决方案是在文档准备好时没有调用 DrawPageContent()。更改后，我可以使用 .listview("refresh"):

<script type="text/javascript">
$(function () 
    DrawPageContent();
);

$(document).on("click", "#linksHolder a", function () 
    var mode = $(this).attr("data-mode");
    $("#Mode").val(mode);
    DrawPageContent();
);

function DrawPageContent() 
    var mode = $("#Mode").val();
    var jsonUrl = "/mobile/GetVideos?mode=" + mode;
    $.ajax(
        'async': false,
        'global': false,
        'url': jsonUrl,
        'dataType': "json",
        'success': function (data) 
            // Render the videos using the template
            $(".video-list").html($(".videoTemplate").tmpl(data));
            $(".video-list").listview("refresh");
        
    );

感谢大家的意见。

【参考方案2】：

我认为您可以使用 id 代替 class，因为您可以在多个控件中使用此类，因此请按照以下给出的标签尝试 id

<ul id="vdo_list" class="video-list" data-role="listview" data-divider-theme="a" data-inset="true"></ul>

$("#vdo_list").listview('refresh');

【讨论】：

嗨，哈利，感谢您的帖子。我之前确实针对班级尝试过这个......即使使用ID，我也得到“TypeError：$（“#vdo_list”）.listview不是函数” - 我正在使用jquery 1.7.2和jquery mobile 1.1.1（最新版本）

你可以在 ul 中应用 id vdo_list 吗？

请尝试类似$(".video-list").listview('refresh');