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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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 <h3> 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
– Jasper, Commented Sep 20, 2012 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... jquerymobile.com/demos/1.1.1/docs/lists/lists-nested.html — jasonflaherty
– jasonflaherty, Commented Sep 20, 2012 at 17:50

Jasper · Accepted Answer · 2012-09-20 01:04:56Z

6

+50

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

edited Sep 20, 2012 at 1:04

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

answered Sep 20, 2012 at 0:48

Ouadie

13.2k4 gold badges54 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jasper Over a year ago

The OP has shown their code, and they are already refreshing the list-view widget.

Ouadie Over a year ago

yes, but they should refresh the list-view outside the .each() $(xml).find("Employee").each(function () { ... }); $('#list').listview('refresh');

Jasper Over a year ago

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.

jasonflaherty Over a year ago

hillarious. I can't believe that is all it was... That worked for my situation here. Thanks again.

Weafs.py · Accepted Answer · 2014-10-27 12:06:22Z

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, 2014 at 12:06

Weafs.py

23k9 gold badges58 silver badges80 bronze badges

answered Oct 27, 2014 at 12:04

sam

1

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related