Posting data with Fancybox 2 - php

Question

I'm using a form within a fancybox window post (Ajax) data to a php page.
If I run the form outside of the Fancybox it works perfectly. Insert - Check. Response - Check. That said, if I run the same page through the Fancybox I get a loading wheel (which persists after I close the overlay).
Form (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#test.com" />
<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!";
}
Ideas?

Answer 1

Try
$("#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
Now, $.fancybox(data); will return (inside fancybox) whatever you sent from the text.php file so you could return the <div id="message"> from within that file like :
if($query){
echo "<div id='message'>Data for $name inserted successfully!</div>";
} else {
echo "<div id='message'>An error occurred!</div>";
}