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

I am making an eCommerce web application in Laravel and I am stuck at a point to add products in the admin panel.

我正在Laravel中制作一个电子商务Web应用程序,我很难在管理面板中添加产品。

There are 3 tabs for adding the products

添加产品有3个选项卡

General Information
Meta Information
Product Options.

I am using AJAX with for inserting the data in the database.

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

My problem is that whenever I hit the submit button, when the data passes and returns success message, the current tab moves to the last tab, meaning, if I am on general tab and when I hit on submit button the General Tab, the last tab gets active instead of meta. I want that it should go the sequence wise.

我的问题是每当我点击提交按钮,当数据通过并返回成功消息时,当前选项卡将移动到最后一个选项卡,这意味着,如果我在常规选项卡上,当我点击提交按钮时,常规选项卡,最后一个标签变为活动而不是元。我希望它应该顺序顺序。

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;
});

Where have I made mistake ?

我哪里弄错了?

Kindly help me. Thanks.

请帮助我。谢谢。

1 个解决方案

#1

I would do slight mods to your current js and check whether it solves your prob:

我会对你当前的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;
});

The problem with the below code inside success is:

以下代码内部成功的问题是:

 $( '.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

#1