Refresh a section after adding HTML dynamically to jquery mobile

Question 1

Refresh a section after adding HTML dynamically to jquery mobile

javascript jquery jquery-mobile

dochead · Apr 6, 2011 · Viewed 89.1k times · Source

Answer

Answer

update

As of jquery mobile beta2 you trigger an event - .trigger('create')

FAQ updated: http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html

This is deprecated:

use .page() function.

I suggest:

empty the div you populate
create a new div inside
populate the new div
call .page() on that new div

Question 2

Possible Duplicate:
Dynamically adding collapsible elements

I've seen a few posts on this but none of them really seem to apply, or I could just be reading it wrong. I've got some HTML that's fed to me from a server that I can't really get changed. What I want to do is, grab that HTML, insert it into a div element & have jQuery mobile do it's styling thing on it. I potentially need to do that multiple times, and that's where the pain happens.

When I insert it the 1st time, it's all fine, jqm picks up the addition & styles it perfectly. If I try a 2nd time, jqm doesn't pick it up at all. I've tried making a 'template' that I copy and modify or just inserting static html & neither work.

I've got a test case below, as you'll see, click add new list once, and it's fine, click it again & you get an unstyled select. I've read somewhere that using the live event may work, but that doesn't work in this case either.

Also, I know about the select list selectmenu method in jQuery mobile, but the item I get back could be single/multiple select lists, a bunch of radio buttons or even a set of free text fields. As you can see, I've also tried running the page method on the topmost element, I've also tried running page on the element I'm about to add, all to no avail. :(

Test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
    <title>List insert test</title> 
    <meta http-equiv="Pragma" content="no-cache" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <!-- include jQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
    <!-- include jQuery Mobile Framework -->
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.css" />
</head> 
<body>
    <div data-role="page" data-theme="b" id="Dashboard">

        <button id='addlist'>add new list</button>
        <button id='addips'>add templated list</button>
        <button id='clearall'>clear</button>
        <div id='theplace'></div>
        <div id='newtemp'>
            <select id='thelisttemplate'>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <div id="thelist">
            jkghjkgh
        </div>
    </div>
</body>

<script type="text/javascript">
    $('#addips').live('click', (function() {
        l = $('#thelisttemplate').clone()
        $('#thelist').html('')
        $('#thelist').append($(l))
        $('#thelist').page()

    }))

    $('#addlist').click(function() {
        l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
        $('#thelist').html('')
        $('#thelist').append($(l))
        $('#thelist').page()

        //$('#theplace').after($("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>"))
        //$('#thelisttemplate').page()
    })

    $('#clearall').click(function() {
        $('#thelist').html('')
    })
</script>

</html>

Update: Using naugur's answer below, the add new list function would look like...

    $('#addlist').click(function() {
        l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
        $('#thelist').html('<div data-role="collapsible-set" id="newstuff"></div>');
        $("#newstuff").html(l).page();            
    })

Update #2: Apparently this is now deprecated, see below for some ideas on how to fix in beta2.

Refresh a section after adding HTML dynamically to jquery mobile

Answer

Related questions