не срабатывает на второй раз 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

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@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