Размещение результатов формы сообщение в модальном в Bootstrap 3

Question

Как я могу получить результаты формы сообщение для отображения в модальном окне в Bootstrap 3?

У меня есть список предметов, и у каждого элемента есть кнопка «Изменить». Когда нажимается кнопка редактирования, мне нужно отправить сообщение в форму и вызвать модальное всплывающее окно с ответом. Я пытаюсь сделать это с помощью .ajax() функции JQuery, и я не уверен, что это лучший подход:

$(".editForm").submit(function() { 
    $.ajax({ 
     type  : "POST", 
     cache  : false, 
     url   : "./edit_form.php", 
     data  : $(this).serializeArray(), 
     success: function() { 
      ## How do I get the response to show up in a Bootstrap 3 modal? ## 
     } 
    }); 
    return false; 
}); 

Но я застрять, когда пришло время разобрать результат вида поста. Как я могу заставить это появиться в модальном всплывающем окне в Bootstrap 3? В документах Bootstrap говорится о запуске модальной ссылки с привязкой с <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>, но как вы можете запустить ее с помощью сообщения формы?

Возможно, я думаю об этом назад или слишком усложняю его. Возможно, сначала я должен открыть модальную форму, а затем отправить сообщение формы .ajax(), а затем обновить результат <div>. Я привык использовать Fancybox, и я перехожу к Bootstrap для всех модалов.

Спасибо!

Answer 1

Один из способов показать модальный бы:

1 - эхо в HTML с PHP (edit_form.php)

2 - функция успеха

success: function(response){ 
    // response = "echoed HTML" 
    $('#div_container').html(response); // Stick the bootstrap modal into a container of some kind 
    $('#div_container').modal();  // Activate the bootstrap modal manually 

    // make sure the container has proper bootstrap content/styling 
} 

Answer 2

Создать модальный элемент

<div id="modal" class="modal fade"> 
    <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">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       <p>One fine body&hellip;</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

и инициализировать его на дом готов

//create the modal 
$('#modal').modal({ 
    show: false 
}); 

затем показать его с сообщением, когда вы хотите, как

$('#modal .modal-body').html('Test: '+new Date()); 
$('#modal').modal('show'); 

Демо: Fiddle