Comment recharger une vue dans laravel après insertion avec JQuery Ajax

Question

J'insère des enregistrements dans une table en utilisant jQuery ajax. Cela fonctionne très bien et renvoie un message flash qui notifie que l'enregistrement a été inséré avec succès. Maintenant, mon problème est après que l'enregistrement a été inséré, je ne sais pas comment recharger ma table afin que les changements peuvent être reflétés.

Remarque J'insertion par un modal bootstrap sur la même page de la table se trouve.

C'est le contrôleur qui retourne mes dossiers:

public function index() 
{ 
    // 
    $subjects = Subject::all(); 


    return view('subjects.show', compact('subjects')); 
} 

Après les enregistrements sont de retour c'est ainsi que je l'afficher:

<table class="table table-responsive table-hover table-condensed table-bordered"> 
        <thead> 
         <tr> 
          <th>Name</th> 
          <th>Level</th> 
          <th colspan="2">Actions</th> 
         </tr> 
        </thead> 
        <tbody> 
         @foreach($subjects as $subject) 
          <tr> 
           <td>{{$subject->name}}</td> 
           <td>{{$subject->level}}</td> 
           <td> 
            <a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-edit text-info"></i></a> 
           </td> 
           <td> 
            <a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-trash text-danger"></i></a> 
           </td> 

          </tr> 
         @endforeach 
        </tbody> 
       </table> 

C'est mon script d'insérer l'enregistrement:

$(document).on('submit', '#subject-form', function(event) { 
      event.preventDefault(); 
      /* Act on the event */ 

      var name = $('#name').val(); 
      var level = $('#level').val(); 

      $.ajaxSetup({ 
       headers: { 
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
       } 
      }); 

      $.ajax({ 
       type: "POST", 
       url: $("#subject-form").attr('action'), 
       data: {name: name, level: level}, 
       success: function(response) { 
        console.log(response); 

        if (response.success) { 
         $.notify({ 
          icon: 'glyphicon glyphicon-check', 
          message: response.success 
          },{ 
           type: 'info', 
           timer: 4000, 
           offset: 20, 
           spacing: 10, 
           z_index: 1031, 
           delay: 5000, 
           placement: { 
           from: "bottom", 
           align: "right" 
           }, 

           animate: { 
           enter: 'animated fadeInDown', 
           exit: 'animated fadeOutUp' 
           }, 
         }); 
        } else { 
         // display error 
        } 

        $('#subject-modal').modal('toggle'); 
       } 
      }); 

Ceci est la méthode du contrôleur qui insère l'enregistrement et génère une réponse flash:

public function store(Request $request) 
{ 
    // 

    //return json_encode(request('name')); 
    $response = array(); 

    if (Subject::create(request(['name', 'level']))) { 

     $response['success'] = '<b>'.request('name').'</b>'.' created successfully'; 
    } else { 
     $response['fail'] ='Error creating subject: <b>'.request('name').'</b>'.'. Try again, if problem persist contact administrator'; 
    } 

    return \Response::json($response); 


} 

Y a-t-il des façons de faire fonctionner ce système? Appréciez les commentaires et les suggestions. Merci!!!

Answer 1

Deux solutions possibles pour cela.

1. window.location.reload() pour recharger la page.
2. Envoyez l'enregistrement nouvellement ajouté en tant que réponse et en cas de réussite, ajoutez-le à votre tableau actuel en affichant tous les enregistrements. (Pas reload sera nécessaire)

EDIT

Votre méthode du contrôleur pourrait ressembler à ceci

public function store(Request $request) 
{ 
    // 

    //return json_encode(request('name')); 
    $response = array(); 

    if ($subject = Subject::create(request(['name', 'level']))) { 

     $response['success'] = '<b>'.request('name').'</b>'.' created successfully'; 
     $response['subject'] = $subject; 
    } else { 
     $response['fail'] ='Error creating subject: <b>'.request('name').'</b>'.'. Try again, if problem persist contact administrator'; 
    } 

    return \Response::json($response); 


} 

Maintenant, votre tableau de réponse a un objet (nouveau record sujet) et vous pouvez Accédez-y via subject clé dans votre rappel de succès.

Donnez votre table un id et l'accès à l'aide jquery pour ajouter un élément <tr> </tr> contenant votre subject enregistrement ..

Answer 2

Vous pouvez utiliser la fonction de charge. Donnez un ID à votre table et utilisez-le quand vous le souhaitez:

var url = '/page_adress'; 
$('#table_id').load(url + '#table_id>*'); 

Answer 3

Obtenez une réponse du contrôleur et ajoutez une nouvelle ligne dans la table.

 $.ajax({ 
      type: "POST", 
      url: $("#subject-form").attr('action'), 
      data: {name: name, level: level}, 
      success: function (response) { 
       console.log(response); 

       if (response.success) { 
        var html = '<tr>'; 
        html = '  <td>' + response.subject.name + '</td>'; 
        html = '<td>' + response.subject.level + '</td>'; 
        html = '<td>'; 
        html = '<a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-edit text-info"></i></a>'; 
        html = '</td>'; 
        html = '<td>'; 
        html = '<a data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-trash text-danger"></i></a>'; 
        html = '</td>'; 
        html = '</tr>'; 
        $("table.table-responsive").append(html); 
        }); 
       } else { 
        // display error 
       } 

       $('#subject-modal').modal('toggle'); 
      } 
     }); 

Controller code

public function store(Request $request) { 
    $response = array(); 
    $data["name"] = request('name'); 
    $data["level"] = request('level'); 
    $subject = Subject::create($data); 
    if ($subject) { 
     $response['success'] = '<b>' . request('name') . '</b>' . ' created successfully'; 
     $response['subject'] = $subject; 
    } else { 
     $response['fail'] = 'Error creating subject: <b>' . request('name') . '</b>' . '. Try again, if problem persist contact administrator'; 
    } 

    return \Response::json($response); 
}