Adding Items to the List Using JQuery Mobile in Javascript

Question

I am new to JQM as well as JavaScript. I am developing a mobile application that will contain a list that will be dynamically generated. I have picked up an example which generates normal list items as well as dynamically generated items fine. I am using the following example on this page: http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH11.php

<!DOCTYPE html> 
<html> 
<head> 
  <meta name=viewport content="user-scalable=no,width=device-width" />
  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
  <script src=jquery.js></script>
  <script src=jquery.mobile/jquery.mobile.js></script>
</head> 

<body> 

<div data-role=page id=home>
  <div data-role=header>
    <h1>Home</h1>
  </div>

  <div data-role=content>
    <ol id=list1 data-role=listview data-inset=true>
      <li data-role=list-divider>Static list</li>
      <li data-icon=delete>
        <a href=#>Element 1.1</a>
      </li>
      <li data-icon=delete>
        <a href=#>Element 1.2</a>
      </li>
      <li data-icon=delete>
        <a href=#>Element 1.3</a>
      </li>
    </ol>
  </div>
</div>

</body>
</html>

<script>

var html = "";
html += "<ol id=list2 data-role=listview data-inset=true>";
html +=   "<li data-role=list-divider>Dynamic list</li>";
html +=   "<li data-icon=delete>";
html +=      "<a href=#>Element 2.1</a>";
html +=   "</li>";
html +=   "<li data-icon=delete>";
html +=      "<a href=#>Element 2.2</a>";
html +=   "</li>";
html +=   "<li data-icon=delete>";
html +=      "<a href=#>Element 2.3</a>";
html +=   "</li>";
html += "</ol>";

$("#home div:jqmData(role=content)").append (html);

</script>

If I move the Script portion into a function, Say AddItem(){} and call that function to append the Dynamic items to the dropdown then the additional items are not properly formatted and appear as simple text.

Just to clarify, if I just modify the following row:

  <li data-icon=delete>
    <a href=# onclick="AddItem()">Element 1.1</a>
  </li>

and shift the script into following functions it will start misbehaving:

function AddItem()
{
  var html = "";
  html += "<ol id=list2 data-role=listview data-inset=true>";
  html +=   "<li data-role=list-divider>Dynamic list</li>";
  html +=   "<li data-icon=delete>";
  html +=      "<a href=#>Element 2.1</a>";
  html +=   "</li>";
  html +=   "<li data-icon=delete>";
  html +=      "<a href=#>Element 2.2</a>";
  html +=   "</li>";
  html +=   "<li data-icon=delete>";
  html +=      "<a href=#>Element 2.3</a>";
  html +=   "</li>";
  html += "</ol>";

  $("#home div:jqmData(role=content)").append (html);
}

Can someone please help me out.

Thanks & Regards

AR

======EDIT========= Thanks Omar! That was really helpful.

As I intend to dynamically create a multi-level list I have changed the function as below so that it recursively calls next level menu:

function CreateMenu(x)
{
    x++;
    var html = "";
    html += "<ol id=list2 data-role=listview data-inset=true>";
    html +=   "<li data-role=list-divider>Dynamic list</li>";
    html +=   "<li data-icon=arrow-r>";
    html +=      '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.1</a>';
    html +=   "</li>";
    html +=   "<li data-icon=arrow-r>";
    html +=      '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.2</a>';
    html +=   "</li>";
    html +=   "<li data-icon=arrow-r>";
    html +=      '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.3</a>';
    html +=   "</li>";
    html += "</ol>";

    $("[data-role=content]").empty();
    $("[data-role=content]").append(html);
    $("#list2").listview();
    return;
}

Although it's working but is that how I should be doing? Or am I missing any of the normal conventions?

Also if you could please guide me to an easy to understand resource to learn JQuery Selectors and other stuff like this refresh() which a entry level person would require.

Thanks & Regards

Anjum

JQM processes the DOM ready calls differently to jQuery - you need to bind to other events such as pageinit - see here: api.jquerymobile.com/pageinit — scrowler
– scrowler, Commented Dec 14, 2013 at 22:34

Omar · Accepted Answer · 2013-12-14 22:50:01Z

2

After appending the items dynamically to active page, you need to enhance (style) elements manually by calling widget's name .listview().

$("[data-role=content]").append(html);
$("#list2").listview();

When you add li elements to an existing listview, you need to refresh the widget.

$("#list2").append("<li>foo</li>").listview("refresh");

Demo

answered Dec 14, 2013 at 22:50

Omar

31.7k9 gold badges73 silver badges117 bronze badges

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

Collectives™ on Stack Overflow

Adding Items to the List Using JQuery Mobile in Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related