Добрый день.
Учебный проект с использованием ajax и jQuery: есть форма, есть код проверки на правильность введённых значений на стороне клиента (используется jquery validate), на submitHandler навешан вызов моей функции, которая перехватывает отсылку post-запроса на сервер.
С помощью $.post получает ответ сервера: это код новой версии этой страницы целиком и я хочу выдернуть часть html-кода из этого ответа и заменить им "устаревшие" элементы на странице.
$(function () {
$("form[action$='/Board/SetNumberOfHands']").validate({
submitHandler: function (form) {
if ($(form).find("input").attr("name") == "numberOfHands")
setNumberOfHands(form);
else if ($(form).find("input").attr("name") == "curHand")
calculateForHand(form);
return false;
},
... });
Сама страница имеет вид:
...
<script src="../../Scripts/jquery-1.4.1.min.js"" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate-vsdoc.js" type="text/javascript"></script>
<script src="../../Scripts/code.js" type="text/javascript"></script>
</head>
<body>
<div id="board">
<div id="hand1" class="hands">
<a...><img... /></a>
</div>
<div id="hand2" class="hands">
<a...><img... /></a>
</div>
<div id="hand3" class="hands">
<a...><img... /></a>
</div>
<div id="hand4" class="hands">
<a...><img... /></a>
</div>
<div id="boardHand" class="hands">
<a...><img... /></a>
</div>
<div id="#errorMsgBox" class="field-validation-error"></div>
</div>
...
<p>
<a href...><!-- ссылка, которую сначала не видно --></a>
<span id="result">
<!-- всякий текст -->
</span>
<span id="numberOfHandsSpan">
Количество игроков:<br />
<!-- тут наша форма -->
</span>
<span id="calcSpan">
... <!-- тут ещё одна форма (не та, post которой сейчас обрабываем) -->
</span>
</p>
Сначала был такой код:
// обрабатываем отсылку формы 'setNumberOfHands'
function setNumberOfHands(form) {
$.post($(form).attr("action"), $(form).serialize(), function (response) {
$("#board").html($(response).find("#board").html());
$("#calcSpan").html($(response).find("#calcSpan").html());
});
}
calcSpan отлично заменялся, но вот board нет: вместо старой структуры вложенных div'ов оставался пустой <div id="board"></div>
Тогда я решил обрабатывать поотдельности (и включил и другие элементы):
// обрабатываем отсылку формы 'setNumberOfHands'
function setNumberOfHands(form) {
$.post($(form).attr("action"), $(form).serialize(), function (response) {
$("#hand1").html($(response).find("#hand1").html());
$("#hand2").html($(response).find("#hand2").html());
$("#hand3").html($(response).find("#hand3").html());
$("#hand4").html($(response).find("#hand4").html());
$("#boardHand").html($(response).find("#boardHand").html());
$("#errorMsgBox").html($(response).find("#errorMsgBox").html());
$("#pack").html($(response).find("#pack").html());
$("#shuffle").html($(response).find("#shuffle").html());
$("#result").html($(response).find("#result").html());
$("#calcSpan").html($(response).find("#calcSpan").html());
});
Всё заработала. До этого пробовал использовать replaceWith:
$("#board").replaceWith(...)
Не работало и для невложенных тэгов.
Проект учебный, поэтому и такая неэффективность: загрузка всей страницы с сервера, прошу не указывать на этот факт, мне важно отработать использование ajax и jquery.
Прошу объяснить причину такого поведения и как наиболее эффективно можно работать со вложенными тэгами в подобных случаях?
Долго рылся в инете, ничего не нашёл, надеюсь на вашу помощь. Спасибо.
