не срабатывает на второй раз jQuery ajax[отправка формы]

@znahar · Регистрация: 01.07.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте!

Такой вопрос:

написал программу, которая имитирует систему проверки знаний: на страничке текст вопроса и несколько вариантов ответа.
пытаюсь с помощью аякса(POST запрос) отправлять в фоне данные формы(выбранный ответ)
Нажимаю кнопку Submit и данные уходят на сервер. Там они обрабатываются и приходит текст следующего вопроса и варианты ответа.
Выбираю ответ и нажимаю Submit - данные уходят уже не через аякс - отправка происходит обычным GET_ом и страничка перегружается(обновляется так как обработка происходит кодом, который на этой же странице).
После этого GET_а и вызванного им перегрузки(обновления) страницы аякс снова срабатывает при отправке очередного ответа на вопрос.

Если после первого срабатывания аякса обновить страницу - аякс сработает и второй раз.
Это дает повод предположить, что проблема в "видимости " скрипта?
После того как пришел ответ с сервера, я этот ответ показываю в определенном DIV_е и все, что оказывается за пределами этого DIV_а становится недоступным?

Подскажите пожалуйста, что нужно сделать, чтобы результаты постоянно отправлялись аяксом? Где я не прав?

вот кусочки кода:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/func.js"></script>
<title>Система проверки знаний</title>
</head>
<script type="text/javascript">
$(document).ready(function(){  
           
             $('#myForm').submit(function(){  
                 $.ajax({  
                     type: "POST",  
                     url: "test.htm",  
                     data: "answers="+idr,  
                     success: function(html){  
                         $("#content").html(html); 
alert("ajax!"); 
 
                     }  
                 });  
                 return false;  
             }); 
         }); 
var idr = 0;
</script>
<body >
<div id="content">
<div id="nifty"> 
    <form id="myForm" name="testForm">
        <center>
            <table cellpadding=4 cellspacing=2 border=0>
            <tr>
                <td class="question" colspan="2">${questionList.question}</td>
            </tr>
                <c:forEach items="${answerSet}" var="answer" varStatus="status">
                    <tr >
                    <td width="20">
<input type="radio" name="answers" value="${answer.id}" checked onClick="if(this.checked) {idr=value;}"></td>
<td>
<label>${answer.answer}</label>
</td>
                </tr>
                </c:forEach>
                
            <tr>
                    <td colspan="2" align=center><input type="submit" id="subm" value="Дальше"></td>
            </tr>
            </table>
        </center>
    </form>
</div>
 
</div>
</body>
</html>

Vovan-VE · 19.09.2010, 10:02

Все очень просто. Вот этой строкой

