CODEWITHSUNDEEP
jqueryhtmllistviewjquery-mobile
edwin
edwin

Reputation: 8081

dynamically adding list item to j-Query Mobile List View

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?

Upvotes: 2

Views: 962

Answers (2)

Sonaryr
Sonaryr

Reputation: 1122

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)

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

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;
}

Upvotes: 0

Related Questions