Jquerymobile ListView list item issue

Question

I am using jquery mobile to make a phonegap app.I have a problem in listview .If I have few items are already in list view and i am adding more items then the items i want to add after in list view is of different style.How can i add same style on both list items which are added before and after.Thanks.

enter image description here

<html>
<head>
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <script src="js/jquery.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    alert("hello");
    $('#employeeList').append('<li data-icon=delete >hello</li>');
    $('#employeeList').append('<li><a>hello</a></li>');
    $('#employeeList').append('<li><a>hello</a></li>');
    });
    </script>
</head>
<body>
        <div data-role=page id=home>
        <div data-role=header>
        <h1>Home</h1>
        </div>
        <div data-role=listview>
        <ul id="employeeList" class="icon-list"></ul>
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
        </div>
        <div data-role=footer data-position="fixed">
        <h1 >Thanks</h1>
        </div>
        </div>
</body>

Refresh the lisview after dynamically adding items on it. $('[data-role="listview"]').listview('refresh'); after appending new list items. — Lekhnath
– Lekhnath, Commented Sep 19, 2013 at 4:58

Manu M · Accepted Answer · 2013-09-19 05:02:27Z

2

Use this script,

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
alert("hello");
$('#employeeList').append('<li data-icon=delete >hello</li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').listview('refresh');
});
</script>

Also li should be inside ul tag

answered Sep 19, 2013 at 5:02

Manu M

1,0645 silver badges18 bronze badges

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

Comments

Shalom Aleichem · Accepted Answer · 2013-09-19 05:12:40Z

1

The reason why 'hello' items are of different style is that they are within tag.

$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').append('<li>hello</li>'); //look differently from the previous line

You should also consider having all attributes in double quotes:

<div data-role="page" id="home">
<div data-role="header">

The demo below sums all together: DEMO:JSFiddle

answered Sep 19, 2013 at 5:12

Shalom Aleichem

3,0272 gold badges25 silver badges34 bronze badges

Comments

Lekhnath · Accepted Answer · 2013-09-19 05:07:15Z

1

JS

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#employeeList').append('<li data-icon=delete >hello</li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').listview('refresh'); //You are missing this one
});
</script>

HTML

<!-- Your Markup should be something like below -->
<ul id="employeeList" data-role="listview">
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
   </ul>

answered Sep 19, 2013 at 5:07

Lekhnath

4,6456 gold badges39 silver badges66 bronze badges

Collectives™ on Stack Overflow

Jquerymobile ListView list item issue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related