How to put in different Listview?

Question

My jquery codes to get Name,code and category:

     $(req.responseText).find("Table").each(function(i) {
              var item = $(this),
              name = item.find('Name').text(),
              code = item.find('Code').text(),
              catg = item.find('Category').text();                    

                 var $content = $('<li><a href="#"><img src="../../img/album-bb.jpg"><h3>Name: '+ name + '</h3><p>Code: '+ code + '</p><p>Category: '+ catg + '</p></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Add to favorites</a></li>');                              
                 $('#RecipeList').append($content).listview('refresh');



      });

this my sample response of my XML:

<Table diffgr:id="Table1" msdata:rowOrder="0">
    <Code>106377</Code>
    <Name>Blackened red snapper</Name>
    <Category>123</Category>
    <Yield>4</Yield>
    <YieldUnit/>
</Table>
<Table diffgr:id="Table2" msdata:rowOrder="1">
    <Code>303570</Code>
    <Name>Celery soup</Name>
    <Category>123</Category>
    <Yield>1</Yield>
    <YieldUnit/>
</Table>
<Table diffgr:id="Table3" msdata:rowOrder="2">
    <Code>303675</Code>
    <Name>Challah French Toast</Name>
    <Category>123</Category>
    <Yield>6</Yield>
    <YieldUnit/>
   </Table>

the listview ouput is this:

Name: Blackened red snapperCelerySoupChallah French toast
Code: 106377303570303675
Category: 123123123

How to put in different listview?..when its append.Thanks

Answer 1

Working example: http://jsfiddle.net/Gajotres/uzphF/

$('#index').live('pagebeforeshow',function(e,data){    
    $('#table-data').empty();
    $.ajax({
        type: "POST",
        url: "/echo/xml/",
        dataType: "xml",
        data: {
            xml: '<Tables><Table><Code>106377</Code><Name>Blackened red snapper</Name><Category>123</Category><Yield>4</Yield><YieldUnit/></Table><Table><Code>303570</Code><Name>Celery soup</Name><Category>123</Category><Yield>1</Yield><YieldUnit/></Table><Table><Code>303675</Code><Name>Challah French Toast</Name><Category>123</Category><Yield>6</Yield><YieldUnit/></Table></Tables>'
        },
        success: function(xml) {
            ajax.parseXML(xml);
        },
        error: function (request,error) {
            alert('Network error has occurred!');
        }
    });
});

var ajax = {  
    parseXML:function(result){
        $(result).find("Table").each(function(){
            var code  = $(this).find('Code').text();
            var name  = $(this).find('Name').text();
            var cat  = $(this).find('Category').text();
            var yield  = $(this).find('Yield').text();

            $('#table-data').append('<li><a href="#cars"><h3>Table code:<span> '+code+'</span></h3><p>Table name: ' + name + '</p></a></li>');
        });    
        $('#table-data').listview('refresh');
    }
}

This example used mockup jsFiddle function to test XML ajax call, but this part is not essential. Only thing you need to know is how to loop through XML. One more thing, your XML example must be wrapped in parent tag, I named it tables.

Answer 2

Try this:

var ni = 0;
var ci = 0;
var cati = 0;
var NameArr = new Array();
var CodeArr = new Array();
var CatArr  = new Array();

$(req.responseText).find('Name').each(function () {
  NameArr[ni] = $(this).text();
  ni++;
}

$(req.responseText).find('Code').each(function () {
  CodeArr[ci] = $(this).text();
  ci++;
}

$(req.responseText).find('Category').each(function () {
  CatArr[cati] = $(this).text();
  cati++;
}

for(var i=0; i<NameArr.length; i++){
    var $content = $('<li><a href="#"><img src="../../img/album-bb.jpg"><h3>Name: '+ NameArr[i] + '</h3><p>Code: '+ CodeArr[i]+ '</p><p>Category: '+ CatArr[i]+ '</p></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Add to favorites</a></li>');                              
    $('#RecipeList').append($content).listview('refresh');
}