Здравствуйте. Пишу ajax запрос в механизме пагинации страниц. Т.е. хочу по нажатию номера определённой страницы замещать некоторое содержимое страницы новым из ответа сервера=)
Сам запрос работает, ответ возвращается. Теперь думаю, как реализовать замещение текущей html разметки нужного блока
<div class="row div_notes"> на определенную часть разметки из ответа сервера(возвращается вся страница).
Насколько я знаю JQuery позволяет создавать объект из строки с html разметкой. Исходя из этого, я вставляю текст ответа сервера в функцию
$(xrequest.responseText), но никак не могу с ним дальше работать. Видимо делаю что-то не так...
вот разметка, с которой работаю:
<div class="row div_notes">
<div class="span12 offset1">
<p><i class="icon-ok"></i> JS/JQuery фильтрация
<span class="pull-right">
09.02.2013 |
<small>09.02.2013</small></span>
</p>
<p>Сделать фильтрацию по категориям на клиенте.</p>
<div class="row"><div class="span6 pull-right">
<pre class="pre_purple"><small><strong>Сделано подключение обработчика события click по ссылке категории после загрузки документа $(function() ....). Старый функционал запросов из шаблона и представления пока не удалил???</strong></small></pre>
</div></div>
<h6>
<a href="/notes/25/edit/" class="btn btn-info lead">Edit</a>
<a href="/notes/25/delete/" class="btn pull-right btn-mini btn-danger">delete</a>
</h6>
<hr>
</div>
</div>
<div class="row div_notes">
<div class="span12 offset1">
<p>JS/JQuery чат
<span class="pull-right">
09.02.2013 |
<small>09.02.2013</small></span>
</p>
<p>Запилить чат(django-chat), как отдельную вкладку для авторизованных пользователей.</p>
<p> </p>
<h6>
<a href="/notes/26/edit/" class="btn btn-info lead">Edit</a>
<a href="/notes/26/delete/" class="btn pull-right btn-mini btn-danger">delete</a>
</h6>
<hr>
</div>
</div>
<div class="row div_notes">
<div class="span12 offset1">
<p>Разобраться с полуь ImageField
<span class="pull-right">
01.02.2013 |
<small>01.02.2013</small></span>
</p>
<p>Подключить его sorl thumbnail</p>
<h6>
<a href="/notes/23/edit/" class="btn btn-info lead">Edit</a>
<a href="/notes/23/delete/" class="btn pull-right btn-mini btn-danger">delete</a>
</h6>
<hr>
</div>
</div>
<div class="row div_notes">
<div class="span12 offset1">
<p>Перевод
<span class="pull-right">
01.02.2013 |
<small>01.02.2013</small></span>
</p>
<p>Не переводится поле TEXT в заметках</p>
<p> </p>
<h6>
<a href="/notes/24/edit/" class="btn btn-info lead">Edit</a>
<a href="/notes/24/delete/" class="btn pull-right btn-mini btn-danger">delete</a>
</h6>
<hr>
</div>
</div>
<div class="row">
<div class="span12 offset1">
<div class="pagination pagination-centered">
<ul>
<li class="li_pagin"><a href="#1">1</a></li>
<li class="li_pagin"><a href="#2">2</a></li>
<li class="li_pagin"><a href="#3">3</a></li>
<li class="li_pagin"><a href="#4">4</a></li>
<li class="li_pagin"><a href="#5">5</a></li>
<li class="li_pagin"><a href="?page=2">»</a></li>
</ul>
</div>
</div>
</div>
вот скрипт:
$(function() { // зарегистрировать после загрузки странички
$('li.li_pagin>a').on('click', function() {
var xrequest = new XMLHttpRequest();
var page = $(this).text(); // номер страницы
xrequest.onreadystatechange=function() {
if (xrequest.readyState==4 && xrequest.status==200) {
var response = xrequest.responseText;
/ alert($(response).text()); //не хочет преобразоввывать response в JQuery объект, пробовал разные методы
// $('div.div_notes').html(response); // тут замещение происходит
}
}
xrequest.open('GET', '?page='+page, true);
xrequest.send();
})
})
Как преобразовать ответ сервера xrequest.responseText в объект JQuery?? Наверно есть иной путь через JSON, но с ним я пока совсем не умею работать. Я- backend.
П.С.: КАК ЗАКАТАТЬ КОДЫ В СПОЙЛЕРЫ?
