Adding elements to Listview in jqueryMobile

Question

I have a listview. I need to add and remove from the list. On adding to the list, the jquery mobile styling does not get added to the new content.

<ul data-role="listview" id="contributionList">
   <li id="l1"><a>5.00</a><a data-icon="delete" data-role="button" id="1"></a></li>
   <li><a>10.00</a><a data-icon="delete" data-role="button"></a></li>
   <li><a>15.00</a><a data-icon="delete" data-role="button"></a></li>
   <li><a>20.00</a><a data-icon="delete" data-role="button"></a></li>
   <li><a>25.00</a><a data-icon="delete" data-role="button"></a></li>
   <li><a>50.00</a><a data-icon="delete" data-role="button"></a></li>
   <li><a>100.00</a><a data-icon="delete" data-role="button"></a></li> 
</ul>

I have a fieldset to add amounts to the list.

<fieldset class="ui-grid-a">
   <div class="ui-block-a">
      <input type="text" placeholder="Add new Amount" id="contributionAmount" />
   </div>
   <div class="ui-block-b">
     <input type="button" value="Add" id="addContribution"/>
   </div>
</fieldset>

I am using the append function to end other amounts that are added to the list. The amount gets added, but the styling (i.e. jquery mobile) classes do not get applied to the new added amount. Can someone tell me on how to overcome the problem.

Phill Pafford · Accepted Answer · 2011-12-15 21:22:54Z

12

Got it working:

http://jsfiddle.net/NXrRp/10/

JS

$('.deleteMe').live('click', function(){
    $(this).parent().remove();
    $('#contributionList').listview('refresh');
});

$('#addContribution').click(function() {
    var newAmount = $('#contributionAmount').val();

    if(newAmount != '') {
        $('#contributionList').append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>').listview('refresh');
        $('#contributionAmount').val('');
    } else {
        alert('Nothing to add');   
    }
});

HTML

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" id="contributionList" data-split-icon="delete" data-split-theme="d">
           <li id="l1"><a>5.00</a><a id="1" class="deleteMe"></a></li>
           <li><a>10.00</a><a class="deleteMe"></a></li>
           <li><a>15.00</a><a class="deleteMe"></a></li>
           <li><a>20.00</a><a class="deleteMe"></a></li>
           <li><a>25.00</a><a class="deleteMe"></a></li>
           <li><a>50.00</a><a class="deleteMe"></a></li>
           <li><a>100.00</a><a class="deleteMe"></a></li> 
        </ul>
        <br />
        <fieldset class="ui-grid-a">
           <div class="ui-block-a">
              <input type="text" placeholder="Add new Amount" id="contributionAmount" />
           </div>
           <div class="ui-block-b">
             <input type="button" value="Add" id="addContribution"/>
           </div>
        </fieldset>

    </div>
</div>

answered Dec 15, 2011 at 21:22

Phill Pafford

85.6k92 gold badges268 silver badges385 bronze badges

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

3 Comments

Hozefa Over a year ago

Thanks. This solves the issue I was trying to figure out for almost 3hrs.

Hozefa Over a year ago

Why does the $(document).ready function get called twice. While adding the amount, they get added twice.

Phill Pafford Over a year ago

@Hozefa you should not be using $(document).ready with jQM, Search for related questions

Jasper · Accepted Answer · 2011-12-15 21:31:24Z

4

You have to refresh the listview for jQuery Mobile to add the correct classes to the correct elements in your listview:

$('#addContribution').on('click', function () {
    var amount_val = $('#contributionAmount').val();
    if (amount_val != '') {
        $('#the-listview').append('<li>' + amount_val + '</li>').listview('refresh');
    }
});

Here is a demo: http://jsfiddle.net/PQ39n/1/

Docs for jQuery Mobile listviews: http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html

EDIT

Phill Pafford brings-up a good point that .on() is new in jQuery 1.7 and the jQuery Mobile team suggest using jQuery 1.6.4 with jQuery Mobile 1.0. In this case .on() is the same as using .bind() so they can be interchanged without issue.

edited Dec 15, 2011 at 21:31

answered Dec 15, 2011 at 19:53

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

8 Comments

Phill Pafford Over a year ago

@Jasper FYI the .on() is not available in jQuery 1.6.4 which is the supported version of jQm 1.0 Otherwise +1

Jasper Over a year ago

@PhillPafford Yeah I used 1.6.4 for a while but then got interested in what would break if I moved to 1.7 and the only thing I've noticed is slightly faster event handling (I have yet to see anything break).

Hozefa Over a year ago

@Jasper: Why does the $(document).ready function get called twice. While adding the amount, they get added twice.

Jasper Over a year ago

@Hozefa I don't understand your question. document.ready firing twice wouldn't have anything to do with the click event code.

Hozefa Over a year ago

@Jasper I am using the .click() event. So, the amount gets added twice, on a single click. So, what I meant is that why is the event getting fired twice.

|

Collectives™ on Stack Overflow

Adding elements to Listview in jqueryMobile

2 Answers 2

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related