title: create dynamic collapsible set after ajax call
body: <p>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.</p>
  
  <p>all happens after an ajax call to an aspx webmethod which returns some values I would like to put in the set.</p>
  
  <p><strong>the html head:</strong> </p>
  
  <pre><code>&lt;head&gt; 
      &lt;title&gt;My Page&lt;/title&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
      &lt;link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" /&gt; 
      &lt;script src="js/jquery-1.8.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href="css/TableCSSCode.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script&gt;
  
          $(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('&lt;div id="colapse_div" data-role="collapsible-set"&gt;&lt;/div&gt;');
  
                      $("#colapse_div").append('&lt;div id="col1" data-role="collapsible"&gt;&lt;/div&gt;');
  
                      $("#col1").append('&lt;h3&gt;צלמים&lt;/h3&gt;');
                      $("#col1").append('&lt;p&gt;'+parsedData[0].fName+'&lt;//p&gt;');
                      $("#col1").append('&lt;p&gt;'+parsedData[0].lName+'&lt;//p&gt;');
  
  
  
  
  
                  },
                  error: function (res, msg, code) {
                      // log the error to the console
                      alert("The following error occured: " + msg + " " + code);
                  } //error
  
              });
  
          });
  
  
  
  
      &lt;/script&gt;
  
  
  &lt;/head&gt;
  </code></pre>
  
  <p><strong>the html body:</strong> </p>
  
  <pre><code>&lt;body&gt;
  
  
      &lt;div id="page3" data-role="page" data-theme="a"&gt;
  
              &lt;div data-role="header" data-theme="a"&gt;
                  &lt;h1&gt; בדיקה&lt;/h1&gt;
              &lt;/div&gt; 
  
              &lt;div data-role="navbar"&gt;
                  &lt;ul&gt;
                     &lt;li&gt;&lt;a href="index.htm"&gt;חברי העמותה&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="build.htm"&gt;בניית צוות&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="test.htm"&gt; בדיקה&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div data-role="content"&gt;
              &lt;div id="tableDiv"&gt;
  
                 &lt;/div&gt;
  
                 &lt;div&gt;
                      &lt;div data-role="collapsible-set"&gt;
  
                          &lt;div data-role="collapsible" &gt;
                          &lt;h3&gt;Section 1&lt;/h3&gt;
                          &lt;p&gt;I'm the collapsible set content for section 1.&lt;/p&gt;
                          &lt;p&gt;I'm the collapsible set content for section 1.&lt;/p&gt;
                          &lt;/div&gt;
  
  
  
                      &lt;/div&gt;
                 &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div data-role="footer"&gt;
                  &lt;h1&gt;footer area&lt;/h1&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>