phonegap + jqm error: "Uncaught SyntaxError: Unexpected identifier at file:///android_asset/www/index.html:2"

1
votes

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?

4
androidjquery-mobilecordova
Does your page have the data-role of page set to it? – darryn.ten
Yes it does (at least in the div load example). However it seems to me that the error is created by phonegap (because of the error thrown). – Th0rndike
What version of Phonegap are you using? – darryn.ten
Phonegap version is 1.4.1. I found a workaround: by adding: "data-role='button'" to my links the flipping is gone. Haven't been able to load through jqm yet. – Th0rndike

4 Answers

1
votes

I have a sample project in github with two pages which might help you resolve the issue.

https://github.com/dhavaln/phonegap-jqm

It contains example to change page with script and with direct link.

0
votes

$.mobile.changePage doesnt load another html into view. it scans the html in the html whose link u gave, gets the first jqm 'page' on it and adds that into the dom(not the entire html) If this is not what you intended to do and wanted to load the full something.html into the dom then u'll have to use either

navigator.app.loadUrl("file:///android_asset/www/something.html")

or

windows.location.href("file:///android_asset/www/something.html")
0
votes

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'));

    }));
0
votes

My Phonegap + jqMobile app received this error message also, but for an entirely different reason.

I was dynamically loading in a javascript file, and declared it as : <script id="sqlPlugin" src="" type="text/javascript"></script>

Chrome made no comment about this, but on Android it gave me the error message in the title. Simply removing the src="" attribute fixed the problem.