Refresh jQuery mobile listview after ajax

Question

I am trying to refresh a jQuery mobile list view after an ajax post, I have been trying to use the .trigger("create") to do this like so:

<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>

I also tried using $('.video-list').listview('refresh'); but this didn't work either. It is refreshing the JSON data fine, but it is not applying the jquery mobile CSS classes, thus I am losing the listview styles. Any thoughts??

Thanks

Please post your HTML so we can see what your selectors point to. — Calavoow
– Calavoow, Commented Jul 20, 2012 at 10:05
Hi Calavoow, I have edited the post to display the HTML and jQuery template. Thanks — Danny Brady
– Danny Brady, Commented Jul 20, 2012 at 10:15
Hi Harry - just a formatting mistake when editing the code on the post. This tag is completed. Thanks — Danny Brady
– Danny Brady, Commented Jul 20, 2012 at 10:23
Instead of using a jQuery template to format your code you could try and only create a listview of titles without using the template plugin. Another tip: You can use jQuery's .getJSON(..) command to fetch JSON with AJAX. — Calavoow
– Calavoow, Commented Jul 20, 2012 at 10:28

Danny Brady · Accepted Answer · 2012-07-23 09:44:25Z

Solution to this was that DrawPageContent() was not being called when the document was ready. Once this was changed I could use .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");
        }
    });
}

Thanks for all the input.

Hkachhia · Accepted Answer · 2012-07-20 10:26:25Z

0

I think you can use id instead of class because you can use this class in multiple control so try id of your tag as per given below

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

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

answered Jul 20, 2012 at 10:26

Hkachhia

4,5458 gold badges44 silver badges79 bronze badges

3 Comments

Danny Brady Over a year ago

Hi Harry, thanks for the post. I did try this previously against the class... Even with the ID, I get "TypeError: $("#vdo_list").listview is not a function" - I am using jquery 1.7.2 and jquery mobile 1.1.1 (latest versions)

Hkachhia Over a year ago

You can apply id vdo_list in ul?

hekomobile Over a year ago

Please try something like this $(".video-list").listview('refresh');

Collectives™ on Stack Overflow

Refresh jQuery mobile listview after ajax

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related