Вкладка jQuery перемещается на последнюю вкладку при нажатии кнопки

Question

Я делаю веб-приложение электронной коммерции в Laravel, и я застрял в точке, чтобы добавить продукты в панель администратора.

Есть 3 вкладки для добавления продуктов

1. Общая информация
2. метаинформацию
3. Параметры продукта.

Я использую AJAX для вставки данных в базу данных.

Проблема с тем, что всякий раз, когда я нажимаю кнопку отправки, когда данные проходят и возвращает сообщение success, текущая вкладка перемещается на последнюю вкладку, то есть, если я на общей вкладке, и когда я нажимаю кнопку отправки, Tab, последняя вкладка активируется вместо мета. Я хочу, чтобы он следовал последовательной последовательности.

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 и проверить решает ли ваш Prob:

$("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