Dynamically populate jQuery Mobile list view content

Question

I currently am using a dynamically generated list view in jQuery mobile to display a bunch of data from a database. Although most of this content is in the database and generated by django before the page is loaded, there is also some content I'd like to insert into the list view elements that is stored using HTML5 localStorage.

As a result, this data can only be accessed via javascript, not the django backend. I envision binding some javascript to the pagebeforecreate event. After this, I need to somehow loop through all of the li elements within the ul (I have its id), except the first (since thats the divider).

After that it gets a bit tricky. Assume that I have an array already loaded up in javascript that has fetched the info from localStorage. Call it classNames. I've assigned a custom property period index, to each li identifying which index of the classNames array the given li should receive as text.

UPDATE

For example this the contents of a given list with look like before being enhanced by query.

    <li data-role="list-divider">Regular Schedule/li>
    <li periodindex="5" type="schedule">
        <h1 class="ui-li-heading">6</h1>
        <p class="ui-li-maintext"><i>class name goes here</i></p>
        <p class="ui-li-aside"><b>7:30</b> - <b>8:30</b></p>
        <p class="ui-li-count">60</p>
    </li>
    <li periodindex="3" type="schedule">
        <h1 class="ui-li-heading">6</h1>
        <p class="ui-li-maintext"><i>class name goes here</i></p>
        <p class="ui-li-aside"><b>8:45</b> - <b>9:50</b></p>
        <p class="ui-li-count">65</p>
    </li>
   <li periodindex="7" type="schedule">
        <h1 class="ui-li-heading">6</h1>
        <p class="ui-li-maintext"><i>class name goes here</i></p>
        <p class="ui-li-aside"><b>10:00</b> - <b>12:00</b></p>
        <p class="ui-li-count">120</p>
    </li>
   <li periodindex="0" type="schedule">
        <h1 class="ui-li-heading">6</h1>
        <p class="ui-li-maintext"><i>class name goes here</i></p>
        <p class="ui-li-aside"><b>1:00</b> - <b>4:00</b></p>
        <p class="ui-li-count">180</p>
    </li>

I need a way to loop through all the given li elements and replace the contents of "class name goes here" with the contents of the classNames array object at index specified by the periodindex property of the li element. Note also that the first li element in the list should be ignored as it is the title of the list.

Rory McCrossan · Accepted Answer · 2011-11-18 15:50:35Z

4

Assuming the classNames array is in the same order as the LI elements appear in your page, try this:

Updated as per OPs responses

for (var i = 0; i < classNames.length; i++) {
    $("#schedule li[periodindex='" + i + "']").find(".ui-li-maintext").html("<i>" + classNames[i] + "</i>");
}

edited Nov 18, 2011 at 15:50

answered Nov 18, 2011 at 14:10

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

6 Comments

ecbtln Over a year ago

sorry I wasn't very clear about this. I mean that the number of li elements does not necessarily have to correspond with the length of the classNames array. There may be 1 or potentially 20 li elements. The thing that identifies which index of the classNames array the given li element is interested in is referenced by the periodindex= aspect of the li tag. I've updated the question to show a sample list.

Rory McCrossan Over a year ago

No problem, I've amended my answer.

ecbtln Over a year ago

ohhh i see. ok so each given instance of the loop may indeed hit on more than one list element. perfect. the beauty of jquery

ecbtln Over a year ago

is there anyway to localize it to just the daughter elements of a specific HTML element? let's say the list lives within a div with id=schedule.

Rory McCrossan Over a year ago

There is indeed, see amended answer again.

|

Collectives™ on Stack Overflow

Dynamically populate jQuery Mobile list view content

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related