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

Posted 2023-03-21

【中文标题】如何使用 Ajax 从另一个页面操作引导选项卡

【英文标题】：How to manipulate Bootstrap tabs from another page using Ajax

【发布时间】：2022-01-01 03:14:53

【问题描述】：

我的 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进行验证，为什么还要再次刷新页面..可以只更新验证过的产品或关联的产品，还是有别的原因刷新页面！？跨度>

@PsyLogic 我没有刷新页面，我将其重定向到搁置的产品列表，一旦我验证/拒绝我就无需停留在产品的详细信息页面产品。

【参考方案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()

【讨论】：

但是 ajax 函数在一个视图中并且选项卡在重定向视图中，我的函数如何知道要转到哪个文件？或者我应该把这个函数放在：window.location.replace(' url("NouveauProduits") '); ?

当然你会把这段代码放到有标签的页面中。