Как вывести данные php скрипта в модальное окно?

Question

[Gorthaur]

Приветствую! Есть форма в модальном окне на bootstrap, которая посылает данные методом POST к обработчику на php, он читает, дает ответ, и его надо вывести обратно в эту форму. Не получается взять ответ и отобразить его в этом модальном окне. Как быть? яваскрипт и аякс я совсем не знаю, на просторах интернета находил подобные решения и подстраивал под себя.
код модального окна:

<div class="modal fade" id="myModal" 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">X</button>
        <h4 class="modal-title" id="myModalLabel">Добавить площадку</h4>
      </div>
<div id="result">
      <div class="modal-body">
      <form method="post" id="forms" action="javascript:void(null);" onsubmit="FormSendOK()">
<table class="table">
<tbody><tr>
<th class="lable">  Адрес:</th>
<td class="input"><input size="50" name="address" type="text"></td>
</tr>
<tr>
<th class="lable">IP-сервера:</th>
<td class="input"><input size="15" name="IP" type="text"></td>
</tr>
<tr>
<th class="lable">  SID:</th>
<td class="input"><input size="15" name="SID" type="text"></td>
</tr>
<tr>
<th class="lable">  Тип площадки: </th>
<td class="input"><select name="tabletype">
<option value="1">Старая</option>
<option value="3" selected="selected">Новая</option>
<option value="4">Сторонняя</option>
<option value="2">Тестовая</option></select></td>
<input type="hidden" name="submit" value="submit" >
</tr>
</tbody>
</table>
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
       <button type="submit" id="submit"  class="btn btn-primary" name="submit" value="submit">Добавить</button>
</form>
</div>
    </div>
  </div>
</div>

Код скрипта

<script>
    var SendContactForm = {
       type: 'POST',
       resetForm: 'true',
       url: 'action3.php',
       success:    function(){
       }
      }
    function FormSendOK() {
        $(\"#forms\").ajaxSubmit(SendContactForm);
        $(\"#result\").html();
     }
</script>

кусок обработчика:

if (count($msg) === 0) {
$answer="Данные добавлены!";
}
print ("$answer");

Comments

[Ivanq]

PHP вы тоже не очень знаете. Сократить код можно в два раза!

echo count($msg)?$answer:"Данные добавлены!";

[Gorthaur]

Ivanq: не могу не согласиться) В print и $answer не было необходимости до модального окна, все выполнялось на другой странице, и после выполнения выводилось на экран с помощью echo.

Answer 1

[Илья Левин]

Видно, что подключен jQuery, при это вы используете ajaxSubmit(), хотя, насколько я знаю, в стандартном jQuery его нет (видимо, это какой-то плагин?). В jQuery для этих целей есть ajax(), а у него, в свою очередь есть callback-функция success(), которая может принимать ответ сервера. Судя по коду, в плагине, который вы используете, тоже есть что-то подобное (функция success в "коде скрипта").
Как бы это выглядело с использованием встроенного функционала jQuery:

1. Вы отправляете запрос на сервер.
   
2. Получаете ответ (success: function(data), где в data - ответ сервера).
   
3. Выводите ответ сервера в необходимый элемент. В случае вашей разметки это может быть "modal-content", тогда будет выглядеть так - $(".modal-content").html(data);
   

Обратите внимание, что делать $(".modal-content").html(data) - плохая практика, так как у вас на странице может быть не один элемент с этим классом. Лучше присвоить блоку, в который будете выводить результат id и обращаться к нему через $("#...").

Comments

[Gorthaur]

Это для меня черная магия) Спасибо большое, получилось!

[Gorthaur]

Ilya Chase : Извиняюсь за назойливость, но как мне в случае успеха нажать кнопку "закрыть" и при новом открытии вновь вывести форму? и в случае с ошибкой поступить идентично(пока что)?

[Илья Левин]

Gorthaur Я бы сделал так:
1. Создал бы на уровне, одинаковым с блоком #result блок #message.
2. При успехе, внутри функции success, заполнял бы ответом сервера блок #result - $("#result").html(data)
3. Скрывал бы #result и показывал бы #message функциями $("#result").hide() и $("#message").show() соответственно. Можно вместо hide и show использовать fadeOut("slow") и fadeIn("slow") для красоты.
4. Повесил бы на кнопку button внутри блока .modal-header обработчик. Для этого присвоил бы элементу button идентификатор (например, id="modal-close-button"), а затем в файле со скриптом объявил сам обработчик - $( "#modal-close-button" ).click(function() {
...
});
5. Внутри обработчика проверял бы, если #result скрыт, то форма отправлялась. Значит, нужно снова скрыть #message, а #result сделать видимым. Выглядело бы примерно так:
if ($("#result").is(":hidden")) {
$("#message").hide();
$("#result").show();
}
В этом обработчике нужно возвращать истину, чтобы отработали другие обработчики (закрытие окна). Весь обработчик выглядел бы так:
$( "#modal-close-button" ).click(function() {
if ($("#result").is(":hidden")) {
$("#message").hide();
$("#result").show();
}
return true;
});

[Илья Левин]

Ах да. В случае с ошибкой срабатывает callback-функция error. Она аналогична success. Так что добавить её и делать в ней то же самое, что и в success.