CODEWITHSUNDEEP
jquerylistviewjquery-mobilecordova
Sishu
Sishu

Reputation: 1558

Jquerymobile ListView list item issue

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>

Upvotes: 0

Views: 1144

Answers (3)

Shalom Aleichem
Shalom Aleichem

Reputation: 3027

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

Upvotes: 1

Lekhnath
Lekhnath

Reputation: 4635

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>

Upvotes: 1

Manu M
Manu M

Reputation: 1064

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

Upvotes: 2

Related Questions