jQuery mobile creating table doesn't loop through xml correctly

Question

When I didn't have a class or anything my xml parsing was going through and looping, but I'm now trying to style it using jquery mobile. I have to create the list this way so that the styles get applied by jquery after load. But it's only loading the first result in the list. If i alert out $(this).text() I get 5 responses which is correct. But the following code isnt working.

$(document).ready(function() {

                             $.ajax({
                                    type: 'GET',
                                    url: 'test.xml',
                                    dataType: 'xml',
                                    success: function(xmlDoc) {
                                    var $xml = $(xmlDoc);
                                    $xml.find('FirstName').each(function() {
                                                                $("#list").html('<li ><a href="acura.html">' + $(this).text() + '</a></li>');
                                                                $("#list").listview('refresh');
                                                                });

                                    }
                                    });



            });

Heres the html:

 <body>
        <div data-role="page">

            <div data-role="header">
                <h1>Deep Web</h1>
            </div><!-- /header -->

           <ul id="list" data-role="listview"></ul><!-- /content -->

            <div data-role="footer">
                <h4>Footer content</h4>
            </div><!-- /footer -->

        </div>
    </body>

Okan Kocyigit · Accepted Answer · 2012-05-07 21:52:41Z

1

 $("#list").html('<li ><a href="acura.html">' + $(this).text() + '</a></li>');

In here you are setting a new html in every loop,

change it like this,

 $("#list").append('<li ><a href="acura.html">' + $(this).text() + '</a></li>');

answered May 7, 2012 at 21:52

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

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

Comments

Jasper · Accepted Answer · 2012-05-07 21:54:24Z

.html(SONETHING) is the same thing as doing .empty().append(SOMETHING). And what you should so is buffer what you'll append to the DOM and append it all at once, because that's a costly procedure.

                         $.ajax({
                                type: 'GET',
                                url: 'test.xml',
                                dataType: 'xml',
                                success: function(xmlDoc) {
                                    var $xml = $(xmlDoc),
                                        out  = [];//create array to buffer output
                                    $xml.find('FirstName').each(function() {

                                        //add this index to the buffer array
                                        out.push('<li ><a href="acura.html">' + $(this).text() + '</a></li>');
                                    });

                                    //select the #list element only once, replace the HTML all at once, then refresh
                                    $("#list").html(out.join('')).listview('refresh');

                                }
                        });

See how an array is used to store a bunch of HTML strings that get concocted together. Also, if you only want to add the new list-items rather than overwrite the existing ones you can replace .html() with .append().

Docs for .append(): http://api.jquery.com/append

Collectives™ on Stack Overflow

jQuery mobile creating table doesn't loop through xml correctly

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related