jQuery 单击按钮时选项卡移动到最后一个选项卡

Question

我正在 Laravel 中制作一个电子商务 Web 应用程序，但我无法在管理面板中添加产品。

有 3 个用于添加产品的选项卡

一般信息
元信息
产品选项。

我正在使用 AJAX 将数据插入数据库。

我的问题是，每当我点击提交按钮时，当数据通过和 returns success 消息时，当前选项卡移动到最后一个选项卡，这意味着，如果我在常规选项卡上当我点击常规选项卡的提交按钮时，最后一个选项卡变为活动状态而不是元。我希望它应该按顺序进行。

HTML:

<ul class="nav nav-tabs">
    <li class="active"><a href="#general" data-toggle="tab">General</a></li>
    <li><a href="#meta" data-toggle="tab">Meta</a></li>
    <li><a href="#options" data-toggle="tab">Options</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active fade in" id="general">
        <div class="errors"></div>

        {!! Form::open(['files' => 'true', 'autocomplete' => 'off', 'name' => 'formAddProductGeneralInfo']) !!}
            <div class="form-group">
                {!! Form::label('code', 'Code:') !!}
                {!! Form::text('code', null, ['class' => 'form-control input-sm']) !!}
            </div>

            <div class="form-group">
                {!! Form::label('name', 'Name:') !!}
                {!! Form::text('name', null, ['class' => 'form-control input-sm']) !!}
            </div>

            <div class="form-group">
                {!! Form::label('quantity', 'Quantity in Stock:') !!}
                {!! Form::text('quantity', null, ['class' => 'form-control input-sm']) !!}
            </div>

            <div class="form-group">
                {!! Form::submit( 'Add', ['class' => 'btn btn-primary btn-block', 'id' => 'btnAddProductGeneral'] ) !!}
            </div>
        {!! Form::close() !!}
    </div>

    <div class="tab-pane" id="meta">
        meta
    </div>

    <div class="tab-pane" id="options">
        options
    </div>
</div>

jQuery AJAX:

$("form[name='formAddProductGeneralInfo']").submit(function(e) {
    var inputData = new FormData($(this)[0]);
    $.ajax({
        url: '{{ url('/admin/products/general') }}',
        type: 'POST',
        data: inputData,
        async: true,
        success: function( message ) {
            if ( message.status === 'success' ) {
                toastr.success(message.msg, 'Successs!');

                $( '.nav-tabs').find('li').next().addClass('active');
                $( '.tab-content').find('div.active').next().addClass('active');

                $( '.nav-tabs').find('li').prev().removeClass('active');
                $( '.tab-content').find('div.active').prev().removeClass('active');
            } else {
                toastr.error(message.msg, msg.status);
            }
        },
        error: function( data ) {
            if ( data.status === 422 ) {
                var errors = data.responseJSON;
                var errorsHtml = '<div class="alert alert-danger"><ul>';
                errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
                $.each( errors, function( key, value ) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });
                errorsHtml += '</ul></div>';
                $( '.errors' ).html( errorsHtml );
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
    //e.preventDefault();
    return false;
});

我哪里弄错了？

请帮助我。谢谢

Answer 1

我会对您当前的 js 做轻微的修改，并检查它是否能解决您的问题：

$("form[name='formAddProductGeneralInfo']").submit(function(e) {
    var currentli=$('.nav-tabs').find('li.active')//keep reference to your active li
    var currentContent=$('.tab-content').find('div.active');//reference to your current active content
    var inputData = new FormData($(this)[0]);
    $.ajax({
        url: '{{ url('/admin/products/general') }}',
        type: 'POST',
        data: inputData,
        async: true,
        success: function( message ) {
            if ( message.status === 'success' ) {
                toastr.success(message.msg, 'Successs!');
                if(currentli.next().length) //check if it has next element, useful when you are at last tab
                {
                     currentli.removeClass('active').next().addClass('active');//remove from current and add to next
                     currentContent.removeClass('active').next().addClass('active'); 
                }

            } else {
                toastr.error(message.msg, msg.status);
            }
        },
        error: function( data ) {
            if ( data.status === 422 ) {
                var errors = data.responseJSON;
                var errorsHtml = '<div class="alert alert-danger"><ul>';
                errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
                $.each( errors, function( key, value ) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });
                errorsHtml += '</ul></div>';
                $( '.errors' ).html( errorsHtml );
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
    //e.preventDefault();
    return false;
});

以下成功代码的问题是：

 $( '.nav-tabs').find('li').next().addClass('active');

 //Trying to find next element without proper reference. It should have been 
 //done like finding current active li and then add active to its next li 
 //which you missed here

 $( '.tab-content').find('div.active').next().addClass('active');

 //You are finding the div.active element and adding active to its next 
 //element which seems ok here but again you should have removed the active 
 //class here for the current content.

 $( '.nav-tabs').find('li').prev().removeClass('active');

 //Here you are finding li again without proper reference which should have 
 //been previous li of current active li [once you get after adding from 1st 
 //line but again failed to get from proper reference.

 $( '.tab-content').find('div.active').prev().removeClass('active');
 //Now at this scenario you will have 2 active content tabs since you 
 //haven't removed active before and thus this fails to remove the proper 
 //previous active content tab

jQuery 单击按钮时选项卡移动到最后一个选项卡

jQuery tab moves to last tab on button click

ajax

jquery

tabs