jqtouch移动应用程序ajax加载问题
我在
但是我将离开这篇文章以了解详细信息。谢谢。
我有一个 RSS 阅读器应用程序，用作学习的游乐场。它当前的化身是用于学习 jqtouch/移动应用程序的内容。我在动态加载帖子时遇到问题，因为 jqtouch 接管了“a”并对其进行了处理。
大致流程如下：
- Page loads general html (this is very basic, a couple of empty divs
between the body tags) and a link to the reader
- when the document is ready, the first thing that fires is
an ajax call that gets a list of the blogs I'm following that
have unread posts and appends it to the proper divs
- when I click the link to the reader, all the blog titles are there
- I click a blog title and it is to load all of the unread posts
问题是，jqtouch & iui 似乎都迫使您使用“a”标签在页面/卡片之间移动，并且我想根据需要动态加载博客文章，以提高速度（最终我将实现清单和本地存储）。对于我想做的事情，使用 JSON 加载它很重要。我想让这尽可能快速和高效。我更喜欢将点击绑定/实时到 div 而不是“a”，这样除了跳转到新页面/卡之外，我还可以通过点击执行更多操作。
这是 HTML 部分：
<body>
<div id="home">
<h1>TERSE</h1>
<ul>
<li><a href="#feeds">teRSSe</a></li>
</ul>
</div>
<div id="feeds">
Loading, please wait ...
</div>
</body>
这是页面加载时触发的内容：
$(document).ready(function()
{
// onload
$.ajax({
type: 'GET',
url: '/ajax/feeds',
dataType: 'json',
success: function(data)
{
append_feeds(data);
},
async: true
});
// ...
这是添加提要标题的函数：
function append_feeds(data)
{
var feeds = '';
// loop 1, add the links that will be shown in the main feeds block
for ( i=0; i<data.length; i++ )
{
var this_data = data[i];
if ( this_data.unread == 0 )
{
continue;
}
feeds = feeds+'<li title="'+this_data.title+'" class="feed-list" id="'+this_data.id+'">\n';
feeds = feeds+ '<a id="'+this_data.hid+'" href="#feed-'+this_data.id+'">'+this_data.title+' ('+this_data.unread+' unread)</a>\n';
feeds = feeds+'</li>\n';
}
$('#feeds').html('<div id="toolbar">\n<h1>RSS</h1>\n<a class="button back" href="#">Back</a>\n</div>\n<ul title="RSS" id="feedul">\n'+feeds+'</ul>\n');
// loop 2; 2nd time around to create pages/cards for each blog
// this is where the individual posts will load when the blog
// title is clicked
for ( i=0; i<data.length; i++ )
{
var this_data = data[i];
if ( this_data.unread == 0 )
{
continue;
}
var A = '<div id="feed-'+this_data.id+'">\n';
A = A + ' <h1>'+this_data.title+'</h1>\n';
A = A + ' <ul id="'+this_data.hid+'" title="'+this_data.title+'">\n';
A = A + ' <li id="load-'+this_data.id+'" class="load">loading '+this_data.title+' ...</li>\n';
A = A + ' </ul>\n';
A = A + '</div>\n';
$('body').append(A);
}
}
现在，我们有了基本的 html，append_feeds() 已经用标题填充了一堆 div/uls +我关注的博客的未读数。此外，我还设置了其他 div 作为链接的目标，每个博客一个。这些是“页面”或“卡片”。
但是，当我单击博客标题时，我想首先使用 ajax/json 获取单个博客的所有帖子，然后更新正确的 feed 的 div，并加载页面/卡片（基本上是 jqtouch 和 iui 拉出）与 href="" 中的哈希 ID 匹配的 div。
我尝试过绑定/实时点击/点击事件，但 jqt/iui 似乎接管了呼叫。我会完全跳过“a”标签，只将点击绑定到“li.post”或其他东西，但 jqtouch 不会将其识别为点击。它似乎只想允许我使用实际链接作为点击事件。
I simplified this question at
SIMPLIFIED: jqtouch mobile app ajax loading issue
But am leaving this post for details. Thanks.
I have an RSS Reader app I use as a playground to learn. It's current incarnation is for learning about jqtouch/mobile app stuff. I'm having a problem dynamically loading the posts because jqtouch takes over the 'a' and does stuff with it.
Here's the general process:
- Page loads general html (this is very basic, a couple of empty divs
between the body tags) and a link to the reader
- when the document is ready, the first thing that fires is
an ajax call that gets a list of the blogs I'm following that
have unread posts and appends it to the proper divs
- when I click the link to the reader, all the blog titles are there
- I click a blog title and it is to load all of the unread posts
The problem is, jqtouch & iui both seemingly force you to use an "a" tag to go between pages/cards and I want to dynamically load the blog posts as they are needed, for speed (and eventually I will be implementing a manifest and localStorage). For what I want to do, it's important that I load it with JSON. I want to make this as fast and efficient as possible. I'd prefer to bind/live a click to a div not an "a" which would give me the ability to do a lot more with the click besides just jumping to the new page/card.
Here's the HTML portion:
<body>
<div id="home">
<h1>TERSE</h1>
<ul>
<li><a href="#feeds">teRSSe</a></li>
</ul>
</div>
<div id="feeds">
Loading, please wait ...
</div>
</body>
Here's what is fired when the page loads:
$(document).ready(function()
{
// onload
$.ajax({
type: 'GET',
url: '/ajax/feeds',
dataType: 'json',
success: function(data)
{
append_feeds(data);
},
async: true
});
// ...
This is the function that adds in the feed titles:
function append_feeds(data)
{
var feeds = '';
// loop 1, add the links that will be shown in the main feeds block
for ( i=0; i<data.length; i++ )
{
var this_data = data[i];
if ( this_data.unread == 0 )
{
continue;
}
feeds = feeds+'<li title="'+this_data.title+'" class="feed-list" id="'+this_data.id+'">\n';
feeds = feeds+ '<a id="'+this_data.hid+'" href="#feed-'+this_data.id+'">'+this_data.title+' ('+this_data.unread+' unread)</a>\n';
feeds = feeds+'</li>\n';
}
$('#feeds').html('<div id="toolbar">\n<h1>RSS</h1>\n<a class="button back" href="#">Back</a>\n</div>\n<ul title="RSS" id="feedul">\n'+feeds+'</ul>\n');
// loop 2; 2nd time around to create pages/cards for each blog
// this is where the individual posts will load when the blog
// title is clicked
for ( i=0; i<data.length; i++ )
{
var this_data = data[i];
if ( this_data.unread == 0 )
{
continue;
}
var A = '<div id="feed-'+this_data.id+'">\n';
A = A + ' <h1>'+this_data.title+'</h1>\n';
A = A + ' <ul id="'+this_data.hid+'" title="'+this_data.title+'">\n';
A = A + ' <li id="load-'+this_data.id+'" class="load">loading '+this_data.title+' ...</li>\n';
A = A + ' </ul>\n';
A = A + '</div>\n';
$('body').append(A);
}
}
By now, we have the basic html, and append_feeds() has stuffed a bunch of divs/uls with the titles + num_unread of the blogs I am following. In addition, I've set up other divs to be the target of the links, one for each blog. These are "pages" or "cards".
But, when I click on the title of the blog, I want to 1st grab all of the posts for the single blog using ajax/json, then update the proper feed's div, and load the page/card (basically jqtouch and iui pull out the div matching the ID of the hash in the href="").
I've tried bind/live to the click/tap events but jqt/iui seemlingly take over the call. I would skip the "a" tag altogether and just bind a click to "li.post" or something, but jqtouch doesn't recognize it as a click. It seems to only want to allow me to use actual links as click events.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我刚刚经历了您正在经历的事情。您需要将该 XML 转换为 JSON 对象，该对象将编号为 [0]、[1] 等。
这个 JQuery 插件可以工作并且非常出色 : http://www.fyneworks.com/jquery/xml-到-json/
将该 JS 添加到您的应用程序中。然后，解析 XML 函数会将所需的 XML 节点（如通道内的项目节点）转换为 JSON 对象，然后对项目进行编号。
那么看看我如何清空当前的项目列表，构建项目列表，并向具有“sun”类的列表项目添加自定义 CLICK 函数（我喜欢 jquery）。然后该函数会将其父节点标题和 desc 添加到需要它的 div 中。 href 会将其推送到新的 jqtouch DIV，该 DIV 将处理所有详细信息。酷吧？如果这有效的话请投票给我。它对我来说确实如此，就像一种魅力。
I just went through what you are going through. You need to turn that XML into JSON objects, which will be numbered [0],[1], etc.
This JQuery plugin works and rocks : http://www.fyneworks.com/jquery/xml-to-json/
Add that JS to your app. Your parse XML function will then convert the XML nodes you want (like item nodes within a channel) into JSON objects and then numbers the items.
So look how I then empty the current list of items, build a list of the items and add a custom CLICK function to the list items with a class of "sun" (i love jquery). That function then will add it's parent node title and desc to the divs that need it. The href will push it to the new jqtouch DIV which will handle all the detail info. Cool 'eh? Vote me up if this works. It did for me, like a charm.