2015-07-10 3 views
1

Я пытаюсь создать модальное всплывающее окно и включить вызов AJAX внутри модального тела. Сценарий, включающий AJAX. работает отлично.Удалить подтверждение с использованием Bootstrap и AJAX

Вот кнопка, которая вызывает модальность (я работаю с шаблонами TWIG)

<button class="btn btn-danger" data-id="{{ product.id }}">Delete</button> 

Это скрипт JQuery:

$(document).ready(function() { 
    $('[data-id]').each(function() { 
    var $this = $(this), 
     id = $this.data('id'); 
    $this.on('click', function(event) { 
     event.preventDefault(); 
     $.post('{{ path('dashboard_ajax ') }}', { 
      'id': id 
     }, 
     function(details) { 
      var $modal = $(details); 
      $('#confirm-delete').remove(); 
      $('body').append($modal); 
      $modal.modal(); 
     } 
    ); 
    }) 
    }); 
}); 

И это страница с модальной

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 

     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4> 
     </div> 

     <div class="modal-body"> 

     <div class="alert alert-danger" role="alert"> 

      <p>Do you really want to delete <b>{{ product.name }}?</b></p> 

     </div> 

     <img src="{{ asset('uploads/product_images/') }}{{ product.image }}" style="width: 240px;" class="img-responsive thumbnail" /> 
     </div> 

     <div class="modal-footer"> 
     <button type="button" id="misha" class="btn btn-default" data-dismiss="modal">Cancel</button> 
     <a class="btn btn-danger btn-ok">Delete</a> 
     </div> 
    </div> 
    </div> 

Теперь, если нажать на кнопку удаления, я бы хотел удалить выбранный элемент, используя связанную страницу (exa mple: delete.php)

+0

Из-за этого вопроса я просто подумал о http://t4t5.github.io/sweeta lert/это тоже очень мило. Спасибо, что вспомнил меня. –

ответ

0

Один из способов сделать это путь присоединения щелчка правши и установки расположения, как этого

window.location.href = 'delete.php'; 

Или что-то вроде этого

<a class="btn btn-danger btn-ok" href="delete.php">Delete</a> 

Если у вас есть продукт ID, который должен быть отправлен на delete.php, как этот

<a class="btn btn-danger btn-ok" href="delete.php?ID={{ product.id }}">Delete</a> 
+0

Спасибо за помощь. – Daniel