如何使用 Ajax 从另一个页面操作 Bootstrap 选项卡

How to manipulate Bootstrap tabs from another page using Ajax

提问人:youss 提问时间:11/22/2021 更新时间:11/22/2021 访问量:428

问:

我在我的Laravel项目中有一个视图,在第一个选项卡中显示所有产品,在第二个选项卡中显示待处理产品。 在第二个选项卡中,当我进入验证某个产品时,我被重定向到我的第一个选项卡处于活动状态的视图,每次我被重定向到我的视图以访问某个暂停的产品时,按下第二个选项卡确实是浪费时间。

所以我希望在我被重定向时激活第二个选项卡,我怎样才能在我的ajax成功函数中实现这一点,这是我的脚本位于修改视图中,这个脚本的目标是拒绝或接受产品,以便它与包含选项卡的第一个视图中的所有产品一起显示:

<script type="text/javascript">

    $(".Visibilite").click(function (e) {
           e.preventDefault();
           var ele = $(this);
            $.ajax({
                url: '{{ url('change-visibility') }}',
                method: "post",
                cache: false,
                data: {_token: '{{ csrf_token() }}', produit_id: ele.attr("data-id"), status: ele.attr("data-status")},
                success:function(data) {
                   window.location.replace('{{ url("NouveauProduits") }}');
                }
            });
        });
</script>

和我的选项卡结构:

                                <li class="nav-item">
                                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" aria-controls="home" aria-expanded="true">
                                        Tous les produits <i class="la la-list-alt"></i>
                                    </a>
                                </li>
                                
                                <li class="nav-item">
                                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" aria-controls="profile" aria-expanded="false">
                                        Noueaux produits  <i class="ficon ft-bell bell-shake"></i>  <span class="badge badge-pill badge-glow badge-danger float-right">@if ($unvisible->count()>0) {{ $unvisible->count() }} @endif</span>
                                    </a>
                                </li>
                    
                                
ajax laravel bootstrap-4 jquery-ui-tabs bootstrap-tabs

评论

0赞 Othmane Nemli 11/22/2021
既然您正在使用 ajax 进行验证,为什么需要再次刷新页面。您可以只更新已验证的产品或关联产品,或者有其他原因刷新页面!?
0赞 youss 11/22/2021
@PsyLogic我没有刷新页面,而是将其重定向到保留的产品列表,那么一旦我验证/拒绝产品,我就没有必要停留在产品的详细信息页面。

答:

0赞 Othmane Nemli 11/22/2021 #1

在重定向的页面中:

如果您使用的是 bootstrap 4.x,则可以以编程方式切换到该选项卡

$(function () {
    $('#myTab a[href="#profile"]').tab('show')
  })

引导程序 5.x

 var firstTabEl = document.querySelector('#myTab a[href="#profile"]')
 var firstTab = new bootstrap.Tab(firstTabEl)
 firstTab.show()

// Or 
 var firstTab = new bootstrap.Tab($('#myTab a[href="#profile"]'))
 firstTab.show()

评论

0赞 youss 11/23/2021
但是 ajax 函数在一个视图中,选项卡在重定向视图中,我的函数如何知道要转到的文件?或者我应该把这个函数放在: window.location.replace('{{ url(“NouveauProduits”) }}'); ?
0赞 Othmane Nemli 11/23/2021
当然,您会将此代码放入具有选项卡的页面中。