Databases
StackOverflow2013
Postsdbo
POJquery Mobile collapsible fails after empty()?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery Mobile collapsible fails after empty()?
    text
    copied!<p>I have a collapsible generated dynamically, but after an calling <code>.empty()</code> and generate another collapsible dynamically it won't be visible as a collapsible. All I want is that the collapsible generates correctly after the <code>.empty()</code> event.</p> <p><strong>Making the collapsible dynamically for the first time:</strong></p> <p><img src="https://i.stack.imgur.com/49ysb.png" alt="Making the collapsible dynamically for the first time:"></p> <p><strong>After</strong> <code>.empty()</code> <strong>and making the collapsible dynamically for the nth time:</strong> <img src="https://i.stack.imgur.com/mQpMu.png" alt="enter image description here"></p> <p>Some of the JS of how I create the collapsible and then append the buttons:</p> <pre><code>function createButton(buttonText,hrefLink,onclk,id) { console.log('=&gt;'+onclk); var button = '&lt;a href="'+hrefLink+'" onClick="'+onclk+'" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" data-role="button" data-theme="c"' + '' + 'id="' + id + '"' + '&gt;' + '&lt;span class="ui-btn-inner ui-btn-corner-all"&gt;' + '&lt;span class="ui-btn-text"&gt;' + buttonText + '&lt;/span&gt;' + '&lt;/span&gt;' + '&lt;/a&gt;'; return button; } function createCollapsible(collapsibleText,id){ var collapsible = "&lt;div data-role='collapsible' data-theme='a' id='set" + id + "'&gt;&lt;h3&gt;" + collapsibleText + "&lt;/h3&gt;&lt;/div&gt;"; return collapsible; } function createCurrentSets(station,set,container){ $('#sampleSets').empty(); $('#addSampleSet').hide(); if(set === 'SNGL'){ save_data('singleMultiContainer','single'); save_data('set',set); $('#sampleSets').append(createCollapsible('Single',set)); for(i=0;i&lt;ls.length;i++){ if(ls.key(i).match(stationSetContainerRegex)){ var query = ls.key(i); var data = query.split('&amp;'); if(data[0]===station &amp;&amp; data[1] === set){ $('#set'+set).append(createButton(data[2],'#sampleParametersPage',"getJsonFromLocalStorage('"+station+'&amp;'+set+'&amp;'+data[2]+"');",data[2])).trigger('create');//createButton(set,'#setProperties',"changeSet(this.id)",set)); console.log('Current Sample created'); } } } }else if ( set!== 'SNGL'){ $('#sampleSets').append(createCollapsible('Set ' + set, set)); for(i=0;i&lt;ls.length;i++){ if(ls.key(i).match(stationSetContainerRegex)){ var query = ls.key(i); var data = query.split('&amp;'); if(data[0]===station &amp;&amp; data[1] === set){ $('#set'+set).append(createButton(data[2],'#sampleParametersPage',"getJsonFromLocalStorage('"+station+'&amp;'+set+'&amp;'+data[2]+"')",data[2])).trigger('create');//createButton(set,'#setProperties',"changeSet(this.id)",set)); } } } } } </code></pre> <p>The HTML in witch it is appended:</p> <pre><code>&lt;div data-role="page" id="HomePage" &gt; &lt;div data-role="header" data-position="fixed" &gt; &lt;h3 id='HomePageHeader'&gt;&lt;/h3&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;div data-collapsed="false" data-content-theme="c" data-iconpos="right" data-role="collapsible" data-theme="a" data-collapsed-icon="plus" data-expanded-icon="minus" &gt; &lt;h1&gt;Shipments Manager&lt;/h1&gt; &lt;div data-role="listview"&gt; &lt;li&gt;&lt;a href="#newSample" data-transition="slide"&gt;Add sets or groups&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#currentSamplePage" id='currentButton' data-transition="slide"&gt;Current&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" data-transition="slide"&gt;History&lt;/a&gt; &lt;/li&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="collapsible" data-collapsed="true" data-content-theme="c"data-collapsed-icon="plus" data-theme="a" data-expanded-icon="minus" data-iconpos="right"&gt; &lt;h1&gt;Manage Images&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="collapsible" data-collapsed="true" data-content-theme="c"data-collapsed-icon="plus" data-theme="a" data-expanded-icon="minus" data-iconpos="right"&gt; &lt;h1&gt;Tutorials&lt;/h1&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="footer" data-position="fixed"&gt; &lt;div class="ui-grid-b"&gt; &lt;div class="ui-block-a"&gt;&lt;a href="#" data-icon="arrow-l" data-iconpos="left" data-role="button" data-rel="back" data-direction="reverse"&gt;Back&lt;/a&gt;&lt;/div&gt; &lt;div class="ui-block-b"&gt;&lt;a href="#" data-icon="bars" data-role="button"&gt;Menu&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="page" id="currentSamplePage" &gt; &lt;div data-role="header" data-position="fixed"&gt; &lt;h3&gt;Current Samples&lt;/h3&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;div id='currentSamples'&gt;&lt;/div&gt; &lt;/div&gt; &lt;div data-role="footer" data-position="fixed"&gt; &lt;div class="ui-grid-b"&gt; &lt;div class="ui-block-a"&gt;&lt;a href="#" data-icon="arrow-l" data-iconpos="left" data-role="button" data-rel="back" data-direction="reverse"&gt;Back&lt;/a&gt;&lt;/div&gt; &lt;div class="ui-block-b"&gt;&lt;a href="#" data-icon="bars" data-role="button"&gt;Menu&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="page" id="multiSet" &gt; &lt;div data-role="header" data-position="fixed"&gt; &lt;h3&gt;Select a sample set&lt;/h3&gt; &lt;/div&gt; &lt;div data-role="content" &gt; &lt;div id="sampleSets"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="footer" data-position="fixed"&gt; &lt;div class="ui-grid-b"&gt; &lt;div class="ui-block-a"&gt;&lt;a href="#" data-icon="arrow-l" data-iconpos="left" data-role="button" data-rel="back" data-direction="reverse"&gt;Back&lt;/a&gt;&lt;/div&gt; &lt;div class="ui-block-b"&gt;&lt;a href="#" data-icon="bars" data-role="button"&gt;Menu&lt;/a&gt;&lt;/div&gt; &lt;div class="ui-block-c"&gt;&lt;button data-icon="plus" data-iconpos="right" id="addSampleSet" data-theme="a"&gt;Add Sample&lt;/button&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload