jQuery UI tab switching not working

Question

I have the following piece of code. Whenever, user clicks a button, I need to switch tabs. I see the tab getting switched just for a moment but it immediately switches back to the first tab. Why is that? How do I solve this problem?

<div id="tabs">
        <ul>
            <li><a href="#tabs-1">A</a></li>
            <li><a href="#tabs-2">B</a></li>
            <li><a href="#tabs-3">C</a></li>
            <li><a href="#tabs-4">D</a></li>
        </ul>

        <div id="tabs-1">
            <div class="input">
            <form>
                <fieldset>
                    <legend>Data source</legend>
                    Blah blah
                </fieldset>

                <fieldset>
                    <legend>Legend</legend>  
                    <div id="accordion">
                        <h4>Check sequence</h4>
                        <div>                              
                            <button id="submitCheckSequence">Test!</button>    
                        </div>
                        <h4>Random section</h4>
                        <div>                               
                        </div>
                    </div>
                </fieldset>    
            </form>
        </div>

        </div>
        <div id="tabs-2">
            <p>Blah</p>
        </div>
        <div id="tabs-3">
            <p>Blah</p>
        </div>    
        <div id="tabs-4">
            <textarea rows="4" cols="50" readonly>
                Blah
            </textarea>
        </div>    
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabs").tabs();
            $("#accordion").accordion();

            $("#submitCheckSequence").click(function () {
                $("#tabs").tabs("option", "active", 3);
            });
        });

    </script>

Orpheus · Accepted Answer · 2015-08-20 20:11:28Z

1

http://jsfiddle.net/x01nkasj/1

Here's a working fiddle. @Odelibalta is correct on the fixes, but the basic snippet to prevent it from trying to POST is as follows.

        $("#submitCheckSequence").click(function (event) {
            event.preventDefault();
            $('#tabs').tabs("option", "active", 2);
        })

answered Aug 20, 2015 at 20:11

Orpheus

7871 gold badge8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ODelibalta · Accepted Answer · 2015-08-20 20:07:26Z

1

<div class="input"> does not have a closing tag. In addition, your button is inside a form. Thats probably why it is refreshing after you click a button within that form. Give name attribute to your form and do e.preventDefault on it. If you do not have any other input for that form, I'd take the form out and leave the button there alone. That way works on jsfiddle.

answered Aug 20, 2015 at 20:07

ODelibalta

2,2741 gold badge19 silver badges32 bronze badges

Collectives™ on Stack Overflow

jQuery UI tab switching not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related