Question

I’m creating a mobile app with jQuery Mobile and i’ve a little problem. I want to create a list with some content from the database wich I get from an ajax post.

The markup looks like this:

<div data-role="page">
<div data-role="header">
    <h1>Facturen</h1>
</div><!-- /header -->

<div data-role="content">   
    <ul data-role="listview" data-inset="true" id="Invoices">
        <div id="invoiceList"></div>
    </ul>
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->

This is the jQuery:

$.ajax({
        type: "POST",
        url: "invoices/index.php",
        data: '',
        complete: function(data)
        {
            $('#invoiceList').html(data.responseText);
        }
    });

Well, I put the results of the query between

but in some way the css doesnt work of the list doesnt work.

if I trie this it worked fine:

<ul data-role="listview" data-inset="true" id="Invoices">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>

Somebody knows how to fix this?

Thanks in advance!

Answer 1

In jQuery Mobile, whenever you update elements there is usually a follow-up step where you trigger an action upon it. For example, when you add new things into an unsorted list, you need to call

$('#invoiceList').listview('refresh');

This would go immediately after adding these elements into your UL inside the complete: callback.

There are various other things you could try as well if this doesn’t generate the behavior you’re looking for. For example, you might need to execute the .append() operation instead of using .html(). I’ve seen that sort of usage more frequently in these sorts of circumstances.