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

Question

I have a view in my Laravel project that shows all products in the first tab and pending products in the second tab. in the second tab when I enter to validate a certain product, I am redirected to my view whose first tab is active, and it is really a waste of time to press the second tab every time I am redirected towards my view in order to access a certain product on-hold.

So I want the second tab to be activated when I get redirected,how can i achieve this in my ajax success function, here is my script located in the modification view this script has the goal to refuse or accept the product in order for it to show with all the products in my first view which contains the tab:

<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>

and my tab structure:

                                <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>
                    
                                

Answer 1

in redirected page:

If you are using bootstrap 4.x you can switch to that tab programmatically

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

bootstrap 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()

Answer 2

You can use sockets

https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

https://laravel.com/docs/8.x/broadcasting

I hope by useful