VoiceGap

Filling the space between You and Your Apps

How to Add a Dynamic ViewList in JQuery Mobile

In this post we will look at formatting improvements from our Ajax web search. We will use the JQueryMobile (JqM) ListView for this. There are only a few changes: the CSS, and the ‘work’ function.

Update the Expendable.css to set the image size.

.thumbs {
	float:left;
	border:#000 solid 1px;
	margin-bottom:1px;
	margin-right:1px;
	width: 100px;
	height: 60px;
}

Now we have to add the correct class names to the output html. It really is just that simple. Figuring out how to update the view, that was hard.

function work() {
        var s = $.trim($("#searchField").val());
 
        $.getJSON("http://api.search.live.net/json.aspx?Appid="+appid+"&query="+escape(s)+"&sources=image&image.count=20", {}, function(res) {
            var results = res.SearchResponse.Image.Results;
            if(results.length == 0) {
                $("#tab-3").html("No results!");
                return;
            }
            var s = "<ul data-role=\"listview\">";
for(var i=0; i<results.length; i++) {
     s+= "<li>";
     s+= "<a href=\"" + results[i].Url + "\">" 
     s+= "<img class=\"thumbs\" src=\""+results[i].Thumbnail.Url+"\" />";
     s+= results[i].Title;
     s+= "<span class=\"ui-li-count\">(" + results[i].FileSize + ")</span></a></li>";
            }
     s+= "</ul>";
         $("#tab-3").html(s);
         $("#bar-3").click();
         $("#tab-3 ul").listview();
         $("#tab-3 ul").listview('refresh');
        });
}

Here is a snapshot of the updated screen. I said “planets.”

Snapshot of Planets inside ListView UI

Comments are currently closed.