JavaScript
1
$('#myForm').submit(function(){

Вы назначаете обработчик на существующую форму. А затем вот этим

JavaScript
1
2
success: function(html){  
    $("#content").html(html);

Вы эту форму с обработчиком заменяете новой формой. Обработчика onsubmit больше нет.

@znahar · 19.09.2010, 12:53 **[ТС]**

Vovan-VE, не совсем понимаю ход Ваших мыслей..
поясните пожалуйста подробнее.
я не очень силен в jQuery

Vovan-VE · 19.09.2010, 13:04

znahar, Ваша форма находится внутри div id="content". При получении данных Вы в этот content кладете новое содержимое, а старое вместе с формой безвозвратно теряется.
Варианты решения:
1. в строке 19 вместо #content изменять содержимое только внутри #myForm.
2. после изменения содержимого внутри #content (строка 19) для вновь созданной формы снова назначать обработчик, как в строке 13.

@znahar · 19.09.2010, 13:17 **[ТС]**

в строке 19 я вместо

JavaScript
1
$("#content").html(html);

пишу

JavaScript
1
$("#myForm").html(html);

и я так понимаю, что между строками №№ 18 и 22 нужно добавить новый обработчик?
Для этого нужно указать

JavaScript
1
$('#myForm').submit(function());

Vovan-VE · 19.09.2010, 13:33

Сообщение от znahar

и я так понимаю, что между строками №№ 18 и 22 нужно добавить новый обработчик?

Нет, либо то, либо это. Если #content исправили на

JavaScript
1
$("#myForm").html(html);

то должно теперь работать.

@znahar · 19.09.2010, 22:54 **[ТС]**

Если #content исправиnm на

JavaScript
1
$("#myForm").html(html);

то новое окошко с вопросом и ответами показывается поверх старого, но немножко выше, так что не
видно самого вопроса и ответов.

я сделал вот так:

JavaScript
1
$('#myForm').live('submit',function(){

теперь у меня отправка происходит в фоне - все как и должно быть.
Хоть теперь и работает у меня как и должно быть, хотелось бы узнать как реализовать Ваш вариант №2:

2. после изменения содержимого внутри #content (строка 19) для вновь созданной формы снова назначать обработчик, как в строке 13.

и есть еще один вопрос:

добавил ещё таймер(в отдельном div'е обратный отсчет) и кнопочку, нажав на которую этот div с убывающими
числами красиво "уплывают".
Но когда нажимаю на кнопочку "Дальше", появляется новый вопрос, новые ответы -- так и должно быть + НОВАЯ кнопочка "Таймер" - почему она появляется?
Если нажать на F5 - "лишняя кнопочка Таймер" исчезает.
Ведь в обработчике я по сути загружаю новые данные только в

JavaScript
1
<div id="content">

Ссылку не могу дать, так как сижу на диалАп (
Код :

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/func.js"></script>
<title>Система проверки знаний</title>
</head>
<script type="text/javascript">
 
 
$(function()
{
 
$("#timer_btn").click(function(event) {
event.preventDefault();
$("#div1").slideToggle();
});
 
 
});
 
$(document).ready(function(){  
    
    $('#myForm').live('submit', function(){  
        var idr = getCheckedValue(document.forms['testForm'].elements['answers']);
        $.ajax({ 
            type: "POST",  
            url: "test.htm",  
            data: "answers="+idr,  
        success: function(html){  
                $("#content").html(html); 
        }  
        });  
        return false;  
    }); 
}); 
 
</script>
<body >
<div id="div_timer_btn">
<input type="button" id="timer_btn" value="Таймер">
</div>
<div id="div1">
<span id="span"></span>
</div>
<div id="content">
 
 
<div id="nifty"> 
    <form id="myForm" name="testForm">
        <center>
            <table cellpadding=4 cellspacing=2 border=0>
            <tr>
                <td class="question" colspan="2">${questionList.question}</td>
            </tr>
                <c:forEach items="${answerSet}" var="answer" varStatus="status">
                    <tr >
                    <td width="20">
<input type="radio" name="answers" value="${answer.id}" checked "></td>
<td>
<label>${answer.answer}</label>
</td>
                </tr>
                </c:forEach>
                
            <tr>
                    <td colspan="2" align=center><input type="submit" id="subm" value="Дальше"></td>
            </tr>
            </table>
        </center>
    </form>
</div>
 
</div>
<script> 
<!-- 
// 
 var milisec=0 
 var seconds=60
 
function display(){ 
 if (milisec<=0){ 
    milisec=9 
    seconds-=1 
 } 
 if (seconds<=-1){ 
    milisec=0 
    seconds+=1 
    gg()
 } 
 else 
    milisec-=1 ;
    document.getElementById('span').innerHTML=seconds;
    setTimeout("display();",100) 
} 
display() 
--> 
</script>
</body>
</html>

поэтому вот картинки:
До:
[IMG]http://i.***********/i5/83/50/505083/1_500.jpg[/IMG]

После ответа на вопрос:

[IMG]http://i.***********/i5/02/52/505202/2__500.jpg[/IMG]

Vovan-VE · 20.09.2010, 15:34

Так Вам теперь надо подправить тО, что выдает test.htm

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@znahar 25 / 25 / 14 Регистрация: 01.07.2010 Сообщений: 59
	19.09.2010, 12:53 [ТС]
	Vovan-VE, не совсем понимаю ход Ваших мыслей.. поясните пожалуйста подробнее. я не очень силен в jQuery 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	19.09.2010, 13:04
	znahar, Ваша форма находится внутри div id="content". При получении данных Вы в этот content кладете новое содержимое, а старое вместе с формой безвозвратно теряется. Варианты решения: 1. в строке 19 вместо #content изменять содержимое только внутри #myForm. 2. после изменения содержимого внутри #content (строка 19) для вновь созданной формы снова назначать обработчик, как в строке 13. 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	20.09.2010, 15:34
	Так Вам теперь надо подправить тО, что выдает test.htm 0