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

回答

相關問題