Размещение данных с помощью Fancybox 2

Я использую форму в данных сообщения окна fancybox (Ajax) на php-странице.

Если я запускаю форму за пределами Fancybox, она работает отлично. Вставить - проверить. Ответ - Проверить. Тем не менее, если я запускаю ту же страницу через Fancybox, я получаю колесо загрузки (которое сохраняется после закрытия оверлея).

введите здесь описание изображения

Форма (form_test.php):

<form id="form" method="post" action="">
    <input type="text" id="name" name="name" value="Test Name" />
    <input type="text" id="email" name="email" value="[email protected]" />
    <input type="submit" value="Login" />
</form>

<script type"text/javascript">
    $("#form").bind("submit", function () {
$.fancybox.showLoading(); // it was $.fancybox.showActivity(); for v1.3.4
$.ajax({
    type: "POST",
    cache: false,
    url: "test.php", // make sure your path is correct
    data: $(this).serializeArray(), // your were using $(form).serialize(), 
    success: function (data) {
        $.fancybox(data);
    }
});
return false;
}); // bind
</script>

PHP (test.php):

$name=$_POST['name'];
$email=$_POST['email'];

$query=mysql_query("INSERT INTO members (firstName,email) VALUES('$name','$email')");
if($query){
    echo "Data for $name inserted successfully!";
}
else{
    echo "An error occurred!";
}

Идеи?


php jquery ajax fancybox-2
person rrfive    schedule 02.03.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Пытаться

$("#form").bind("submit", function () {
    $.fancybox.showLoading(); // it was $.fancybox.showActivity(); for v1.3.4
    $.ajax({
        type: "POST",
        cache: false,
        url: "test.php", // make sure your path is correct
        data: $(this).serializeArray(), // your were using $(form).serialize(), 
        success: function (data) {
            $.fancybox(data);
        }
    });
    return false;
}); // bind

Теперь $.fancybox(data); вернет (внутри fancybox) все, что вы отправили из файла text.php, чтобы вы могли вернуть <div id="message"> из этого файла, например:

if($query){
  echo "<div id='message'>Data for $name inserted successfully!</div>";
} else {
  echo "<div id='message'>An error occurred!</div>";
}
person JFK    schedule 02.03.2013
comment
Вы можете увидеть рабочий пример в этом ответе stackoverflow.com/a/11299547/1055987, который также включает форму и проверку внутри причудливая коробка - person JFK; 02.03.2013
comment
JFK, спасибо за помощь. Думаю, мы добились некоторого прогресса. Я обновил вопрос последним кодом и оставшейся проблемой. Также обратите внимание, что я включил jQuery и Fancybox JS на страницу формы (которая вызывается через Ajax). - person rrfive; 02.03.2013
comment
@rrfive: кажется, что ваш код где-то вызывает ошибку js, отсюда и значок загрузки. Вы видели stackoverflow.com/a/11299547/1055987? делает именно то, что вы хотите - person JFK; 02.03.2013
comment
Я нашел проблему, но нет решения. Я вызываю страницу формы с помощью Ajax, но файл страницы формы хранится в другом месте в структуре папок. Если я перемещаю форму на странице, где я ее открываю, она работает отлично. Если я потяну его, вращается колесо смерти. Я предполагаю, что это несколько сужает его. - person rrfive; 02.03.2013
comment
@rrfive: вот почему я поставил комментарий // make sure your path is correct - person JFK; 02.03.2013