Question

I am using jQuery Mobile 1.1.1 and jQuery 1.7.1.
JQuery mobile can have a nested list and on click can show the next ul in another screen. See this example: http://jquerymobile.com/demos/1.1.1/docs/lists/lists-nested.html#&ui-page=0-8

I am trying to do this by parsing an XML file of data. I have no problem listing the contents of the list, however, on click of the FIRST parent item, i always get the child of the LAST parent item.

Looking in Firebug, I can see that all the Children area there, but the relationship is getting messed up somehow…

How can I click on the first parent LI and get the children of that parent?

Here is my script section with jquery/mobile cdn:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    var xml;
    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "test.xml",
            dataType: "xml",
            success: xmlParser
        });
    });
        //loading XML file and parsing to .main div.
        function xmlParser(data) {
            xml = data;

            $('#load').fadeOut();

            $(xml).find("Employee").each(function () {
                name = $(this).attr("name");
                var email = $(this).find("email").text();
                var jobtitle = $(this).find("jobtitle").text();
                var address = $(this).find("address").text();
                var workphone = $(this).find("workphone").text();
                var homephone = $(this).find("homephone").text();
                var cellphone = $(this).find("cellphone").text();
                var fax = $(this).find("fax").text();

                $("#list").append('<li><h3 id="name">' + name + '</h3><ul><li>Email: '+ email + '</li><li>Job Title: '+ jobtitle + '</li><li>Address: '+ address + '</li><li>Work Phone: '+ workphone + '</li><li>Home Phone: '+ homephone + '</li><li>Cell Phone: '+ cellphone + '</li><li>Fax: '+ fax + '</li></ul></li>');

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

</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

Here is the html:

<div data-role="page">
  <div data-role="header" data-theme="a">
    <h1>Employees</h1>
  </div>
  <!-- /header -->
  <div data-role="content">
    <div class="content-primary">
      <ul id="list" data-role="listview" data-theme="a" data-filter="true">
      <li id="load">Loading Data...</li>
      </ul>
      <ul id="results" data-role="listview" data-theme="a">
      </ul>
    </div>
    <!-- /contentprimary --> 
  </div>
  <!-- /content -->
  <div data-role="footer" data-theme="a">
    <div data-role="navbar">
      <p align='center'>::: Footer :::</p>
    </div>
    <!-- /navbar --> 
  </div>
  <!-- /footer --> 
</div>
<!-- /page -->

Here is the sample xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<THEEmployees xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Employee name="John Doe">
    <email>[e-mail]</email>
    <jobtitle>Software Engineer</jobtitle>
    <address>San Bernardino, CA</address>
    <workphone>555-555-1212</workphone>
    <homephone>444-555-1212</homephone>
    <cellphone>333-555-1212</cellphone>
    <fax>N/A</fax>
    <contractor>No</contractor>
  </Employee>
  <Employee name="Sam Jones">
    <email>[e-mail]</email>
    <jobtitle>Sotware Developer</jobtitle>
    <address>San Francisco, CA</address>
    <workphone>888-888-8888</workphone>
    <homephone>999-999-9999</homephone>
    <cellphone>101-010-1010</cellphone>
    <fax>555-555-6666</fax>
    <contractor>No</contractor>
  </Employee>
  <Employee name="Hank Tree">
    <email>[e-mail]</email>
    <jobtitle>Software Developer</jobtitle>
    <address>Everett, WA</address>
    <workphone>898-899-9955</workphone>
    <homephone>456-564-5566</homephone>
    <cellphone>899-999-9989</cellphone>
    <contractor>Yes</contractor>
  </Employee>
  <Employee name="Urki Yuri">
    <email>[e-mail]</email>
    <jobtitle>Project Engineer</jobtitle>
    <address>Washington DC</address>
    <workphone>222-222-2222</workphone>
    <cellphone>222-222-2222</cellphone>
    <fax>569-596-5696</fax>
    <contractor>No</contractor>
  </Employee>
</THEEmployees>

Answer 1

Just put $('#list').listview('refresh'); after .each() and that’s it!!