JQuery Mobile add <div> using .append

Question

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();

Are you getting an error? What isn't working? jsfiddle.net/wtTn6 — Jasper
– Jasper, Commented Sep 27, 2013 at 19:58
like your example I'm getting the standard <li> tag not the JQMobile formatted look? — BarclayVision
– BarclayVision, Commented Sep 27, 2013 at 20:06
After you append the items, call $('id').listview(); or .listview().listview('refresh'); — Omar
– Omar, Commented Sep 27, 2013 at 20:27

Jasper · Accepted Answer · 2013-09-27 20:08:39Z

1

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/

edited Sep 27, 2013 at 20:08

answered Sep 27, 2013 at 20:03

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

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

3 Comments

BarclayVision Over a year ago

Thanks for the example, I'm trying your example but still no luck... Looks like I need to read up on initializing to see where I'm going wrong. Your example is exactly what I'm looking for, just not working for me...

Jasper Over a year ago

@BarclayVision No code was included in your comment, I recommend setting-up a JSFiddle of your code, it's a lot easier to digest. My guess is that this is a timing issue for you.

BarclayVision Over a year ago

can't reproduce on JSFiddle, using cross domain ajax that works on safari browser - added update above...

Collectives™ on Stack Overflow

JQuery Mobile add <div> using .append

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related