How to manipulate Bootstrap tabs from another page using 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>

Since you are validating using ajax, why do you need to refresh the page again.. you can just update the validated product or associated product, or there is another reason for refreshing the page !? — Othmane Nemli
– Othmane Nemli, Commented Nov 22, 2021 at 14:24
@PsyLogic i'm not refreshing the page, i'm redirecting it towards the list of products on hold, there is no need for me to stay at the product's detail page once i validate/refuse the product. — youss
– youss, Commented Nov 22, 2021 at 14:42

Othmane Nemli · Accepted Answer · 2021-11-22 14:57:09Z

0

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

answered Nov 22, 2021 at 14:57

Othmane Nemli

1,1917 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

youss Over a year ago

but the ajax function is in one view and the tab is in the redirect view, how will my function know wich file to go to? or should i put this function under : window.location.replace('{{ url("NouveauProduits") }}'); ?

Othmane Nemli Over a year ago

Of course you will put this code into the page that it has the tab.

Collectives™ on Stack Overflow

How to manipulate Bootstrap tabs from another page using Ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest