JQuery Наложение AJAX формы сообщения - PullRequest
Новая
       5

JQuery Наложение AJAX формы сообщения

3 голосов
/ 16 февраля 2010

Я загружаю внешнюю страницу из оверлея flowplayer, и я пытаюсь отправить форму на этой странице через ajax и перезагружать страницу.

когда я просматриваю файл напрямую, он работает нормально, но когда он находится в оверлее, он перезагружает страницу при отправке.

Есть ли что-нибудь для настройки, чтобы он загружал файл 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>

1 Ответ

1 голос
/ 16 февраля 2010

Кажется, это вызвано тем, что код jQuery вызывается до того, как HTML будет готов.

Если вы переместите свой скрипт в конец HTML-файла, он будет работать нормально.

В качестве альтернативы вы можете использовать метод jQuery .ready () для отсрочки выполнения. 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...