jquery оверлей формы ajax сообщение

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

overlay jquery coldfusion
person loo    schedule 16.02.2010    source источник
comment
Вы уверены, что у вас нет ошибок JavaScript? Это может быть причиной пропуска последнего оператора return false. Попробуйте использовать Firebug в режиме Break On All Errors.   -  person Sergey Galashyn    schedule 16.02.2010

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, это вызвано тем, что код 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>
person Dan Sorensen    schedule 16.02.2010
comment
спасибо сработало!!!! одна вещь в firefox перезагружает страницу..... есть предложения?? - person loo; 17.02.2010
comment
это мой код. пожалуйста, помогите‹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=ajax.googleapis.com/ajax/libs/jquery/1/› $(document).ready(function() { $(# testForm).submit(sendForm) }); function sendForm() { $.post('mailto_friend.cfm',$(#testForm).serialize(),function(data,status){ $(#result).html(data); return false; }); вернуть ложь; } - person loo; 17.02.2010
comment
Я разместил обновленный код выше. У меня он работает на Firefox 3.6 на моем компьютере для разработки. - person Dan Sorensen; 17.02.2010
comment
спасибо я обновил firefox и все заработало!!!!! есть ли что-нибудь, что я могу сделать, чтобы заставить его работать для предыдущей версии??? или все обновляются!!!?!???!... но пока спасибо за это! - person loo; 17.02.2010
comment
Firefox хорош тем, что заставляет людей обновляться. Однако я думаю, что если ваш javascript не содержит ошибок, он должен работать во всех последних версиях браузера. Используйте плагин Firefox firebug для отладки javascript. - person Dan Sorensen; 17.02.2010