views:

748

answers:

1

im loading a external page from flowplayer overlay and im trying to submit a form in that page via ajax, and its reloading the page.

when i browse the file directly it works fine but when its in the overlay it reloads the page on submit.

is there anything to configure that it will load the jquery file and submit via ajax?

thanks

this is the code

<html>
<head>

<script src="http://code.jquery.com/jquery-1.4.1.min.js"&gt;&lt;/script&gt;
<script>
$(function(){
 $("#JqAjaxForm").submit(function(){
    dataString = $("#JqAjaxForm").serialize();

    $.ajax({
    type: "POST",
    url: "mailto_friend.cfm",
    data: dataString,
    dataType: "json",
    success: function(data) {

        if(data.email_check == "invalid"){
            $("#message_ajax").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>");
        } else {
            $("#message_ajax").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>");
        }

    }

    });

    return false;            

    }); 
 });
 </script>
 </head>
 <body>
<form id="JqAjaxForm">
 <fieldset>
 <legend>jQuery.ajax Form Submit</legend>
 <p><label for="name_ajax">Name:</label><br />
 <input id="name_ajax" type="text" name="name_ajax" /></p>
<p><label for="email_ajax">E-mail:</label><br />
<input id="email_ajax" type="text" name="email_ajax"  /></p>
<p> <input type="submit" value="Submit" /></p>
</fieldset>
</form>
<div id="message_ajax"></div>
</body>
</html>

this is the exact code and it has the ready function

<div id="result">
<form id="testForm" >my data
</form> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
<script> 
$(document).ready(function() {
$("#testForm").submit(sendForm)
});

function sendForm() {
$.post('mypage.cfm',$("#testForm").serialize(),function(data,status){
    $("#result").html(data);
         return false;

});
 return false;
}

</script> 
+1  A: 

It appears to be caused by having the jQuery code invoked before the HTML is ready.

If you move your script to the bottom of the HTML file it will work fine.

Alternately, you can use the jQuery .ready() method to delay execution.

<html>
<head>
</head>
<body>
<form id="JqAjaxForm">
    <!-- your form -->
</form>
<div id="message_ajax"></div>

<!-- javascript should be loaded at the bottom of the page for best results -->
<script src="http://code.jquery.com/jquery-1.4.1.min.js"&gt;&lt;/script&gt;
<script>
$(function(){
    $("#JqAjaxForm").submit(function(){
    // your script code
    return false;            

    }); 
});
</script>
</body>
</html>

UPDATE: I'd wrap all the javascript in the document ready function so that it delays execution until the DOM is ready. I cannot test further without the mailto_friend.cfm file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

<div id="result">
<form id="testForm">
From: <input type="text" name="from"><br/>
To: <input type="text" name="to"><br/>
Message: <input type="text" name="message"><br/>
<input type="submit" name="send" value="Save" />
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
<script>
   $(document).ready(function() {
   $("#testForm").submit(sendForm);

   function sendForm() {
       $.post('mailto_friend.cfm',
           $("#testForm").serialize(),
           function(data,status){
               $("#result").html(data);
       });
   alert("I am working");
   return false;
   }
});
</script>
</body>
</html>
Dan Sorensen
thanks that worked!!!!one thing in firefox it reloads the page..... any suggestions??
loo
this is my code. please help<div id="result">form id="testForm" >From: input type="text" name="from"><br/> To: input type="text" name="to"><br/> Message: input type="text" name="message"><br/> input type="submit" name="send" value="Save" />/form> </div> script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>$(document).ready(function() { $("#testForm").submit(sendForm)});function sendForm() { $.post('mailto_friend.cfm',$("#testForm").serialize(),function(data,status){ $("#result").html(data); return false; }); return false;}
loo
I've posted updated code above. I have it working on Firefox 3.6 on my development pc.
Dan Sorensen
thanks i updated firefox and it worked!!!!! is there anything i can do to make it work for a previous version??? or is everyone updating!!?!???!... but thanks for this so far!
loo
Firefox is good about bugging people to upgrade. However, I think if your javascript is bug free, it should work in all recent versions of the browser. Use Firefox's firebug plugin to help debug the javascript.
Dan Sorensen