Why won't jQuery accordion section activate in IE 8?

Question

I am using a multi-part form within the jQuery UI accordion. When a user clicks on "next," the next section that has not already been submitted opens. It is not working properly in IE 8 - the next section does not open. Anyone have any thoughts on what I can do here to ensure compatibility with IE 8?

EDITED UDPATE TO QUESTION: Using IE Developer Tools, I found that the code is breaking at "next=i." The error states "Object doesn't support this property or method." Any thoughts as to what I'm doing wrong here?

$(":submit").live('click', function() {
whichButton =  $(this).val();
})

$("#selection-form").validate({
   submitHandler: function(form) {
     var acc = $("#accordion");
//...
   complete: function(e) {
     $('#selection-information').attr('state', 1);
     acc.children('.step').each(function(i){
         if($(this).attr('state') == 0) 
            {
        next = i;
        return false;
        }
    })
        if(whichButton=='complete'){
         acc.accordion('activate',next);            
}

//...

UPDATE: The problem seems to be with trying to activate with "next," rather than with a specific index number (even though "next" is supposed to identify the index to open). If I replace "next" with an actual index number, that section opens. Any thoughts on how to fix this specific problem?

Desrochers

Answer 1

I ran into this same problem. IE is very finicky about proper html and making sure that inside your accordion, there is nothing outside the <h3></h3><div></div> structure, for example, it you have this:

<h3>a header</h3>
<div>some content</div>
<h3>another header</h3>
<div>some more content</div>

it will work, but this will not:

<h3>a header</h3>
<div>some content</div>
<span>extra stuff</span>
<h3>another header</h3>
<div>some more content</div>

This would all be inside whatever element you call .accordion() on.

Skelly

Thank you. Unfortunately, I did modify things a bit with a <div></div><div></div><h3></h3><div></div> structure. Were you able to find any workarounds, or do I just need to revamp my code to adhere to the required structure? – Desrochers

DOUBLE ++++ I was building a module in Dot Net Nuke and I had a div completely outside the accordion and it was causing the error; a simple p tag too – Uncourtly

Answer 2

Apparently, there was a conflict or problem with the use of the name "next." I changed "next" to "nxt" within the function and the accordion is now working in IE8.

Desrochers