Question

So, i’ve been working for some time at a phonegap+jqm application. I’ve been testing with my android phone, a blackberry simulator (os7) and a blackberry device (os5). My application just fetches some data from a web service using an ajax call, and uses the data to dynamically create some pages with the only purpose of displaying that data.

What works: Ajax calls are successful and data retrieved is as expected. Also jqm styles are applied correctly (by using the usual triggers “create” and “refresh”). The entire application works well in my android device and in the bb simulator with os7.

What doesn’t work: Dynamically created and appended elements are never shown, instead the old elements (which should have been removed) stay there. This happens only when testing with the bb with os5.

Now, some code. When firing ajax calls, i use a couple of functions to get everything done. This is the standard procedure for each or the pages:

When data is received from the call, the response is passed to a specific handler, which does the job of taking data from the response:

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!
}

As you can see, the new item is created with another funcion, which formats the elements correctly:

function getFormattedLI(codice,responsabile){
    var myFormattedLI = '<li data-role="button" data-icon="arrow-r" data-iconpos="right">'+
                            '<p>'+codice+' - '+responsabile+'<\/p>'+
                        '<\/li>';

    return myFormattedLI;
}

Finally, here’s the markup for this page:

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

So, why aren’t my new list items displayed when i change the page? am I doing something wrong?

Any help is greatly appreciated, I’ve been struggling with this for a while and i can’t find any solution. Also, sorry for the long question 🙂

Edit 1: so long i have tried changing all my jquery functions to pure javascript. Nothing changed (not that i had high hopes on this)

Edit 2: Still struggling with this, and it gets stranger every time. I have been doing some test applications, which work exactly the same way (an ul gets appended new li) and they all work, except for the application with the above posted code, where elements still do not get shown.

Edit 3: I found out that everything inside the response.find function never gets executed, but code doesn’t block, so, placing alerts inside the function are never shown. Edited the code to explain better.

Edit 4: I think it is pretty safe to say that the “find” function is not finding any ‘return’ nodes. the response comes from an axis 2 web service, and each return node is tagged as “ns:return”. This is not a problem for my android and bb7 devices, but apparently it is for my bb5. Changing the find to “ns:return” solves nothing. I’m so tired. Help!

Edit 5 (last): I have not been able to solve the problem, but i did find it. The problem is now reduced to being able to find nodes with namespaces in jquery or javascript. There are many questions in SO addressing this problem, but until now nothing works for me, since jQuery 1.7 has broken all workarounds.

Answer 1

I finally solved this. The each return in the xml response is something like this:

     <ns:return xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="ax21:CommessaBase">
        <ax21:codice>CODICE0</ax21:codice> 
        <ax21:responsabile>PERSON0</ax21:responsabile> 
     </ns:return>

So, the above code, where it’s looking for the return, did not find anything. I tried several things, in the end, the function that worked was this:

     function processListElements(response){

    $('#anagTableList li[data-role="button"]').remove();
    $('#anagTableList').listview('refresh');

    $(response).find('*').filter('ns\\:return').each(function(){

        var myNewLI=getFormattedLI($(this).find('*').filter('ax21\\:codice').text(),$(this).find('*').filter('ax21\\:responsabile').text());
        $('#anagTableList').append(myNewLI);
        $('#anagTableList').listview('refresh');

    });

}