jquery overlay ajax form post

即时从流式播放器叠加从外部页面加载和im试图通过ajax提交一个窗体在该页面，并重新加载页面。jquery overlay ajax form post

当我直接浏览文件时，它可以正常工作，但是当它在覆盖图中重新加载提交页面时。

有没有什么配置，它会加载jquery文件，并通过AJAX提交？

感谢

这是代码

<html> 
<head> 

<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> 
<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>

这是确切的代码，它有现成的功能

<div id="result"> 
<form id="testForm" >my data 
</form> 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<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>

来源

2010-02-16 loo

您确定你没有JavaScript错误吗？这可能是跳过上一个“return false”语句的原因。尝试在“断开所有错误”模式下使用Firebug。 – Sergii 2010-02-16 10:04:25

这似乎是由具有前调用的jQuery代码引起的HTML已准备就绪。

如果您将脚本移动到HTML文件的底部，它将正常工作。

或者，您可以使用jQuery .ready() method延迟执行。

<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"></script> 
<script> 
$(function(){ 
    $("#JqAjaxForm").submit(function(){ 
    // your script code 
    return false;    

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

更新：我包装所有的JavaScript文档准备功能，使之延迟执行，直到DOM已准备就绪。如果没有mailto_friend.cfm文件，我无法进一步测试。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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"></script> 
<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>

来源

2010-02-16 15:31:16

谢谢你的工作！有一件事在Firefox中重新加载页面.....任何建议？ – loo 2010-02-17 02:59:31

这是我的代码。请帮助

form id="testForm" > From: input type="text" name="from">
To: input type="text" name="to">
Message: input type="text" name="message">
\t input type="submit" name="send" value="Save" /> /form>

script src =“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”> $（document）.ready（function（）{ \t $（ “#testForm”）。submit（sendForm） }）; 功能sendForm（）{ \t .post的$（ 'mailto_friend.cfm'，$（ “＃了testForm”）。序列化（），功能（数据，状态）{ \t \t $（ “＃结果”）。HTML （data）; return false; \t}）; 返回false; } – loo 2010-02-17 03:23:33

我上面发布了更新的代码。我在开发电脑上使用Firefox 3.6。 – 2010-02-17 16:29:20

jquery overlay ajax form post

回答

相关问题