Reputation: 191

jQuery Append Not Appending Any Content

I am using Jquery to append data to a div. However, nothing shows up on the page after the append statement.

I tried using $(window).load to make sure the page is loaded but this still won't work.

HTML

<ul data-role="listview" id="clubcontent" data-inset="true">

</ul>

$(document).on('pageinit', '#page-tasklist', function () {
    $('clubcontent').listview();
    getClubs();
});

function getClubs() {

    var json = jQuery.parseJSON(window.localStorage.getItem("clubs"));
    var clubcontent = $('clubcontent');

    for (var i = 0; i < json.length; i++){
        clubcontent.append('<li><a href="#" data-club-id=\"' + json[i].id + '\" rel="external">' + json[i].name + '</a></li>');
        alert(json[i].name);
    }

    clubcontent.listview( "refresh" );

};

Upvotes: 1

Answers (3)

MinerBigWhale

Reputation: 11

you may try

$('<li><a href="#" data-club-id=\"' + json[i].id + '\" rel="external">' + json[i].name + '</a></li>').appendTo($('clubcontent'));

if it doesn't work probably a Json error so check the data with your network listener

and you a have a " ; " that is too much a the end

Upvotes: 0

Theo Orphanos

Reputation: 1447

There is a couple of hashes missing in your javascript:

$(document).on('pageinit', '#page-tasklist', function () {
    $('#clubcontent').listview();
    getClubs();
});

function getClubs() {

    var json = jQuery.parseJSON(window.localStorage.getItem("clubs"));
    var clubcontent = $('#clubcontent');

    for (var i = 0; i < json.length; i++){
        clubcontent.append('<li><a href="#" data-club-id=\"' + json[i].id + '\" rel="external">' + json[i].name + '</a></li>');
        alert(json[i].name);
    }

    clubcontent.listview( "refresh" );

};

And the (extended) html:

<ul data-role="listview" id="clubcontent" data-inset="true">
    <li> a </li>
    <li> b </li>
    <li> c </li>
    <li> d </li>
    <li> e </li>
</ul>

Live example here: http://jsfiddle.net/LvUt9/