Posting data with Fancybox 2

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).

enter image description here

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?

score 0 · Accepted Answer · answered Mar 02 '13 at 02:59

0

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>";
}

answered Mar 02 '13 at 02:59

JFK

40,963
31
133
306

You can see a working example in this answer http://stackoverflow.com/a/11299547/1055987 which also includes the form and validation within the fancybox – JFK Mar 02 '13 at 03:01
JFK, thanks for your help. I think we've made some progress. I've updated the question with the latest code and remaining issue. Note also that I've included jQuery and Fancybox JS in the form page (which is called through Ajax). – rrfive Mar 02 '13 at 03:22
@rrfive : it seems that your code somewhere triggers a js error hence the loading icon. Did you see http://stackoverflow.com/a/11299547/1055987? does exactly what you want – JFK Mar 02 '13 at 03:25
I've found the problem, no solution however. I'm calling the form page using Ajax, but the form page file is stored elsewhere within the folder structure. If I move the form within the page where I open it, it works perfectly. If I pull it in, spinning wheel of death. I guess that narrows it down somewhat. – rrfive Mar 02 '13 at 03:46
@rrfive : this is why I put the comment `// make sure your path is correct` – JFK Mar 02 '13 at 03:48

Posting data with Fancybox 2

1 Answers1