Listview 在ajax之后刷新jQuery移动列表视图

在一篇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}" alt="video 1" />
            <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>

@Html.HiddenFor（model=>model.Mode）



DrawPageContent（）；
//函数以在传递的模式下重新绘制页面内容
$（文档）。在（“单击”上，“#链接文件夹a”，函数（）{
//警报（“内部链接”）；
var mode=$（this.attr（“数据模式”）；
$（“#模式”）.val（模式）；
DrawPageContent（）；
});
//将JSON数据呈现为HTML并通过jQuery模板显示
函数DrawPageContent（）{
var mode=$（“#mode”）.val（）；
var jsonUrl=“/mobile/GetVideos？mode=“+mode；
$.ajax({
“异步”：false，
“全局”：错误，
“url”：jsonUrl，
“数据类型”：“json”，
“成功”：函数（数据）{
//使用模板渲染视频
$（“.video list”）.html（$（“.videoTemplate”）.tmpl（数据））；
$（“.video list”）.trigger（“创建”）；
}
});
}

我还尝试使用$（'.video list'）.listview（'refresh'）；但这也不起作用。它很好地刷新了JSON数据，但没有应用jquery mobile CSS类，因此我丢失了listview样式。有什么想法吗

---

谢谢

我认为您可以使用id而不是类，因为您可以在多个控件中使用此类，所以请按照下面给出的方法尝试标记的id

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

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

$（“vdo列表”）.listview（“刷新”）；

我认为您可以使用id而不是类，因为您可以在多个控件中使用此类，所以请按照下面给出的方法尝试标记的id

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

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

$（“vdo列表”）.listview（“刷新”）；

解决方案是在文档准备就绪时没有调用DrawPageContent（）。更改后，我可以使用.listview（“刷新”）：

$（函数（）{
DrawPageContent（）；
});
$（文档）。在（“单击”上，“#链接文件夹a”，函数（）{
var mode=$（this.attr（“数据模式”）；
$（“#模式”）.val（模式）；
DrawPageContent（）；
});
函数DrawPageContent（）{
var mode=$（“#mode”）.val（）；
var jsonUrl=“/mobile/GetVideos？mode=“+mode；
$.ajax({
“异步”：false，
“全局”：错误，
“url”：jsonUrl，
“数据类型”：“json”，
“成功”：函数（数据）{
//使用模板渲染视频
$（“.video list”）.html（$（“.videoTemplate”）.tmpl（数据））；
$（“.video list”）.listview（“刷新”）；
}
});
}

---

感谢您的所有输入。

解决方案是在文档准备就绪时没有调用DrawPageContent（）。更改后，我可以使用.listview（“刷新”）：

$（函数（）{
DrawPageContent（）；
});
$（文档）。在（“单击”上，“#链接文件夹a”，函数（）{
var mode=$（this.attr（“数据模式”）；
$（“#模式”）.val（模式）；
DrawPageContent（）；
});
函数DrawPageContent（）{
var mode=$（“#mode”）.val（）；
var jsonUrl=“/mobile/GetVideos？mode=“+mode；
$.ajax({
“异步”：false，
“全局”：错误，
“url”：jsonUrl，
“数据类型”：“json”，
“成功”：函数（数据）{
//使用模板渲染视频
$（“.video list”）.html（$（“.videoTemplate”）.tmpl（数据））；
$（“.video list”）.listview（“刷新”）；
}
});
}

---

感谢您的所有输入。

请发布您的HTML，以便我们可以查看您的选择器指向的内容。您好，Calavow，我已经编辑了此帖子以显示HTML和jQuery模板。感谢您的代码

标记不完整Hi Harry-只是在文章中编辑代码时出现了格式错误。此标记已完成。感谢不要使用jQuery模板来格式化代码，您可以尝试只创建标题列表视图，而不使用模板插件。另一个提示：您可以使用jQuery的.getJSON（..）命令通过AJAX获取JSON。请发布您的HTML，这样我们就可以看到您的选择器指向什么。您好Calavow，我已经编辑了这篇文章以显示HTML和jQuery模板。感谢您的代码
标记不完整Hi Harry-只是在文章中编辑代码时出现了格式错误。此标记已完成。感谢不要使用jQuery模板来格式化代码，您可以尝试只创建标题列表视图，而不使用模板插件。另一个提示：您可以使用jQuery的.getJSON（..）命令通过AJAX获取JSON。我以前确实试过这个来对付这个班。。。即使使用ID，我也会得到“TypeError:$（“.vdo_列表”）。listview不是一个函数”-我使用的是jquery 1.7.2和jquery mobile 1.1.1（最新版本），您可以在ul中应用ID vdo_列表？请尝试类似于

$（.video list”）。listview（'refresh'）$（.video list”）。listview（'refresh'）