CODEWITHSUNDEEP
jquerycordova
noway
noway

Reputation: 2585

Using Jquery with PhoneGap

I am just testing a modified version of one of PhoneGap quick starts. I also referenced JQuery. However, when I want to change the content of div using Jquery, I got an error, but simple alert just works fine. 

function querySuccess(tx, results) {
    var s = "";
    for (var i=0; i<len; i++){
        s += "Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data + "<br />"; 
    }

    //This cause an error
    //$("#cnt").html(s);

    //This works fine
    alert(s);
}

Could you tell me what I am missing? The full code is below.

<!DOCTYPE html>
<html>
  <head>
  <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">

        <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
        <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>        

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

        <script type="text/javascript" charset="utf-8">

            // Wait for PhoneGap to load
            //
            document.addEventListener("deviceready", onDeviceReady, false);

            // Populate the database 
            //
            function populateDB(tx) {
                tx.executeSql('DROP TABLE IF EXISTS DEMO');
                tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
                tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
                tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
            }

            // Query the database
            //
            function queryDB(tx) {
                tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
            }

            // Query the success callback
            //
            function querySuccess(tx, results) {
                var len = results.rows.length;
                console.log("DEMO table: " + len + " rows found.");
                var s = "";
                for (var i=0; i<len; i++){
                    console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
                    s += "Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data + "<br />"; 
                }

                $("#cnt").html(s);
                //alert(s);
            }

            // Transaction error callback
            //
            function errorCB(err) {
                console.log("Error processing SQL: "+err.code);
            }

            // Transaction success callback
            //
            function successCB() {
                var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
                db.transaction(queryDB, errorCB);
            }

            // PhoneGap is ready
            //
            function onDeviceReady() {
                var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
                db.transaction(populateDB, errorCB, successCB);
            }
            </script>
  </head>
  <body onload="onBodyLoad()">
      <h1>Example</h1>
      <p>Open Database</p>
      <div id="cnt">this</div>
  </body>
</html>

Upvotes: 1

Views: 2806

Answers (2)

Jayendra
Jayendra

Reputation: 73

In for loop Paste this code.

$("#cnt").append(s);

Upvotes: 0

dhaval
dhaval

Reputation: 7659

the code works fine in device as well as in browser

http://jsfiddle.net/dhavaln/ujKuF/

As you have mentioned the CDN url for jquery and jquery mobile, just make sure those libraries are loaded properly as this is the only code in which you are using jquery.

$("#cnt").html(s);

Upvotes: 1

Related Questions