Здравствуйте!
есть такая проблема:
Сначала вступление:
написал приложение имитирующее проверку знаний. По-простому -
это страничка с вопросом и несколькими вариантами ответов.
обмен данными с сервером происходит с помощью ajax'а.
вот кусок контроллера, который формирует вопрос и варианты ответа:
| Код |
public ModelAndView test(HttpServletRequest request,
HttpServletResponse response) throws Exception {
.......
ModelMap modelMap = new ModelMap();
modelMap.addAttribute("questionList",
questionDAO.listQuestion().get(questionSize.getQuestionSize()));
modelMap.addAttribute("question", new Question());
modelMap.addAttribute("answerSet",
questionDAO.listQuestion().get(questionSize.getQuestionSize()).getQuestionAnswers());
modelMap.addAttribute("answer", new Answer());
return new ModelAndView("test", modelMap);
}
|
вот test.jsp:
| Код |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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">
// кнопка "Таймер" показывает и прячет DIV с обратным отсчетом
$(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>
|
после выбора варианта ответа я нажимаю на кнопочку "Дальше", данные уходят в ajax'е на
контроллер, где готовится новый вопрос и ответы и возвращается результат(у меня
получается это | Код | return new ModelAndView("test", modelMap); |
"запихывается" в как следует из результата успешного выполнения ajax'а | Код | success: function(html){
$("#content").html(html); |
После всех этих действий у меня на сранице появляется вторая кнопочка "Таймер".
Одна из них активная - позволяет прятать и показывать DIV c обратным отсчетом, другая
же ни на какие действия не отзывается и исчезает если обновить страницу.
Как можно сделать, чтобы эта "мнимая" кнопка не появлялась?
вот картинки:
До нажатия на "Дальше":
После ответа на вопрос:
Я думаю, что кнопка появляется из-за того, что у меня в контейнер "запихывается" все содержимое страницы test включая доктайпы, стили, скрипты.
а нужно сделать наверное чтобы туда писалась только лишь форма.
если это так, подскажите, как можно реализовать это.. |