Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   почему XMLHttpRequest.responseText не преобразуется в JQuery? (https://javascript.ru/forum/misc/35514-pochemu-xmlhttprequest-responsetext-ne-preobrazuetsya-v-jquery.html)

someone 13.02.2013 13:47

почему XMLHttpRequest.responseText не преобразуется в JQuery?
 
Здравствуйте. Пишу 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>&nbsp;</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>&nbsp;</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">&raquo</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.

П.С.: КАК ЗАКАТАТЬ КОДЫ В СПОЙЛЕРЫ?

Deff 13.02.2013 14:00

Засуньте контекст ответа в скрытый div, и там уже в div ищите что нужно, проще использовать, (посколь JQuery),вариант подгрузки load
$("Cелектор куда складываем").load('?page='+page #LoadBlock')
#LoadBlock - пример cелектора подгружаемого блока в подгруженном контенте

Ну или Вариант $.get( url, данные, вызов, тип )

http://jquery-docs.ru/Ajax/

someone 13.02.2013 17:11

Вот у вас написан код с тремя кавычками

('?page='+page #LoadBlock')


это описка или фишка такая? =)

Deff 13.02.2013 17:36

$("Cелектор куда складываем").load('?page=' + page + ' #LoadBlock')

Там жа ссыль есть

someone 13.02.2013 17:43

сделал так
$('li.li_pagin>a').on('click', function() {
        var page = $(this).text().trim(); // номер страницы
        var req_selector = ' div.div_notes';
        $('div.div_notes').load('?page='+page+req_selector);
        })

Спасибо

Deff 13.02.2013 18:06

someone,
Между селектором и URL должен быть пробел

$('div.div_notes').load('?page='+page+' ' +req_selector);

someone 13.02.2013 18:43

Да, я ж читал, он у меня стоит в переменной.


Часовой пояс GMT +3, время: 04:37.