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?
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. This table or related slice is empty.
 

Querying!

 
Guidance

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