Jquery Mobile Dynamically generating list

Question

I'm using JQuery Mobile to dynamically generating a list in collapsible pages.

But if I'm setting a page before the collapsible page with item lists the CSS gets screwed up.

The code for generating the list items:

var li = domCreationService.createListItem({"data-corners":"false", "data-shadow":"false", 
    "data-iconshadow":"true", "data-wrapperels":"div", "data-icon":"arrow-r", "data-iconpos":"right", 
    "data-theme":"c", "class":"ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-li-last ui-btn-up-c"});

  var outherDiv = domCreationService.createDiv({"class": "ui-btn-inner ui-li"});
  li.appendChild(outherDiv);
  var innerDiv = domCreationService.createDiv({"class": "ui-btn-text"});
  outherDiv.appendChild(innerDiv);
  var link = domCreationService.createLinkItem({href: "#dialog.html",id: "dialog", "class": "ui-link-inherit", "data-rel": "dialog"});
  innerDiv.appendChild(link);
  link.appendChild(domCreationService.createImg({src: ("images/" + key + ".jpg"), "class": "ui-li-thumb"}));
  var obj = domCreationService.createHTag(3, {"class": "ui-li-heading"});
  obj.innerHTML = name;
  link.appendChild(obj);
  obj = domCreationService.createPTag({"class": "ui-li-desc"});
  obj.innerHTML = beskrivning;
  outherDiv.appendChild(domCreationService.createSpan({"class": "ui-icon ui-icon-arrow-r ui-icon-shadow"}));
  link.appendChild(obj);

This is how it looks when it is the first page:

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-li-last ui-btn-hover-c">
<div class="ui-btn-inner ui-li">
    <div class="ui-btn-text">
        <a href="#dialog.html" id="dialog" class="ui-link-inherit" data-rel="dialog">
            <img src="images/picture.jpg" class="ui-li-thumb">
            <h3 class="ui-li-heading">Test</h3>
            <p class="ui-li-desc">Lorem Ipsum</p>
        </a>
    </div>
    <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
</div>
</li>

But when it is not the firstpage I get this:

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-li-static ui-btn-up-c">
<div class="ui-btn-inner ui-li ui-corner-top ui-corner-bottom ui-li-static ui-btn-up-c">
    <div class="ui-btn-text">
        <a href="#dialog.html" id="dialog" class="ui-link-inherit" data-rel="dialog">
            <img src="images/picture.jpg" class="ui-li-thumb">
            <h3 class="ui-li-heading">Test</h3>
            <p class="ui-li-desc">Lorem Ipsum</p>
        </a>
    </div>
    <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
</div>
</li>

Notice the change in the second div class that gets appended.

Anyone experienced something like this before?

Gajotres · Accepted Answer · 2012-12-21 09:23:01Z

1

Where dynamically adding content to jQM listview you need to execute:

$('#listID').listview('refresh');

at the end of list generation. This method will restyle all new list elements.

answered Dec 21, 2012 at 9:23

Gajotres

57.3k16 gold badges105 silver badges132 bronze badges

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

1 Comment

Hiny Over a year ago

I've tried it, but the CSS still get the values appended to it for the class, but only if I have the startpage. Right after I've looped through the data and created/appended all the Items I run the refresh and the is no difference. The css alignment is still off.

Collectives™ on Stack Overflow

Jquery Mobile Dynamically generating list

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related