2010-02-16 3 views
3

im загружает внешнюю страницу из оверлея flowplayer и 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> 
+0

У вас нет ошибок на этом компьютере? Это может быть причиной пропустить последнее утверждение «return false». Попробуйте использовать Firebug в режиме «Break On All Errors». – Sergii

ответ

1

Это, как представляется, вызвана тем, что код 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> 

UPDATE: Я бы обернуть все 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> 
+0

спасибо, что сработал !!!! одна вещь в firefox перезагружает страницу ..... любые предложения? – loo

+0

это мой код. пожалуйста, помогите

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>
сценарий SRC = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> $ (документ) .ready (функция() { \t $ («#testForm»). submit (sendForm) }); функция sendForm() { \t $ .post ('mailto_friend.cfm', $ ("# testForm"). Сериализации(), функция (данные, статус) { \t \t $ ("# результат"). HTML (данные); return false; \t}); return false; } – loo

+0

Я опубликовал обновленный код выше. У меня есть работа над Firefox 3.6 на моем компьютере разработки. –