CODEWITHSUNDEEP
jquery-mobile
BarclayVision
BarclayVision

Reputation: 863

JQuery Mobile add <div> using .append

I'm trying to add <div><ul><li> using the .append method. Not having any luck!

<div data-role="page" data-theme="b" id="calendar" data-add-back-btn="true">

    <div data-role="content" data-theme="b" id="myBlank">   
        <!-- CONTENT -->    
    </div>

    <div data-role="header">
        <h1>-CALENDAR-</h1>
         <a class="ui-btn-right" id="infoButton" onclick="getMyCalendar();">Refresh</a>
    </div><!-- /header -->

    <div data-role="content" data-theme="b" id="calToday">  
        <!-- CONTENT -->    
    </div>

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

Problem is in the following?

$('#calendar').append('<div data-role="content" id="month"><ul data-role="listview"><li>HI</li></ul></div>');

UPDATE: here is my code, the problem is where to init the page again since it's populating prior to page load :

    $.post(jaction, { device: "stdbrowser", action: "doLogin", j_username: xuser, j_password: xpwd, j_accessCode: xcode, j_host: jaction }, function(data) {

        var jsessionid = sessionStorage.jsid;
        var prefix = sessionStorage.jsid_prefix;
        var doAction = "https://" + prefix + ".domain.net/servlet/ServletController;jsessionid=" + jsessionid + "?action=" + action;

        $.get(doAction, function(data) {
        var iDivFormat = formatCalendar(data);

        $('#calendar').append('<div data-role="content" id="month"><ul data-role="listview"><li>HI</li></ul></div>').children().last().trigger("create");       
        $('#month').html(iDivFormat).trigger("pagecreate");;
        $('#calendar #progress').remove();

Upvotes: 0

Views: 3382

Answers (1)

Jasper
Jasper

Reputation: 76003

If you want your list to be look like a jQuery Mobile list-view, you'll need to initialize it:

$('#calendar').append('<div data-role="content" id="month"><ul data-role="listview"><li>HI</li></ul></div>').children().last().trigger("create");

This code initializes the new data-role=[content] element, which in turn initializes the list-view widget nested within.

Here's a demo: http://jsfiddle.net/wtTn6/1/

Upvotes: 1

Related Questions