Question

I’m doing a pretty typical JSON request and populating a JRendere template. It works great, but when I wrap the li in a href it loses all formatting.

HTML Code:

<script id="recipeTemplate" type="text/x-jquery-tmpl"> 

                {{for Content}}
                <a href='searchResults.html' data-transition='slide'>
                <li class="ui-li ui-li-static ui-body-c" style='height: 150px; border: 0px; margin-left: 20px; margin-right: 20px;'>
                        <img src="{{:ImageURL}}" style='max-height: 125px; max-width: 125px;  position: absolute;'/>
                         <div style='margin-left: 50px;'>
                             <h3  style="white-space : normal;">{{:Title}}</h3>
                             <h3  style="white-space : normal;">Ratings:</h3>
                             <p style="white-space : normal;">{{:Description}}</p>
                        </div>

                </li>
                </a>
                {{/for}}
        </script>

The JS is as follows:

$("#search").focusout(function()
{
    var searchTerm = $("#search").val();
    $.getJSON("http://website?searchterm=" + searchTerm + "&callback=?",
    function (data)
    {
        var htmlString = $("#recipeTemplate").render( data );
        $('#results').html(htmlString).listview('refresh');
    });
});

It looks as above. Why does it lose the CSS?

Thanks, Graeme.

Answer 1

It works great, but when I wrap the li in a href it loses all
formatting.

First of all, having an <li> within an <a> tag is invalid HTML.

Your CSS is most likely relying on a specific order, targeting an element then maybe another element which has to have a specific class inside that element, and so on.

By adding the <a> around the <li> element you have now changed the expected order and you CSS is not able any more to match the selectors.

Placing your <a> tag inside the <li> instead could keep the CSS intact and at the same time be valid HTML, well, assuming you have ul or ol around the set of li‘s in the final HTML.

Check your CSS and make sure you are not messing with the expected order of nested elements or classes. Then either ass the <a> so it doesn’t break the CSS or update the CSS to match your new hierarchy.