Dynamically adding
to
in jquery mobile

Question

I'm trying to add list items to unordered lists in jquery mobile, but the formatting doesn't seem to be created properly.

<ul data-role="listview" data-theme="c" data-dividertheme="b">
                    <li data-role="list-divider">
                        Title Divider
                    </li>
                    <li>
                        <a href="test.html" data-transition="slide">List item 1</a>
                    </li>

 </ul>

Script:

$('ul').append('<li><a>hello</a></li>');

For some reason the li generated dynamically doesn't display the same way as the one that's statically created. Does anyone know why and how I can make it the same?

thecodeparadox · Accepted Answer · 2012-11-07T05:31:14.217

87

Try this:

$('ul').append($('<li/>', {    //here appending `<li>`
    'data-role': "list-divider"
}).append($('<a/>', {    //here appending `<a>` into `<li>`
    'href': 'test.html',
    'data-transition': 'slide',
    'text': 'hello'
})));

$('ul').listview('refresh');

edited Nov 07 '12 at 05:31

answered May 08 '11 at 07:10

thecodeparadox

86,271
21
138
164

@cfarm54 Please check this out, I think it may work.If not please comment me. – thecodeparadox May 08 '11 at 07:11
no doesn't work. i dont think you can just append it in the jquery-mobile framework. have you tried using the libraries? jquerymobile.com – locoboy May 08 '11 at 19:30
4

@cfarm54 after appending `
` you need to call `$('ul').listview('refresh')` for refreshing. Try this, if not please comment me.

thecodeparadox

May 09 '11 at 03:11

This code is slow, complicated AND the answer doesn't contain a solution - the comment does. – naugtur May 09 '11 at 11:06

@naugtur Hi friend, showing due respect on your comment i want to comment you that i give the solution first and it woked for cfarm54 though it finalize by comment. so why you down vote me? – thecodeparadox May 09 '11 at 11:31

Just to force you to update the answer. Downvote cancelled. :) All other is valid - the way you create elements is unreadable for beginners and slower than pushing a html string. Your way of adding elements is useful when more advanced methods are applied to elements - like event binding – naugtur May 09 '11 at 11:35

@naugtur thanks for you contructive comment.As a new user it may be fault by me and this type of advises and comments are valuable for me. Thanks again. – thecodeparadox May 09 '11 at 11:38

@abdullah.abcoder I'm glad you look at it that way. +1 for attitude! Good luck. – naugtur May 09 '11 at 12:39

This is the right answer no matter what, i've stuggleling with this issue forever and ever.... – Friis1978 May 31 '15 at 12:40

naugtur · Answer 2 · 2013-04-20T06:34:13.247

45

The answers provided turned out to be a little bit messy...

$('ul').append('<li><a>hello</a></li>'); is ok, but it needs to refresh the listview, so all you need is:

$('ul').append('<li><a>hello</a></li>').listview('refresh');

edited Apr 20 '13 at 06:34

answered May 09 '11 at 11:09

naugtur

16,827
5
70
113

29

How did I answer my own question if OP is @cfarm54 and I am @naugtur? – naugtur May 10 '11 at 11:57
7

@EJP - even if he did answer his own question, that is an encouraged practice on stackexchange and he shouldn't be chastised for it. – Charles Boyung Apr 18 '13 at 15:15
I was unaware that answering your own question was bad. In fact I think there is a badge for that. – Tony Topper Sep 13 '13 at 16:54
@AnthonyTopper Yes, Answering your own question when you find an answer yourself is encouraged. It's a way of sharing knowledge. Some people see bad intention in it because you get reputation points for both the question and the answer. Some people look at gaining rep as if it was actual money or something. Anyway, what EJP was suggesting is simply incorrect. You should never post answers to questions as comments just because you asked the question yourself. If you need more info, look through http://meta.stackexchange.com/questions/12513/should-i-not-answer-my-own-questions and links there – naugtur Sep 14 '13 at 09:06

score 2 · Answer 3 · answered Dec 29 '12 at 00:02

2

And if you want to change the attributes of UL, you might have to call .trigger('create') for the enclosing div. this ensures that UL is created again with properties reset.

answered Dec 29 '12 at 00:02

Sandeep Taneja

169
1
5

1

This is correct also, but much more general - you can refresh any section of the document with this. And there's lots of questions on SO asking about that :) – naugtur Feb 13 '13 at 18:37

score 0 · Answer 4 · edited Dec 17 '12 at 06:39

0

You will have to add a class to the list tag

$('<ul>').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('hello'))  ;

JQuery mobile automatically adds a class to the list items, which can be seen if you run your page in firefox and debug it using firebug. Select whatever class has been applied and add it to your dynamically generated li tag.

edited Dec 17 '12 at 06:39

Konrad Viltersten

36,151
76
250
438

answered Dec 17 '12 at 06:18

thebugger

25
1

7

This is not a good practice. What happen when a new version is released and add other classes? Your source will be break. The better solution is always use the api of the framework used, in this case, use jquerymobile api. – angelcervera Dec 21 '12 at 07:59

Cyber Slueth Omega · Answer 5 · 2011-05-30T05:28:28.520

0

Your <a> tag is not referencing a webpage.

try:

$('ul').append('<li><a href="test2.html' data-transition="slide" />List Item 2</li>');

edited May 30 '11 at 05:28

answered May 08 '11 at 05:43

Cyber Slueth Omega

399
1
3
19

1

+1 omiting the `href` attribute changes the style of the link. – Kyle Trauberman May 08 '11 at 05:44
1

@Cyber Sleuth Omega: Good try but this is not valid HTML. There is no opening
and no closing . @cfarm54 fix those and it should work.

user207421

May 08 '11 at 07:21

@naugtur: according to your solution answer, 'it is OK'. Make up your mind – user207421 May 09 '11 at 22:35

`.listview('refresh')` is an answer. OP already did append some html. attributes don't change anything – naugtur May 10 '11 at 11:55

Dynamically adding
to
in jquery mobile

5 Answers5

Linked

Dynamically adding to in jquery mobile

5 Answers5

Linked

Dynamically adding
to
in jquery mobile