Question

我将数据从嵌入在选项卡式引导程序模式中的表单提交到laravel 5.2中的控制器方法。

每个选项卡都有不同的表单，我需要在每个选项卡的表单顶部显示验证错误。这就是我的方法：在所有选项卡中每个表单的顶部，我添加了验证错误显示代码。如果表单出错，则错误将显示在表单的顶部，但我无法看到它。现在我做了一些搜索，并且能够自动重新打开模态，以防在我的视图中使用这段代码填写表单时出错：

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

但这只会打开默认选项卡的模态。我希望能够使用用户填写的表单打开选项卡的模式，如果可能的话，我想用JQuery执行此操作。有可能吗？

我的模态看起来像这样：

<!-- 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="{{ route('someroute/') }}">
                                <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>

如代码所示，标签为section 1和section 2。

我的问题是，我如何打开section 2有效而不是默认section 1的模式？或者有更好的方法来完成整个过程吗？

任何帮助将不胜感激。感谢。

Answer 1

您可以使用以下代码

激活所需的nav部分

 $('.nav-tabs a[href="#id_of_the_nav"]').tab('show');

因此，在您的情况下，如果您要激活Section 2，只需将id_of_the_nav替换为tab2

演示：https://jsfiddle.net/Prakash_Thete/s6jjmdc4/1/

Answer 2

好吧，我找到了办法。我在jquery中使用了单击trigger。

<script>
    $('#tab_id').trigger('click');
</script>

这相当于实际点击标签。

如何使用JQuery在打开特定选项卡的情况下自动打开选项卡式模式

2 个答案: