dynamically adding list item to j-Query Mobile List View

Question

I am trying to populate a list view using j query mobile

My html code is

<!DOCTYPE html>

<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Demo Page</title>

<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>

function onDeviceReady() {}
document.addEventListener("deviceready", onDeviceReady, false);

function Button_onclick() {

for(i=0; i < 3; i++){
        $("#numbers").append('<li>' +i+'</li>' );
}

}

<div >
    <input id="Click_Button" type="button" value="Submit" onclick="Button_onclick()" />
</div>

<div id="divList" data-role="content">
    <ul id="numbers" data-role="listview" data-inset="true"> </ul>
</div>

Expected Result was like this

Result i Expected

But the result i got was like this

Result Obtained

Can any one tell me what is the problem?

Sonaryr · Accepted Answer · 2012-10-31 08:52:49Z

1

Because you dynamically alter the listview you need to refresh it for JQM to apply the correct styles. You need to do this everytime you add an item (or items) to a list.

This can be achieved with the following statement:

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

if you want to read more about this I want to refer you to the JQM doc: http://jquerymobile.com/test/docs/lists/docs-lists.html (Updating lists, at the bottom of the page)

answered Oct 31, 2012 at 8:52

Sonaryr

1,1222 gold badges10 silver badges24 bronze badges

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

1 Comment

Sonaryr Over a year ago

please mark it as the response then so this question can be closed.

Milind Anantwar · Accepted Answer · 2012-10-31 08:45:44Z

0

append this onbuttonclick.

$("#numbers").append('<li style="list-style-position:inside;border: 1px solid black;">'+i+'</li>' );

li style="list-style will keep li text inside and border will create box around li

and use this for first and last li item.

//for first child
li:last-child{
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
//for last child
li:first-child{
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

edited Oct 31, 2012 at 8:45

answered Oct 31, 2012 at 8:21

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

1 Comment

edwin Over a year ago

i tried your sugession .actually that not the result that i wanted anyway thanks for your effort and concern

Collectives™ on Stack Overflow

dynamically adding list item to j-Query Mobile List View

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related