Databases
StackOverflow2013
Postsdbo
POHow would I use a function to programmatically control which jquery-ui "accordion" panel should open?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow would I use a function to programmatically control which jquery-ui "accordion" panel should open?
    text
    copied!<h1>QUESTION:</h1> <p>How would I use a function to programmatically control which jquery-ui "accordion" panel should open?</p> <p>Thanks for any help/guidance!</p> <p><em><strong>NOTE: Below, are some examples of what I've tried to open the accordion panel using a function are shown below.</em></strong></p> <p>--Unfortunately, none of these work.</p> <p><strong>(jquery 1.8.0, jquery-ui 1.8.23)</strong></p> <h1>1.</h1> <pre><code> $('#abc').accordion( { active: false, icons: false, collapsible: true, animated: true, navigation: true, event: "click keyup", create: function(event, ui) { $("#abc").accordion( "option" , "active" , getAindex() ); } }); </code></pre> <h1>2.</h1> <pre><code> $('#abc').accordion( { icons: false, active: function(event, ui) { return getAindex(); }, collapsible: true, animated: true, navigation: true, event: "click keyup" }); </code></pre> <h1>3.</h1> <pre><code> $('#abc').accordion( { icons: false, active: getAindex(), collapsible: true, animated: true, navigation: true, event: "click keyup" }); </code></pre> <h1>The "getAindex()" function looks like this...</h1> <pre><code> function getAindex() { var idx = 0; var jqXHR2 = $.ajax({ type: "GET", url: 'getAindex', async: false, cache: false }) .done(function(data, textStatus, jqXHR) { idx = data $("#aindex").val(idx); }) .fail(function(jqXHR, textStatus, errorThrown) { alert("FAIL: getAindex: jqXHR:" + jqXHR + "...textStatus:" + textStatus + "...errorThrown:" + errorThrown"); }); return idx; } </code></pre> <h1>The HTML looks like this...</h1> <pre><code> &lt;div id="abc"&gt; &lt;h3&gt;tabA&lt;/h3&gt; &lt;div&gt; &lt;div&gt; &lt;span&gt;tabA-content1&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;span&gt;tabA-content2&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;h3&gt;tabB&lt;/h3&gt; &lt;div&gt; &lt;div&gt; &lt;span&gt;tabB-content1&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;span&gt;tabB-content2&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;h3&gt;tabC&lt;/h3&gt; &lt;div&gt; &lt;div&gt; &lt;span&gt;tabC-content1&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;span&gt;tabC-content2&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <h1>The "fixed" accordion definition...</h1> <pre><code> $('#abc').accordion( { active: getAindex(), icons: false, collapsible: true, animated: true, navigation: true, event: "click keyup", change: function(event, ui) { if (ui.options.active !== false) { setAindex(ui.options.active); } } }); </code></pre> <h1>The "fixed" Aindex() function...</h1> <pre><code> function getAindex() { var idx = 0; var jqXHR2 = $.ajax({ type: "GET", url: 'getAindex', async: false, cache: false }) .done(function(data, textStatus, jqXHR) { idx = parseInt(data); // &lt;== NOTE: added this... $("#aindex").val(idx); }) .fail(function(jqXHR, textStatus, errorThrown) { alert("getAindex() - FAIL: jqXHR:" + jqXHR + "...textStatus:" + textStatus + "...errorThrown:" + errorThrown); }); return idx } </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