Databases
StackOverflow2013
Postsdbo
POJquery UI Accordion won't collapse when created dynamically with web database
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery UI Accordion won't collapse when created dynamically with web database
    primarykey
    data
    text
    <p>This accordion works fine when it's on the page by itself, but when I dynamically populate the individual title/content pairs via a web database, the title and content are uncollapsed. Is there a problem with the way I implemented it? </p> <p>The rest of the database (inserting dictionary term and definition in 2 different fields) is functioning flawlessly without the accordion function. Understandablhy, I want to integrate the accordion so there's less scrolling for the user. </p> <p>Here is the code implemented, then the code (commented out) straight from the source for comparison:</p> <pre><code>function showRecords() { var results = ''; results.innerHTML = ''; db.transaction(function(tx) { tx.executeSql(selectAllStatement, [], function(tx, result) { dataset = result.rows; for (var i = 0, item = null; i &lt; dataset.length; i++) { item = dataset.item(i); results.innerHTML = '&lt;div id="accordion"&gt;'; results.innerhtml += '&lt;h3&gt;' + item['term'] + '&lt;/h3&gt;&lt;div&gt;&lt;p&gt;' + item['definition'] + '&lt;button class="glossaryButton2" onClick="loadRecord('+i+')"&gt;Edit&lt;/button&gt; &lt;button class="glossaryButtonDel" style="float:right;" onClick="deleteRecord(' + item['id'] + ')"&gt;Delete&lt;/button&gt;&lt;/p&gt;&lt;hr&gt;&lt;/div&gt;'; } }); }); results.innerHTML += '&lt;/div&gt;'; // TRIED: $('#accordion').html(results).accordion({collapsible: true}); // TRIED: $("#accordion").accordion({collapsible: true}); // getter var collapsible = $( "#accordion" ).accordion( "option", "collapsible" ); // setter $( "#accordion" ).accordion( "option", "collapsible", true ); exportRecords(); } </code></pre> <p>(Explanation of $('#accordion').html(results).accordion({collapsible: true}); : "The accordion call only works on matching elements in the DOM at the point it is called. Since you are adding the accordion dynamically, there is nothing to match. You need to re-apply the accordion after loading the new content." I think this is the point at which I'm clueless. )</p> <pre><code>/* The HTML of original accordion: &lt;div id="accordion"&gt; &lt;h3&gt;Section 1&lt;/h3&gt; &lt;div&gt; &lt;p&gt;Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; */ </code></pre> <p>This above problem is not unique to Jquery UI. I've had exactly the same problem with 4-5 other Javascript accordions - I keep trying! I always try the accordion by itself; if it works, then I integrate it with the database + innerHTML -- and find it quits collapsing.</p> <p>(FYI: This code is sharing space with Zurb Foundation 3, and uses the Jquery that came with it. It works fine with the above HTML accordion version when used apart from the database, so that can't be the issue.)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USSteve
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POJquery UI Accordion won't collapse when created dynamically with web database
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHard to parse that line in my head, but are you missing a closing </div>?
      singulars
      1. POJquery UI Accordion won't collapse when created dynamically with web database
      1. USTrey Mack
    2. COtmack: no, it's right above the // TRIED statements.
      singulars
      1. POJquery UI Accordion won't collapse when created dynamically with web database
      1. USSteve
    3. COAny errors in the JS console?
      singulars
      1. POJquery UI Accordion won't collapse when created dynamically with web database
      1. USTrey Mack
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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