Question

I am building a mobile interface for a search engine. The main CGI script returns a list of results as a <ul>. I then have a JQM script that iterates through each list item and makes an Ajax request to another CGI script to gather more information and insert it as a nested <ul>. The mechanics work, I’m just having problems with the display not looking as I’d expect.

First I’ll show you my code, then what I’d expect to see, finally what I’m actually seeing.

Here is a truncated version of the HTML that the main CGI script produces (from Firebug, so after jQuery has had it’s wicked way with it), in reality there are a number of list elements, but I’m just showing one as an illustration:

<ul id="searchresults" data-role="listview" class="ui-listview">
    <li id="64076268" class="result_item ui-li ui-li-static ui-btn-up-b ui-li-has-count">
        <a href="#indexPage&amp;ui-page=searchresults-0">
            <h1 class="ui-li-heading">Programming Perl / Tom Christiansen, Brian D. Foy &amp; Larry Wall.</h1>
            <p class="creator ui-li-desc">Tom Christiansen brian d foy; Larry Wall; Larry Wall</p>
            <p class="ui-li-desc">c2012</p>
            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">2 versions</span>
        </a>
    </li>
</ul>

The <a> element is being generated by jQuery, I don’t understand why. What I am expecting is this:

<ul id="searchresults" data-role="listview" class="ui-listview">
    <li id="64076268" class="result_item ui-li ui-li-static ui-btn-up-b ui-li-has-count">
        <h1 class="ui-li-heading">Programming Perl / Tom Christiansen, Brian D. Foy &amp; Larry Wall.</h1>
        <p class="creator ui-li-desc">Tom Christiansen brian d foy; Larry Wall; Larry Wall</p>
        <p class="ui-li-desc">c2012</p>
        <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">2 versions</span>
        <ul class="frbr">
            <li>
                <h1>Programming Perl</h1>
            </li>
            <li>
                <h1>Programming Perl / Tom Christiansen, Brian D. Foy &amp; Larry Wall.</h1>
            </li>
        </ul>
    </li>
</ul>

Which should cause the nested <ul>, as I understand it, to render as a separate page that will be displayed when the user clicks the parent <li>. That’s certainly how the jQuery docs on listviews describes it.

Here’s the jQuery that is grabbing the nested list and appending it to the parent <li>:

$(document).ready(function(){

    $(".result_item").each(function() {

        var me = $(this);

        $.ajax({
            type: "GET",
            url: "/m/ajax/get_frbrgroup_details.cgi",
            data: { frbrgroup: me.attr("id") },
            datatype: "text",
            cache: false,
            success: function(reply) {
                me.append(reply);
            },
            complete: function() {
                $("#searchresults").listview("refresh");
            }

        })
    });
});

And finally a screenshot of what I’d expect to see and what I am actually seeing:

Expected

What I am actually seeing

Is anyone able to shed any light on this as, from all the research I’ve done, I think I’m doing everything right! Thanks 🙂

Answer 1

Finally figured this one out. I was missing the fact that when JQM processes the page when it’s initially rendered, it moves the nested <ul> out of its parent <li>, so my attempt to target it there with the append was failing, as was my listview(“refresh”) on the parent <ul>. So I now give the nested <ul> a unique id so, once JQM has moved it out of the parent <li> I can still target it with the append and refresh. Seems to work! 🙂