Kategorie mit Süß-Alarm-Nachricht löschen und Laravel 5.2

Question

Ich habe Kategorien und Unterkategorien in meiner Ansicht aufgelistet. Ich habe auch eine Schaltfläche zum Löschen der Kategorie, die funktioniert, und löscht die Kategorie und alle ihre Unterkategorien. Was ich tun möchte, ist vor dem Löschen einer Elternkategorie, möchte ich die süße Alarmschaltfläche Pop-up und fragen, ob Sie sicher diese Kategorie mit einem Ja und Nein-Taste löschen möchten? Ich weiß, dass ich Ajax wahrscheinlich benutzen muss, um es zu schaffen, aber ich bin nicht so großartig mit Ajax. Im Moment habe ich das, und wenn ich auf den Löschen-Button klicke, löscht er die Kategorien, aber die süße Alarmmeldung wird nicht angezeigt.

Route.php

/** Delete a category **/ 
    Route::delete('admin/categories/delete/{id}', [ 
     'uses' => '\App\Http\Controllers\CategoriesController@deleteCategories', 
     'as' => 'admin.category.delete', 
     'middleware' => ['auth'], 
    ]); 

CategoriesController.php:

class CategoriesController extends Controller { 

    /** More function here, just hidden for ease right now **/ 


    /** 
    * Delete a Category 
    * 
    * @param $id 
    * @return \Illuminate\Http\RedirectResponse 
    */ 
    public function deleteCategories($id) { 
     // Find the category id and delete it from DB. 
     Category::findOrFail($id)->delete(); 

     // Then redirect back. 
     return redirect()->back(); 
    } 

} 

Meine Form:

@foreach ($categories as $category) 

{{ $category->category }} 

<form method="post" action="{{ route('admin.category.delete', $category->id) }}" class="delete_form"> 
     {{ csrf_field() }} 
     <input type="hidden" name="_method" value="DELETE"> 
     <button id="delete-btn"> 
      <i class="material-icons delete-white">delete_forever</i> 
     </button> 
</form> 

@endforeach 

Ein d My sweet Warnruf:

<script type="text/javascript"> 
    $('#delete-btn').on('click', function(e){ 
     e.preventDefault(); 
     var self = $(this); 
     swal({ 
        title: "Are you sure?", 
        text: "All of the sub categories will be deleted also!", 
        type: "warning", 
        showCancelButton: true, 
        confirmButtonColor: "#DD6B55", 
        confirmButtonText: "Yes, delete it!", 
        closeOnConfirm: true 
       }, 
       function(isConfirm){ 
        if(isConfirm){ 
         swal("Deleted!","Category and all sub categories deleted", "success"); 
         setTimeout(function() { 
          self.parents(".delete_form").submit(); 
         }, 2000); 
        } 
        else{ 
         swal("cancelled","Your categories are safe", "error"); 
        } 
       }); 
    }); 
</script> 

Answer 1

Binden Sie das Click-Ereignis an DOM anstelle des Elements.

$(document).on('click', '#delete-btn', function(e) { ... }); 

Dies behebt auch Probleme mit dynamisch geladenen Elementen, zB: Rendern von Aktionsschaltflächen nach einem Ajax-Aufruf.

Answer 2

Verwenden Sie das Ereignis auf dem DOM-Knoten anstelle des jquery Objekt einreichen:

$('.delete_form')[0].submit(); 

Answer 3

habe es funktioniert, hatte ich das für meine süße alert JavaScript zu tun :

$(document).on('click', '#delete-btn', function(e) { 
     e.preventDefault(); 
     var self = $(this); 
     swal({ 
        title: "Are you sure?", 
        text: "All of the sub categories will be deleted also!", 
        type: "warning", 
        showCancelButton: true, 
        confirmButtonColor: "#DD6B55", 
        confirmButtonText: "Yes, delete it!", 
        closeOnConfirm: true 
       }, 
       function(isConfirm){ 
        if(isConfirm){ 
         swal("Deleted!","Category and all sub categories deleted", "success"); 
         setTimeout(function() { 
          self.parents(".delete_form").submit(); 
         }, 1000); 
        } 
        else{ 
         swal("cancelled","Your categories are safe", "error"); 
        } 
       }); 
    }); 

Danke für die Hilfe maximl337!