the link won't display properly on jquery mobile after append

Question

I am trying to output the link in list "li" from json data and pass it to jquery mobile elements. But the link on "li" seem output like regular link (link with blue color instead of properly listview jquery mobile) after I append with jquery, and did not show attribute css for jquery mobile.

Don't know if I explain it correctly, but what am I doing wrong here??

<?php include "_header.php" ?>
<div data-role="header" data-theme="c">
    <div align="center">
                //some code
    </div>
</div><!-- /header -->
<div data-role="content">   
    <div align="center"><img src="imgs/charmchasers-m.png" alt="Charmchasers logo" width="250px" ></div>    

    <div class="content-primary">
        <ul data-role="listview" data-inset="true" data-theme="e">
            <li>
                <h3>North America</h3>
                <p>H-D Dealer Charms - USA &amp; Canada.</p>
                <ul data-role="listview" data-filter="true" data-theme="c" data-inset="true" id="state-list">
                </ul>
            </li>
            <li>
                <a href="display.php?state=international" data-transition="slide">
                    <h3>International</h3>
                    <p>H-D Dealer Charms - Asia &amp; Europe.</p>
                </a>
            </li>
            <li>
                //some code
            </li>
            <li>
                //some code
            </li>
        </ul>
    </div>
</div><!-- /content -->
<div data-role="navbar" data-iconpos="bottom">
    <ul>
        <li><a href="display.php?state=new" data-role="button" data-icon="star" data-theme="a" data-transition="slide">New Charms</a></li>
        <li>//some code</li>
    </ul>
</div><!-- /navbar -->
<script>
(function() {
    var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';

    $.getJSON(json_url, function(data){
        $.each(data, function(i, item) {
            $('#state-list').append('<li><a href="display.php?state=' + item.d_state  + '" data-transition="slide">' + see_abbrv(item.d_state) + '</a></li>');
        });
    });
}) ();
</script>

Any idea??

Answer 1

Every time new content is added jQuery Mobile needs to be forced to enhance page markup. It can be done in numerous ways, and if you want to find out more take a look at this ARTICLE, to be more transparent it is my personal blog. Or take a look HERE.

This function should be used:

$('#state-list').listview('refresh'); 

And code needs to be changed like this:

(function() {
    var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';

    $.getJSON(json_url, function(data){
        $.each(data, function(i, item) {
            $('#state-list').append('<li><a href="display.php?state=' + item.d_state  + '" data-transition="slide">' + see_abbrv(item.d_state) + '</a></li>');
        });
       $('#state-list').listview('refresh'); 
    });
}) ();

One more thing to remember, this line must be used inside a $.getJSON but after $.each loop finishes with content appending. In the end one last thing to remember, if possible classic jQuery DOM ready functions should not be used with jQuery Mobile, page events should be used instead, find more about it HERE.

Answer 2

"if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup." - http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

So after appending the new list items you have to trigger the create event to build the listview. try:

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

or

$('ul').trigger('create');

EDIT:

try this inside the $.each() loop:

$('#state-list').append('<li><a href="display.php?state=' + item.d_state  + '" data-transition="slide">' + see_abbrv(item.d_state) + '</a></li>').listview('refresh');

I just added .listview('refresh'); at the end of each append. If the list view is already initialized it should work.