Redirect to a specific tab after deleting or inserting in laravel

Gaving multible tabs in a view in Laravel with a full functional CRUD, could do some problems as you try to navigate back to the specific tab where you were before, after inserting, updating, or deleting an item. With Laravel you usually return a view (return view(args);) or redirect back (return back(); ) in the end of the CRUD method.

I have discovered 2 ways to do this:

  1. Using Ajax
  2. Using Jquery and the withInput() method in the Controller

Let’s start with using Ajax

Inserting the information and returning to the same tab

The Ajax code below uses the form data with a POST method, and if the data is inserted successfully, return to the view with the parameter specific parameter given. reload the page (you might not need this part), else return an error message.

Keep in mind that you have to do this AJAX request for every tab or CRUD you have in this view. 

$('#addVideoForm').submit(function (form) {
varformData = newFormData(this);
$.ajax({
  method:'POST',
  url:"{{ action('Controller@store', [$var]) }}",
  data:formData,
  cache:false,
  contentType:false,
  processData:false,
  success:function (data) {
    varurl = '{!! action('Controller@index', [$var]) !!}';
    varfullUrl = url.concat('?#videos');
    window.location.href = fullUrl;
    location.reload();
    error:function (data) {
      if (data.responseJSON.video) {
        $('#video-error').attr('class', 'has-error').append(' <span class="help-block"><strong>' + data.responseJSON.video + '</strong></span>');
      }
      $('#upload').attr("disabled", false);
    }
  });
});

Basically  this is all you have to do. the page will return to the same tab, you have inserted the information.

Using Laravel controllers, for delete.

Deleting the information and returning to the same tab.

This method requires less code, and uses the back(); method in combo with the withInput(); method.

In this case i have 3 tabs, A video, a photo and a comments tab, using the destroy method from the associated controller, After using the data liks detaching the media and some

publicfunctiondestroy(param $param, Media $medium){
  $medium->delete();
  Session::flash('status', 'The video was successfully deleted.');
  //return to a specific tab, regarding the type the user added
  if ($medium->aggregate_type == Media::TYPE_VIDEO) {
    returnback()->withInput(['tab'=>'videos']);
  }
  elseif ($medium->aggregate_type == Media::TYPE_IMAGE) {
    returnback()->withInput(['tab'=>'photos']);
  }else{
    returnback();
  }
}
The js on the frontend
//redirect to specific tab
$(document).ready(function () {
  $('#myTab a[href="#{{ old('tab') }}"]').tab('show')
});
The HTML

My tab navigation:

<li><a href="#photos" data-toggle="tab"><i class="fa fa-camera" aria-hidden="true"></i> Photos</a></li>

My tab pane:

<div class="tab-pane" id="photos">
<ul class="nav nav-stacked nav-pills" id="myTab">
CategoriesUncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *