所以,我在 phonegap+jqm 应用程序上工作了一段时间。我一直在用我的安卓手机、一个黑莓模拟器(os7)和一个黑莓设备(os5)进行测试。我的应用程序只是使用 ajax 调用从 Web 服务中获取一些数据,并使用这些数据动态创建一些页面,其唯一目的是显示该数据。
工作原理:Ajax 调用成功并且检索到的数据符合预期。还正确应用了 jqm 样式(通过使用通常的触发器“创建”和“刷新”)。整个应用程序在我的 android 设备和带有 os7 的 bb 模拟器中运行良好。
什么不起作用:动态创建和附加的元素永远不会显示,而是旧元素(应该已经被删除)保留在那里。仅当使用 os5 使用 bb 进行测试时才会发生这种情况。
现在,一些代码。在触发 ajax 调用时,我使用了几个函数来完成所有工作。这是每个或页面的标准程序:
当从调用中接收到数据时,响应将传递给特定的处理程序,该处理程序执行从响应中获取数据的工作:
function processListElements(response){
alert("processListElements Start"); // THIS IS EXECUTED
$('#anagTableList li[data-role="button"]').remove();
$(response).find('return').each(function(){
alert("inside responseFind"); // THIS IS NEVER SHOWN
var myNewLI=getFormattedLI($(this).find('codice').text(),$(this).find('responsabile').text());
$('#anagTableList').append(myNewLI).listview('refresh');
});
$('#tablePage').trigger('create');
$('#anagTableList').listview('refresh');
alert("processListElements End"); // THIS IS SHOWN!
}
如您所见,新项目是使用另一个函数创建的,该函数正确格式化元素:
function getFormattedLI(codice,responsabile){
var myFormattedLI = '<li data-role="button" data-icon="arrow-r" data-iconpos="right">'+
'<p>'+codice+' - '+responsabile+'<\/p>'+
'<\/li>';
return myFormattedLI;
}
最后,这是此页面的标记:
<div id='tablePage' data-role="page">
<div data-theme="a" data-role="header">
<h1 >Commesse Tigre</h1>
</div><!-- /header -->
<ul id='anagTableList' data-filter="true" data-theme="a" data-role="listview" data-inset="true">
<a href="#" id="advancedSearch" data-theme="c" style="color:#FF8C90;text-decoration:none">advanced search</a>
<li id='tableHeader' data-role="header">CODICE - RESPONSABILE - ANNO</li>
</ul>
<div data-theme="a" data-role="footer">
<div class="ui-grid-b">
<div class="ui-block-a"><a href="#" id="pageLeft" data-role="button" data-icon="arrow-l" data-iconpos="notext" style="margin-top:7px;">Previous page</a></div>
<div class="ui-block-b" style="text-align:center;margin-top:15px;">Page<p id='currentPage' style="display:inline">1</p> of <p style="display:inline" id='totalPages'>2</p></div>
<div class="ui-block-c"><a href="#" id="pageRight" data-role="button" data-icon="arrow-r" data-iconpos="notext" style="float: right;margin-top:7px;">Next page</a></div>
</div><!-- /footer -->
</div>
那么,为什么我更改页面时没有显示我的新列表项?难道我做错了什么?
非常感谢任何帮助,我已经为此苦苦挣扎了一段时间,但找不到任何解决方案。另外,很抱歉这个长问题:)
编辑 1:这么久以来,我都尝试将我的所有 jquery 函数更改为纯 javascript。什么都没有改变(不是我对此寄予厚望)
编辑2:仍在为此苦苦挣扎,而且每次都变得陌生。我一直在做一些测试应用程序,它们的工作方式完全相同(ul 被附加了新的 li)并且它们都可以工作,除了具有上述发布代码的应用程序,其中元素仍然没有显示。
编辑 3:我发现 response.find 函数中的所有内容都不会被执行,但代码不会阻塞,因此在函数中放置警报永远不会显示。编辑代码以更好地解释。
编辑 4:我认为可以肯定地说“查找”功能没有找到任何“返回”节点。响应来自轴 2 Web 服务,每个返回节点都标记为“ns:return”。这对我的 android 和 bb7 设备来说不是问题,但显然是我的 bb5 的问题。将 find 更改为 "ns:return" 解决不了任何问题。我好累。帮助!
编辑5(最后):我无法解决问题,但我确实找到了。现在问题已减少为能够在 jquery 或 javascript 中找到具有命名空间的节点。SO中有很多问题可以解决这个问题,但直到现在对我来说没有任何效果,因为jQuery 1.7已经打破了所有的解决方法。