如何进行 Ajax 调用并从内部 Jquery Mobile 页面获取某些类?

发布于 2025-01-07 22:32:03 字数 2937 浏览 0 评论 0原文

我在 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>
...

我现在想使用实验性的 JQM fetchlink 插件根据需要加载行,这样我就可以轻松地设置分页或无尽的表格小部件。

Fetchlink 使用在链接上指定的三个数据属性:
数据目标 = 放置获取的内容的位置
数据方法 = 替换、追加、...
data-fragment = 要加载的内容片段,任何 jquery 选择器

只要我调用的页面不在 DOM 内,这就可以正常工作。问题是一旦子页面位于 DOM 内部,并且我 ajax 调用类似这样的内容:

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

data-fragment 属性不会一起运行,并且我要搜索的片段是一个空的 []。这是来自 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 ) ),

我的问题:
对于内部页面,数据片段似乎不采用任何 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 不起作用(trtr.rows0-100 不匹配。但我不知道该怎么办...

问题:
谁能告诉我我需要做什么,以便能够在 data-fragment 属性上使用常规 jquery 选择器,或者至少让我的行加载(如果我通过 tr.class 指定它们)?

编辑:
看来我只能选择硬编码到 HTML 中的类。因此,如果我向所有表中添加 .dummy 类,我就可以获取 tr.dummy 了。但是,如果我通过 jQuery 添加另一个类(例如 .rows0-100),我无法获取 tr.rows0-100。

编辑2:
看看response = resp,我想我知道出了什么问题。当然,响应仅返回纯 HTML,因此我在页面上动态添加的任何类都不在 ajax 响应内。那么这是否意味着我唯一能做的就是迭代所有表行和 tr:eq(my from_row) 到 tr:eq(to_row) ?一定有更好的办法。

I have a table on a Jquery Mobile site. On loading the page I grab the table rows and create a single or multiple subpages each holding a certain number of rows (0-100,101-200,201-300 and so on).

So I end up with a DOM like this:

 // 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>
...

I now wanted to use the experimental JQM fetchlink plugin to load in rows as needed, so I could easily set up a pagination or endless table widget.

Fetchlink uses three data-attributes to be specified on a link:
data-target = where to put the fetched content
data-method = replace,append,...
data-fragment = what piece of content to load, any jquery selector

This works fine as long as the page I'm calling in is not inside the DOM already. The problem is once the subpage is inside the DOM, and I ajax call something like this:

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

the data-fragment attribute doesn't play along and my fragment to search for is an empty []. Here is the part in question from 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 ) ),

My problem:
For internal pages data-fragment does not seem to take any jquery selector. If I call TR, this returns all rows (0-300), but if I call TR.rows0-100 (each row gets a class like this) the load fragment is empty.

I have consoled this for an afternoon now... if I console:

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

I'm getting all divs like this div#mainpage. If I feed this into the data-fragment, it works. However consoling my table rows:

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

returns this [tr,tr,tr,tr...], so I think I understand why TR.rows0-100 doesn't work (tr does not match tr.rows0-100. But I don't know what to do about it...

Question:
Can anyone tell me what I need to do, in order to be able to use regular jquery selectors on the data-fragment attribute or at least get my rows to load if I specify them by tr.class?

EDIT:
it seems I can only select classes which are hard coded into the HTML. So if I add a class of .dummy to all table wors I can grab tr.dummy allright. However if I add another class by jQuery like .rows0-100 I cannot grab tr.rows0-100.

EDIT-2:
Looking at the response = resp, I think I know what's wrong. Of course the response only returns the plain HTML, so any classes I'm dynamically adding on the page are not inside the ajax-response. So does this mean the only thing I can do is iterate through all table rows and tr:eq(my from_row) to tr:eq(to_row)? there must be a better way.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文