提问人:youss 提问时间:11/22/2021 更新时间:11/22/2021 访问量:428
如何使用 Ajax 从另一个页面操作 Bootstrap 选项卡
How to manipulate Bootstrap tabs from another page using Ajax
问:
我在我的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>
答:
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
当然,您会将此代码放入具有选项卡的页面中。
评论