i'm trying to get the category wise listview dynamically using jquery. I have xml file with all content in that file i have different category's.
<div data-role="page" id="home"> <div data-role="header" data-theme="a" data-position="fixed"> <h1 id="title"></h1> </div> <div data-role="content" data-transition="slide" data-inset="true"> <ul class="list" id="section" data-role="listview" data-filter="true"> </ul> </div> </div>
xml file:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <sections> <section count="6" name="Alphabets" order="1"> <content order="1">A</content> <content order="2">B</content> <content order="3">C</content> <content order="4">D</content> <content order="5">E</content> <content order="6">F</content> </section> <section count="4" name="Numbers" order="2"> <content order="7">1</content> <content order="8">2</content> <content order="9">3</content> <content order="10">4</content> </section> </sections>
My code:
$(xml).find('section').each(function () { var section = $(this).attr("name"); var order = $(this).attr("order"); var count = $(this).attr("count"); $(xml).find('section[order="' + order + '"] content').each(function () { var content = $(this).text(); var seq = order + '' + $(this).attr('order'); var file = $(this).attr('file'); $("#section_list").append('<li data-role="list-divider" sec="'+ section +'"><a href="#chapter" class="style" id="' + order + '"><b>' + content + '</b></a> </li>');$("#section_list").listview({ autodividers: true, autodividersSelector: function (li) { var out = li.attr('sec'); return out; } }).listview('refresh'); }); }); });
I tried like this but this not working i dont knw where i did the mistake.Can any one help me out from this.
Thanks in Advance.