Geeks With Blogs
Etienne Giust's .NET notes Some .NET tips and tricks for me to remember. That might help you too

 

I was looking for a kind of onselected trigger for the JQueryUI accordion (v 1.8.11). The proper way to do this is to use the “change” event of the accordion :

 

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").accordion({
            change: function (event, ui) {
                alert("changed!");
            }
        });
    });

 

Now, you might want to get the selected pane index. This is quite easy too :

 

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").accordion({
            active: 0,
            change: function (event, ui) {
                var activeIndex = $("#accordion").accordion("option", "active");
                alert(activeIndex);
            }
        });
    });

 

Lastly, you might have a hidden field of interest inside the selected pane that you want to access. Perhaps the accordion is constructed dynamically and each pane has an hidden field holding a value that you need.

We will use a jQuery selector to get it. I chose to rely on the class attribute to get all hidden ids and then to make use of the activeIndex to retrieve the right one.

 

<input class="HiddenId" type="hidden" value="1234"/>

 

Now, using a proper jQuery selector we are able to display that value when a new pane of the accordion is selected. The class HiddenId is what permits us to discriminate against different types of hidden fields, but you may chose to use a different attribute depending on the way the accordion contents are generated. Attributes Name or Id might work.

 

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").accordion({
            active: 0,
            change: function (event, ui) {
                var activeIndex = $("#accordion").accordion("option", "active");
                var hidId = $("#accordion input[type=hidden][class=HiddenId]")[activeIndex];
                alert($(hidId).val());
            }
        });
    });
Posted on Wednesday, April 25, 2012 10:31 PM | Back to top


Comments on this post: JQueryUI Accordion : “OnSelected” trigger and get selected “value”

# re: JQueryUI Accordion : “OnSelected” trigger and get selected “value”
Requesting Gravatar...
thank you so much! really good explanations!!!
Left by darkskies on Mar 25, 2013 12:42 AM

# re: JQueryUI Accordion : “OnSelected” trigger and get selected “value”
Requesting Gravatar...
no comment
Left by jon on Apr 18, 2014 11:35 AM

# re: JQueryUI Accordion : “OnSelected” trigger and get selected “value”
Requesting Gravatar...
The attributes Name and Id don't always work, though, although they do do the trick in most of the cases. However, in my line of workflow management systems, when I want to clone a table row with 4 select boxes and afterwards clone the id's and names but increment the id's by one, it works 99% of the cases.
Left by Ramon on Jun 11, 2014 9:28 PM

Your comment:
 (will show your gravatar)


Copyright © Etienne Giust | Powered by: GeeksWithBlogs.net | Join free