Question

I’m trying to learn to develop with Phonegap and JQM. My app is very simple: it loads a list of persons with a jqm ajax call and if a person is clicked, it’s supposed to take you to another page.

I have tried to load the second page in many ways:

1.- By adding following

     $.mobile.changePage($('myDiv'));

2.- By adding following

    $.mobile.changePage('myPage.html');

3.- By using a normal href inside the link tags

The only solution that works is the last one, which flips badly. So i really want to do it with the JQM changePage, which allows me to put some transition animation, and when i press the link i always get a the “

E/Web Console(10922): Uncaught SyntaxError: Unexpected identifier at
file:///android_asset/www/index.html:2″ ERROR

any ideas?

EDIT: I was able to make it work with only with the third method (using the href inside the anchor tag). After some testing I am convinced that the error comes out only when i call a method using the onclick event in the anchors. Someone knows why this is happening?

Answer 1

Solved. The error came up only when i used the “onclick” event to change page by script. By Using the jquery live function and listening for “click” events everything worked fine. I still haven’t found the reason why the onclick event gave me that error, if someone knows it would be nice to know. Thanks to everyone who tried to help.

for people who wants the code:

HTML at creation:

    <div id='listPage' data-role="page">

<div data-theme="e" data-role="header">
    <h1 >Anagrafica Tigre</h1>
</div><!-- /header -->

<ul id='anagList' data-theme="b" data-role="listview" data-inset="true" data-filter="true">

</ul>

<div id='schedaPage' data-role="page">
<div id='schedaTitle' data-theme="e" data-role="header">
    <h1>Anagrafica Tigre part 2</h1>
</div><!-- /header -->
<ul id='schedaList' data-theme="b" data-role="listview" data-inset="true">
    <li id='dataNascita'> 
        <h3><strong>Data di nascita</strong></h3>
        <p></p>
    </li>
    <li id='luogoNascita'>
        <h3><strong>Luogo di nascita</strong></h3>
        <p></p>
    </li>
    <li id='email'>
        <h3><strong>Email</strong></h3>
        <p></p>
    </li>

Population scripts after a ws call:

    function appendToList(theId,data){
    var myList = $('#anagList');
    var newItem = document.createElement('li');

    var newId = document.createElement('input');
    newId.setAttribute("type","hidden");
    newId.value=theId;

    var newLink = document.createElement('a');
    //newLink.setAttribute("onclick","setPage("+newId+")"); //THIS IS THE EVENT THAT DIDNT WORK
    newLink.setAttribute("href","javascript:void(0)");
    newLink.setAttribute("id",theId)

    //newLink.setAttribute("href","schedaAnag.html");
    newLink.setAttribute("data-role","button");
    newLink.innerHTML=data;

    newItem.appendChild(newId);
    newItem.appendChild(newLink);

    myList.append(newItem);

    if(theId==149){
        $('#anagList').listview('refresh');
    }

}

script after page load for the click listener that DID work:

    $('#anagList a').live("click",(function(){
        var theId=$(this).attr('id');
        callWS(parseInt(theId),parseInt(theId)+1,'scheda');
        //$('#schedaPage').listview("refresh");
        $.mobile.changePage($('#schedaPage'));

    }));