Как сделать вызов Ajax и получить определенные классы с внутренней страницы Jquery Mobile? - PullRequest
Новая
       16

Как сделать вызов Ajax и получить определенные классы с внутренней страницы Jquery Mobile?

1 голос
/ 22 февраля 2012

У меня есть таблица на сайте Jquery Mobile. При загрузке страницы я беру строки таблицы и создаю одну или несколько подстраниц, каждая из которых содержит определенное количество строк (0-100,101-200,201-300 и т. Д.).

Итак, я получаю DOM вроде этого: 

 // main page
 <div data-role="page" id="mainpage">
   <table>
     <tbody class="tableRowDropZone">
       // empty body
     </tbody>
   <table>
</div>
<div data-role="page" id="rows0-100">
    // table rows 0-100
</div>
...

Теперь я хотел использовать экспериментальный плагин fetchlink JQM для загрузки строк по мере необходимости, чтобы я мог легко настроить разбиение на страницы или бесконечный табличный виджет.

Fetchlink использует три атрибута данных, которые должны быть указаны в ссылке:
data-target = куда поместить извлеченный контент
data-method = заменить, добавить, ...
фрагмент данных = какой фрагмент контента загружать, любой селектор jquery

Это прекрасно работает, если страница, на которую я звоню, уже не находится внутри DOM. Проблема в том, что когда подстраница находится внутри DOM, я ajax называю что-то вроде этого: 

<a href="#rows0-100" data-method="replace" data-fragment="tr.rows0-100" data-target=".tableRowDropZone">grab rows</a>

атрибут data-фрагмент не воспроизводится, и мой фрагмент для поиска пустой []. Вот часть вопроса из fetchlink: 

       ...
       // fragment is assigned
       fragment    = self.jqmData( "fragment" ), 
       load     = fragment || ":jqmData(role='page')",           

       targetEl.ajaxStart(function(){
           var $el = $(this);
           $.get( url, function( resp ) {                    
                var rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
                // wrap response in a div and find load 
                // THIS TURNS UP NOTHING on internal pages, because load = []
                var data = $( $("<div/>").append( resp.replace( rscript, "" ) ).find( load ) ),

Моя проблема:
Для внутренних страниц data-фрагмент, похоже, не берет никакого селектора jquery. Если я вызываю TR , это возвращает все строки (0-300), но если я вызываю TR.rows0-100 (каждая строка получает такой класс), фрагмент загрузки будет пустым .

Я утешил это на полдня ... если я утешу: 

 console.log( $( $("<div/>").append( resp.replace( rscript, "" ) ).find( "div" ) ) );

Я получаю все div'ы, как это div # mainpage . Если я передаю это в фрагмент данных, это работает. Однако утешительные строки моей таблицы: 

 console.log( $( $("<div/>").append( resp.replace( rscript, "" ) ).find( "tr") ) );

возвращает это [tr, tr, tr, tr ...] , поэтому я думаю, что понимаю, почему TR.rows0-100 не работает ( tr не соответствует tr.rows0-100 . Но я не знаю, что с этим делать ...

Вопрос:
Может кто-нибудь сказать мне, что мне нужно сделать, чтобы иметь возможность использовать обычные селекторы jquery для атрибута фрагмента данных или, по крайней мере, получить мои строки для загрузки, если я укажу их с помощью tr.class?

EDIT:
Кажется, я могу выбрать только те классы, которые жестко запрограммированы в HTML. Поэтому, если я добавлю класс .dummy ко всем таблицам, я смогу получить tr.dummy. Однако, если я добавлю другой класс с помощью jQuery, например .rows0-100, я не смогу получить tr.rows0-100.

EDIT-2:
Глядя на ответ = респ, думаю, я знаю, что не так. Конечно, ответ возвращает только простой HTML, поэтому любые классы, которые я динамически добавляю на страницу, не находятся внутри ajax-ответа. Значит ли это, что единственное, что я могу сделать, это перебрать все строки таблицы и от tr: eq (my from_row) до tr: eq (to_row)? должен быть лучший способ.

...