create dynamic collapsible set after ajax call

StackOverflow https://stackoverflow.com/questions/15788538

Question

I'm trying to build a dynamic collapsible set in jquery mobile, and the code below just creates a regular div with two paragraph elements.

all happens after an ajax call to an aspx webmethod which returns some values I would like to put in the set.

the html head: 

<head> 
    <title>My Page</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" /> 
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" />

    <script>

        $(document).ready(function () {



            $.ajax({
                type: "POST",
                url: "getdata.aspx/return_prof",
                data: "{prof:'צלם'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function (res) {

                    var parsedData = JSON.parse(res.d);

                    $("#tableDiv").append('<div id="colapse_div" data-role="collapsible-set"></div>');

                    $("#colapse_div").append('<div id="col1" data-role="collapsible"></div>');

                    $("#col1").append('<h3>צלמים</h3>');
                    $("#col1").append('<p>'+parsedData[0].fName+'<//p>');
                    $("#col1").append('<p>'+parsedData[0].lName+'<//p>');





                },
                error: function (res, msg, code) {
                    // log the error to the console
                    alert("The following error occured: " + msg + " " + code);
                } //error

            });

        });




    </script>


</head>

the html body: 

<body>


    <div id="page3" data-role="page" data-theme="a">

            <div data-role="header" data-theme="a">
                <h1> בדיקה</h1>
            </div> 

            <div data-role="navbar">
                <ul>
                   <li><a href="index.htm">חברי העמותה</a></li>
                    <li><a href="build.htm">בניית צוות</a></li>
                    <li><a href="test.htm"> בדיקה</a></li>
                </ul>
            </div>

            <div data-role="content">
            <div id="tableDiv">

               </div>

               <div>
                    <div data-role="collapsible-set">

                        <div data-role="collapsible" >
                        <h3>Section 1</h3>
                        <p>I'm the collapsible set content for section 1.</p>
                        <p>I'm the collapsible set content for section 1.</p>
                        </div>



                    </div>
               </div>

            </div>

            <div data-role="footer">
                <h1>footer area</h1>
            </div>
    </div>
</body>
Was it helpful?

Solution

Try this:

$("#colapse_div").collapsible();

But it will probably fail, cause jQM has a problem while styling a dynqamically created collapsible set.

Best bet is to use good old:

$('[data-role="content]').trigger('create');

This line will restyle all new content added to the div content. You can go even further and use:

$('[data-role="content]').trigger('pagecreate');

This line will restyle all new page content, including footer and header.

Read my other article/answer to find out more about enhancing markup of dynamically added content: jQuery Mobile: Markup Enhancement of dynamically added content

Working jsFiddle example: http://jsfiddle.net/Gajotres/ck6uK/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top