Dynamically added checkbox inside jQuerymobile list view is not rendering properly

Question

Dynamically added checkbox inside jQuerymobile list view is not rendering properly.

Find below the unorder list. I have added a sample listitem in the HTML itself.

<ul data-role="listview" id="ul_address_list" >
  <li data-icon="false"><a href="#" class="add-container">
    <label class="add-container" data-corners="false">
      <input type="checkbox" value="true" />
      <label class="lbl_add-container">
        <h3>Header</h3>
        <p>Content</p>
      </label>
    </label>
  </li>
</ul>

Below is the output for the above code. Which is rendering correct.

The correct display

Now I am trying to add the list item dynamically using append function using jQuery.

$.each(obj_address_list, function (ctr, obj) {
    $('#ul_address_list').append('<li data-icon="false">' +
        '<a href="#" class="add-container">' +
        '<label class="add-container" data-corners="false">' +
        '<input type="checkbox" value="true" />' +
        '<label class="lbl_add-container">' +
        '<h3>Header</h3>' +
        '<p>content</p></div>' +
        '</label>' +
        '</label>' +
        '</a>' +
        '</li>');
});
$('#ul_address_list').listview('refresh');

below is the output for the above code. Not displayed correctly.

Not displayed correctly

Why the listitem added dynamically is not rendering properly?

Omar · Accepted Answer · 2013-12-01 00:02:43Z

2

Just add

$("[type=checkbox]").checkboxradio();

before

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

Or, call .trigger("create");

$('#ul_address_list').listview('refresh').trigger("create");

Demo

answered Dec 1, 2013 at 0:02

Omar

31.7k9 gold badges73 silver badges117 bronze badges

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

1 Comment

Malaiselvan Over a year ago

both of your suggestions are working fine. Thanks a lot. I put the code like this $("input[name=chk_address]").checkboxradio(); and this also works fine.

Alessandro Incarnati · Accepted Answer · 2013-12-01 00:19:37Z

2

You need to call the listview refresh inside your append function and add .trigger("create");.

$('#ul_address_list').append('<li data-icon="false">' +
  '<a href="#" class="add-container">' +
    '<label class="add-container" data-corners="false">' +
      '<input type="checkbox" value="true" />' +
      '<label class="lbl_add-container">' +
        '<h3>Header</h3>' +
        '<p>content</p></div>' +
      '</label>' +
    '</label>' +
  '</a>' +
'</li>').listview("refresh");

Check this fiddle: http://jsfiddle.net/eRsMV/5

edited Dec 1, 2013 at 0:19

answered Dec 1, 2013 at 0:06

Alessandro Incarnati

7,2623 gold badges41 silver badges57 bronze badges

2 Comments

Alessandro Incarnati Over a year ago

If you see my example, it shows that adding the same thing you added in your answer, it's appending the new list element with the same css properties applied.

Alessandro Incarnati Over a year ago

Simply that i forgot to add it on my answer. It's .trigger("create"); that was missing. jsfiddle.net/eRsMV/5

ProllyGeek · Accepted Answer · 2013-12-01 00:18:37Z

0

you have extra

});

just use

$('#ul_address_list').append('<li data-icon="false">' +
  '<a href="#" class="add-container">' +
    '<label class="add-container" data-corners="false">' +
      '<input type="checkbox" value="true" />' +
      '<label class="lbl_add-container">' +
        '<h3>Header</h3>' +
        '<p>content</p></div>' +
      '</label>' +
    '</label>' +
  '</a>' +
'</li>');

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

my advice is to use some editor like dreamweaver just to save your time.

http://jsfiddle.net/prollygeek/xqwqM/1/

edited Dec 1, 2013 at 0:18

answered Nov 30, 2013 at 23:59

ProllyGeek

15.9k9 gold badges56 silver badges77 bronze badges

4 Comments

Malaiselvan Over a year ago

@prollyGeed - Sorry that is a copy paste error. I updated the question.

ProllyGeek Over a year ago

$('#ul_address_list').listview('refresh').trigger("create"); this is the correct answer , given by Omar

Malaiselvan Over a year ago

obj_address_list is a object list which will keep the for each loop to run for n times. I haven't copied the entire code. After adding $("[type=checkbox]").checkboxradio(); it works fine. Tks

ProllyGeek Over a year ago

ok and your code work properely by the way , check jsfiddle.net/prollygeek/xqwqM/1 just as you said it needed to trigger checkbox once again.

Collectives™ on Stack Overflow

Dynamically added checkbox inside jQuerymobile list view is not rendering properly

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related