Передача данных в bootstrap modal от Laravel

Question

Подумайте, может ли кто-нибудь помочь мне с этим. Я полный новичок с JS и JQuery.

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

Я добавил следующий код.

<!-- Button trigger modal to delete post --> 
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#deletePost"> 
    Delete 
</button> 

<!-- Modal --> 
<div class="modal fade" id="deletePost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Delete Blog Post</h4> 
     </div> 
     <div class="modal-body"> 
     <p>You are about to delete a blog post, are you sure all that effort is to be sent to the unrecoverable trash can?</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default pull-left" data-dismiss="modal">OMG, NO!!!</button> 
     <form action="/blog/{{ $post->id }}" method="POST"> 
      {{ csrf_field() }} 
      {{ method_field('DELETE') }} 
      <button type="submit" class="pull-right btn btn-danger">Delete it!</button> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 

Теперь все, что хорошо работает, все, что я хочу сделать, это то, что когда я нажимаю «удалить его!» кнопка будет делать именно это.

Это все работает, кроме удаления правильного поста, я хочу передать

{{ $post->id }} 

к модальному, так что он будет посылать идентификатор сообщения в контроллер.

Мой вопрос в том, как передать идентификатор выше модальному? Я прочитал много примеров, и они все такие разные, поэтому подумал, что лучше получить некоторые взгляды.

Спасибо!

Answer 1

Я бы очень рекомендовал использовать плагин SweetAlert, он визуально совместим с Twitter Bootstrap и гораздо приятнее в использовании. Это кусок кода для многоязычном, модель-независим функции удаления:

$('body').on('click', 'sweet-delete', function (e) { 
     e.preventDefault(); 
     var id = $(this).data('id'); 
     var model = $(this).data('model'); 
     swal({ 
      title: lang.confirm_please, 
      text: lang.delete_warning, 
      type: "warning", 
      showCancelButton: true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText: lang.delete_button, 
      closeOnConfirm: false, 
      showLoaderOnConfirm: true, 

     }, function(){ 
      $.post('/'+model+'/'+id, {_method: 'DELETE'}, function(data){ 
       swal({ 
        title: lang.delete_title, 
        text: lang.delete_success, 
        type: "success", 
        timer: 5000 
       }, function(){ 
        window.location.href = '/'+model; 
       }); 
      }); 
     }); 
    }) 

И в вас посмотреть:

<button data-id="{{$post->id}}" data-model="blog" class="pull-right btn btn-danger sweet-delete">@lang('app.delete')</button> 

Я должен отметить, что для того, чтобы прикрепить CSRF токен к моим формам ajax Я использую:

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

в моих приложениях и

<meta name="csrf-token" content="{{csrf_token()}}"> 

в моем основном файле макета.

Answer 2

Чтобы передать post ID в модульную форму, его следует вставить в модальном формате с помощью jQuery.

Кнопка:

<button type="button" class="btn btn-default btn-xs delete-post" data-post-id="{{ $post->id }}">Delete</button> 

Примечание: мы будем инициировать модальность, используя следующее, так что мы можем также вставить идентификатор.

JQuery:

$(document).ready(function() { 
    var modalObj = $('#deletePost'); 

    $('.delete-post').click(function(e) { 
    var postId = $(this).data('post-id'); 

    modalObj.find('form').attr('action', '/blog/' + postId); 
    modalObj.modal('show'); 
    }); 
}); 

В этом случае атрибут action устанавливается динамически, согласно соответствующему сообщению ид.