mardi 20 septembre 2016

How to use JQuery to open a tabbed modal automatically with a particular tab open

I am submitting data from a form embedded inside a tabbed bootstrap modal to a controller method in laravel 5.2.

Each of the tabs have their different forms and I am required to display validation errors at the top of the form for each tab. This is how I did it: At the top of each form in all the tabs, I have added the validation errors display code. If there is an error with the form, the error would be displayed at the top of the form but I would not be able to see it. Now I did some search and was able to automatically re-open the modal in case there was an error in filling the form using this piece of code in my view:

@if ($errors->all())
    $('#modal').modal('show');
@endif

But this only opens the modal to the default tab. I want to be able to open the modal to the tab with the form the user was filling and If possible i would like to do this with JQuery. Is it possible?

My modal looks something like this:

<!-- Button to trigger modal -->
<a href="#TaskListDialog" role="button" class="btn btn-default" data-toggle="modal">Launch modal</a>

<div id="TaskListDialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
               <h3>Modal Heading</h3>
           </div>

           <div class="modal-body">
                <div class="tabbable">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                             //space for another form here
                         </div>
                        <div class="tab-pane" id="tab2">
                        //display validation error here
                            <form action="">
                                <input type="text" name="name" class="form-control"> <br>
                                <input type="email" name="email" class="form-control"> <br>
                            </form>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

As seen on the code, the tabs are section 1 and section 2.

Once more my question is, How do I open the modal with section 2 active instead of the default section 1? Or is there a better way of doing the whole stuff?

Any help will be greatly appreciated. Thanks.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire