Question

I am having problems getting a my webservice call to work properly.

My success call adds a list of LI tags to a UL and the goal is to have these results cleared before another call is made. Right now if you were to click the call button the new results would be added to the list.

I read that using .listview(‘refresh’); was supposed to do this but it does not for me.

Any ideas as to what is happening?

The HTML

<div data-role="content" id="">

            <ul data-role="listview" id="Gallery" class="gallery">
            </ul>

    </div>

The JS

getAlbumImages = function (album) {
        $.ajax({
            url: wcfServiceUrl + "GetMediaSource?AlbumId=" + album,
            data: '{}',
            type: 'GET',
            contentType: "application/x-www-form-urlencoded",
            async: true,
            //crossBrowser: true,
            dataType: 'jsonp',
            //jsonpCallback: 'MediaSource',
            timeout: 5000,
            success: function (data, status) {
                $.each(data, populateImageGrid);
            },
            complete: function () {
                $("ul#Gallery").listview("refresh");
            },
            error: function () {
                alert('There was an error loading the data.');
            }
        });
    }
function populateImageGrid() {
        var photoSource, thumbSource, title, description;
        photoSource = this.ImageSource;
        thumbSource = this.ThumbSource;
        title = this.Title;
        description = this.Description;
        imageTile += "<li><a href='" + photoSource + "'><img src='" + thumbSource + "' alt='" + title + "' /></a></li>";
        console.log(imageTile);
        $("ul#Gallery").html(imageTile);
        //$("ul#Gallery").listview();
       // $("ul#Gallery").listview('refresh'); 
    }

Thanks

Answer 1

Make sure imageTile is being reset. I assume its a global variable, if so, you are just appending to it.

Changing to this:

success: function (data, status) {
    imageTite = "";
    $.each(data, populateImageGrid);
},

Should do it. Or, even better, make it a local variable if theres no reason to it being a global one:

var imageTile = "<li><a href='" + photoSource + "'><img src='" + thumbSource + "' alt='" + title + "' /></a></li>";