Question

I have a simple xml file that contains information such as name, address, job title… I would like to parse this file with jquery parseXML() and then display its content in a nested list. I have a function like so:

function parseXml(xml)
    { 
      $(xml).find("Employee").each(function()
      {
        $("#output").append("<li><h3>" + $(this).find("name").text()+ "</h3><p>"
                      + $(this).find("jobtitle").text() + "</p>" +  
                      "<ul><li>"+$(this).find("address").text() + 
                      "</li><li>"+$(this).find("workphone").text() + 
                      "</li><li>"+$(this).find("homephone").text() + 
                      "</li><li>"+$(this).find("cellphone").text() +
                      "</li><li>"+$(this).find("fax").text() +
                      "</li><li>"+$(this).find("contractor").text() +
                      "</li></ul></li>"
        );
        $("#output").listview("refresh");
      });
    }

… that gets the information into the first list no problem. However, the second UL, the nested UL, isn’t displaying correctly. Mainly when I click on the parent LI, the final xml entry in the document shows up, badly formated, as the nested LI. Everything is crammed together vertically on the screen.

My xml looks like so:

<Employee>
        <name>Jon</name>
        <email>[e-mail]</email>
        <jobtitle>Software Engineer</jobtitle>
        <address>123 City Street</address>
        <workphone>555-555-5555</workphone>
        <homephone>555-555-5551</homephone>
        <cellphone>555-555-5552</cellphone>
        <fax>555-555-5553</fax>
    </Employee>
    <Employee>
        <name>Don</name>
        <email>[e-mail]</email>
        <jobtitle>Software Man</jobtitle>
        <address>555 City Street</address>
        <workphone>222-222-2222</workphone>
        <homephone>222-222-2224</homephone>
        <cellphone>222-222-2226</cellphone>
        <fax>222-222-2228</fax>
    </Employee>
    <Employee>
        <name>Juan</name>
        <email>[e-mail]</email>
        <jobtitle>IT Specialist</jobtitle>
        <address>888 City Street</address>
        <workphone>777-878-7878</workphone>
        <homephone>777-888-7878</homephone>
        <cellphone>777-777-7878</cellphone>
        <fax>777-878-7898</fax>
    </Employee>

Anyone have a better way to display this xml file within a nested list? I like the Jquery Mobile way of just creating the nested list and it turns the parent into a link to the nested LI.

Answer 1

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

my .listview(“refresh”); needed to be OUTSIDE of the each.