使用sweetalert刪除確認？

Question

我試圖創建一個使用sweetalert在我的應用程序刪除確認，這裏是我迄今所做..

查看：

<div class="box-button"> 
    {!! Form::open(['method' => 'POST', 'class' => 'deleteedition', 'action' => ['EditionController@destroy', $edition->id]]) !!} 
    <input type="hidden" name="_method" value="DELETE"> 
    <input type="hidden" name="_token" value="{{ csrf_token() }}" /> 
    {!! Form::submit('Delete', ['class' => 'btn btn-danger btn-sm', 'id'=>'deleteedition1']) !!} 
    {!! Form::close() !!} 
</div> 

JS：

<script> 
      $("#deleteedition1").on("click", function() { 
       swal({ 
        title: "Are you sure?", 
        text: "You will not be able to recover this lorem ipsum!", type: "warning", 
        showCancelButton: true, 
        confirmButtonColor: "#DD6B55", 
        confirmButtonText: "Yes, delete it!", 
        closeOnConfirm: false 
       }, 
         function() { 
          $(".deleteedition").submit(); 
         }); 
      }); 
     </script> 

的問題是當我點擊刪除按鈕時，它會繼續刪除文件，甚至認爲我還沒有確認它。有人能告訴我我做錯了什麼嗎？謝謝您的幫助！

全表視圖：

<table class="table table-borderless table-responsive" style="table-layout: fixed;"> 
          <thead> 
           <tr> 
            <th style="overflow: hidden;"></th> 

            @if (Auth::check() && Auth::user()->level == 'admin') 
            <th style="width: 130px;"></th> 
            @endif 

           </tr> 
          </thead> 
          <tbody> 
           <?php foreach ($edition_list as $edition): ?> 
            <tr> 
             <td style="overflow: hidden;"><a href="{{ url('edition/' . $edition->id) }}">Volume {{ $edition->volume }}, Nomor {{ $edition->number }} ({{ Carbon\Carbon::parse($edition->start)->format('F, Y') }})</a> 
              @if (Auth::check() && Auth::user()->status == '1') 
              @if (Carbon\Carbon::now()->between(Carbon\Carbon::parse($edition->start), Carbon\Carbon::parse($edition->limit))) 
              <p style="font-size: 10px; color: red;">Edisi aktif periode : {{ Carbon\Carbon::parse($edition->start)->format('j F Y') }} sampai {{ Carbon\Carbon::parse($edition->limit)->format('j F Y') }}</p> 
              @else 
              <p></p> 
              @endif 
              @endif 
             </td> 

             @if (Auth::check() && Auth::user()->level == 'admin') 
             <td style="overflow: hidden; width: 210px;"> 
              <div class="box-button"> 
               {{ link_to('edition/' . $edition->id . '/edit', 'Edit', ['class' => 'btn btn-warning btn-sm']) }} 
              </div> 
              <div class="box-button"> 
               {!! Form::open(['method' => 'POST', 'class' => 'deleteedition', 'action' => ['EditionController@destroy', $edition->id]]) !!} 
               <input type="hidden" name="_method" value="DELETE"> 
               <input type="hidden" name="_token" value="{{ csrf_token() }}" /> 
               {!! Form::submit('Delete', ['class' => 'btn btn-danger btn-sm', 'id'=>'deleteedition1']) !!} 
               {!! Form::close() !!} 
              </div> 
             </td> 
             @endif 
            </tr> 
           <?php endforeach ?> 
          </tbody> 
         </table> 

Answer 1

基本上你是使用foreach（$ edition_list爲$版）循環，然後硬編碼在{!!Form::submit}} ID作爲id=deleteedition1這意味着相同的ID在所有的刪除按鈕表。

相反，你可以嘗試動態生成表單的ID和提交按鈕，您可以通過數據文件屬性像

<div class="box-button"> 
    {!! Form::open(['method' => 'POST', 'class' => "deleteedition edition", 'id'=>'edition-'.$edition->id, 'action' => ['EditionController@destroy', $edition->id]]) !!} 
     <input type="hidden" name="_method" value="DELETE"> 
     <input type="hidden" name="_token" value="{{ csrf_token() }}" /> 
     {!! Form::submit('Delete', ['class' => 'btn btn-danger btn-sm delete-edition-btn', 'data-file'=>"edition-".$edition->id]) !!} 
    {!! Form::close() !!} 
</div> 

則引用在腳本

<script> 
    $(".delete-edition-btn").on("click", function (event) { 
     event.preventDefault(); 
     var file= '#'+this.attr('data-file'), 
      formId='form'+file, 
      parent=this.parents(formId); 
     swal({ 
      title: "Are you sure?", 
      text: "You will not be able to recover this lorem ipsum!", type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Yes, delete it!", 
      closeOnConfirm: false 
     }, 
     function() { 
      $(parent).submit(); 
     }); 
    }); 
</script> 

Or 
//here you don't depend upon dynamic ids but use the jQuery closest() 
<script> 
    $(".delete-edition-btn").on("click", function(event){ 
     event.preventDefault(); 

     swal({ 
      title: "Are you sure?", 
      text: "You will not be able to recover this lorem ipsum!", type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Yes, delete it!", 
      closeOnConfirm: false 
     }, 
     function(){ 
      // Use closest() to find the correct form in the DOM 
      $(this).closest("form.deleteedition").submit(); 
     }); 
    }); 

Answer 2

嘗試使用preventDefault()爲：

<script> 
    $("#deleteedition1").on("click", function (event) { 
     event.preventDefault(); 
     swal({ 
      title: "Are you sure?", 
      text: "You will not be able to recover this lorem ipsum!", type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: "Yes, delete it!", 
      closeOnConfirm: false 
     }, 
     function() { 
      $(".deleteedition").submit(); 
     }); 
    }); 
</script> 

Answer 3

使用jQuery's preventDefault()防止形式從提交這樣的：

$("#deleteedition1").on("click", function (e) { 

    e.preventDefault(); <-------- here 

    swal({ 
     title: "Are you sure?", 
     text: "You will not be able to recover this lorem ipsum!", type: "warning", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Yes, delete it!", 
     closeOnConfirm: false 
    }, 
    function() { 
     // Use closest() to find the correct form in the DOM 
     $(this).closest("form.deleteedition").submit(); 
    }); 
}); 

您可以使用jQuery的closest()方法從HTML DOM中查找正確的文件。

據jQuery的文檔：如果此方法被調用時，事件的默認操作 不會被觸發

希望這有助於！

Answer 4

試試這個，你處理所有你的刪除表單的提交事件。而且，如果SwaI位證實，形式將提交

$('.deleteedition').on('submit',function(){ 
    return swal({ 
     title: "Are you sure?", 
     text: "You will not be able to recover this lorem ipsum!", type: "warning", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Yes, delete it!", 
     closeOnConfirm: false 
    }, 
    function() { 
     // Use closest() to find the correct form in the DOM 
     //$(this).closest("form.deleteedition").submit(); 
     return true; 
    }); 
})