jQuery Parse XML display in jQuery Mobile list UL UL returning last item in XML only

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>jdoe@email.com</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>sjones@email.com</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>htree@email.com</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>uyuri@email.com</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>

I noticed that you are appending the list-items with an `
` element that has a constant as an ID. Since that's inside of a loop, you're creating a lot of elements with the same ID. Are you using a custom click event handler for your list? I ask because I don't see any links in your markup or any click event handler, so I'm not sure how you're linking from list to list. — Jasper, Sep 20 '12 at 16:20
Hi Jasper, I am relying on jquery mobile js to do this form me via the nested list idea they offer. When you set up a UL UL, the second UL is hidden and on UL LI click the nested UL shows... http://jquerymobile.com/demos/1.1.1/docs/lists/lists-nested.html — jasonflaherty, Sep 20 '12 at 17:50

score 6 · Accepted Answer · edited Sep 20 '12 at 01:04

6

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

edited Sep 20 '12 at 01:04

Jasper

75,717
14
151
146

answered Sep 20 '12 at 00:48

Ouadie

13,005
4
52
62

The OP has shown their code, and they are already refreshing the list-view widget. – Jasper Sep 20 '12 at 01:05
yes, but they should refresh the list-view outside the .each() $(xml).find("Employee").each(function () { ... }); $('#list').listview('refresh'); – Ouadie Sep 20 '12 at 01:10
Yes they *should* but that's only because doing it inside of the loop creates extra overhead since it only needs to be ran once rather than once per loop. As long as you run the refresh command on the widget after you've updated its HTML, you're fine. – Jasper Sep 20 '12 at 16:19
hillarious. I can't believe that is all it was... That worked for my situation here. Thanks again. – jasonflaherty Sep 20 '12 at 17:52

score 0 · Answer 2 · edited Oct 27 '14 at 12:06

0

$("#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');
<!-- Put It Here -->

edited Oct 27 '14 at 12:06

Weafs.py

22,731
9
56
78

answered Oct 27 '14 at 12:04

sam

1

jQuery Parse XML display in jQuery Mobile list UL UL returning last item in XML only

2 Answers2

Linked