0

jquery モバイルで動的な折りたたみ可能なセットを構築しようとしています。以下のコードは、2 つの段落要素を持つ通常の div を作成するだけです。

すべては、セットに入れたい値を返す aspx webmethod への ajax 呼び出しの後に発生します。

html ヘッド: 

<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>

html 本文: 

<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>
4

1 に答える 1