CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Bruno
Bruno

Reputation: 1042

Dynamic style listview

I'm generating a list view from an ajax call to a web-service.

This is the code:

var ajax = {  
parseJSONP:function(result){  
    movieInfo.result = result.results;
    $.each(result.results, function(i, row) {

        console.log("Title" + row.title);


        $('#movie-list').append('<li><a href="" data-id="' + row.id + '">`<img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"/>`<h3>' + row.title + '</h3><p>' + row.vote_average + '/10</p></a></li>');
    });

    $('#movie-list').listview('refresh');
}

};

What I need, is to make <img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"/>to fill the background of the row element and increase the row height by 30%. The problem is that I can't figure a way to insert the css with the list view creation.

Is there a way to do this? I'm new to javascript and jQuery mobile 1.4.3.

Best Regards

Upvotes: 0

Views: 175

Answers (2)

Hamilton Lucas
Hamilton Lucas

Reputation: 419

A few things I notice:

  • You are calling a jquery selector to get the element with the id of movie-list multiple times because the selector is in a loop. Rather than using jquery to look up the same element over and over again, you should set it into a variable and reuse it!

  • You are creating html using string concatenation. While this is usually fine for small amounts of dynamic html, it can very quickly become difficult to maintain. I suggest creating the DOM elements and appending them to each other (without the use of jquery) instead of making a giant html string.

  • You're building html in javascript! If at all possible, I would suggest adjusting your API to return the chunk of html that you need and build it server side rather than building it client side. If you build the html server side, then you can take advantage of whatever rendering framework you are using (PHP, Jade, JSF, etc...) and write the html as html.

With those things in mind, setting the background-image style property should work just fine. You may also need to use background-repeat and background-size to get the desired effect.

Here's what I came up with:

var ajax = {
    parseJSONP:function(response){
        var results = response.results;
        movieInfo.result = results;

        var $movieList = $("#movie-list");

        for(var i = 0; i < results.length; i++) {
            var row = results[i];

            console.log("Title: " + row.title);

            var listItem = document.createElement("li");
            var anchor = document.createElement("a");
            var header = document.createElement("h3");
            var paragraph = document.createElement("p");

            anchor.setAttribute("href", "");
            anchor.setAttribute("data-id", row.id);

            header.textContent = row.title;
            paragraph.textContent = row.vote_average + "/10";

            var backgroundImageUrl = "http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185" + row.poster_path;
            listItem.style.backgroundImage = "url('" + backgroundImageUrl + "')";
            listItem.style.backgroundRepeat = "no-repeat";
            listItem.style.backgroundSize = "cover";

            anchor.appendChild(header);
            anchor.appendChild(paragraph);
            listItem.appendChild(anchor);

            $movieList.append(listItem);
        }

        $movieList.listview('refresh');

        //increases the height of each list item by thirty percent
        $movieList.find("li").each(function(index, element) {
            var $element = $(element);
            $element.css("height", ($element.offset().height * 1.3) + "px");
        });
    }
};

Upvotes: 1

codeGig
codeGig

Reputation: 1064

Use html append like:

$('#movie-list').append('<li style="background:url(http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+') no-repeat; height:30%;"><a href="" data-id="' + row.id + '"><h3>' + row.title + '</h3><p>' + row.vote_average + '/10</p></a></li>');

Upvotes: 0

Related Questions