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

vovs

Дата 18.9.2010, 20:59 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 22.9.2006
Где: Черкассы

Репутация: нет
Всего: нет

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

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

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

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

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

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

Код


<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>

ksnk

Дата 18.9.2010, 22:01 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

Попробуй так написать:

Цитата

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

Проблема в том, установка обработчика делается один раз после загрузки страницы. А после получения ответа вся форма перезаписывается.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

vovs

Дата 19.9.2010, 12:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 22.9.2006
Где: Черкассы

Репутация: нет
Всего: нет

2ksnk

Спасибо! Теперь аякс работает!
Хочу только уточнить:
http://api.jquery.com/live/ - здесь прочел, что

Код


.live()

связывает событие с обработчиком.

Но ведь даже добавив

Код

.live()

форма у меня все-равно перезаписывается.
Почему в этом случае не теряется связь между обработчиком и событием?

или

Код

.live()

делает "жесткое" связывание, которое повторяется после каждой новой загрузки формы???

vovs

Дата 19.9.2010, 12:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 22.9.2006
Где: Черкассы

Репутация: нет
Всего: нет

Еще есть вопрос:
при первом проходе вопросов - все нормально. все подгружается аяксом в фоне.
после всех вопросов попадаем на страничку с результатами тестирования и кнопочкой,
по которой можно начать сначала тестирование.
Кнопочка - это редирект на страничку с тестами.
Так вот, после этого редиректа аякс уже не работает.

при каждом ответе на вопрос все отправляется GET_ом и страница каждый раз перегружается...
странное поведение...
почему аякс срабатывает только при первом проходе?

ksnk

Дата 19.9.2010, 15:02 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

.live - запоминает для нужного селектора нужную функцию. Тоесть после выполнения этой функции где-то во глубине jquery останется конструкция из селектора, события и функции, которую нужно подвесить на это событие. После каждого изменения dom'а ajax'om все эти конструкции перебираются и селектор применяется к вновьпоставденному куску дома. Так что событие "ставится" один раз, но возобновляется по каждому изменения Dom'а.
Это если на пальцах объяснять. За деталями - к описанию live и исходникам jQuery ;)

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

vovs

Дата 19.9.2010, 19:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 22.9.2006
Где: Черкассы

Репутация: нет
Всего: нет

спасибо за пояснение.

А что Вы можете сказать по второму вопросу?
Почему-то ajax срабатывает только при первом проходе - запустил сервер(в данном случае Tomcat),
перешел в браузере на страницу с тестами, прошел вопросы(отправка и получение идет в фоне. ajax работает),
попадаю на страницу с результатами, нажимаю на кнопку повторить тестирование и REDIRECT'юсь на страницу с тестами.
и тут опять начинается обычный GET... ajax'а будто и не бывало...

ksnk

Дата 19.9.2010, 20:36 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 38
Всего: 386

vovs, На слух, без кода ловить ошибки? Я не настолько просветлен smile

Нужно сделать какой-то тестовый пример и выложить куда-нибудь, иначе гадать можно неограниченно долго.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

vovs

Дата 19.9.2010, 21:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 22.9.2006
Где: Черкассы

Репутация: нет
Всего: нет

ksnk, спасибо за ваш совет. С аяксом уже разобрался.

Есть ещё вопрос, может Вы поможете?

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

Код

<div id="content">

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

Код


<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>

поэтому вот картинки:
До:
user posted image

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

user posted image

Это сообщение отредактировал(а) vovs - 19.9.2010, 21:47

iluvatar

Дата 20.9.2010, 16:38 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 266
Регистрация: 17.9.2007

Репутация: нет
Всего: 4

vovs, я вам все описал в другой вашей теме.
Зачем вы делаете велосипед?

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »