CODEWITHSUNDEEP
androidhtmljquery-mobilecordova
himanshu
himanshu

Reputation: 1980

Getting error: "Can't find variable: $ " in jquery mobile

First go through the code:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
   <meta name="viewport" content="width=default-width; user-scalable=no" /> 
   <meta http-equiv="Content-type" content="text/html;charset=utf-8"> 
   <title>Embedded Sql Example</title> 

    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></ script> 


    <script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>  

<!-- main scripts used in this example --> 
 <script type="text/javascript" charset="utf-8"> 
// global variables 
var db; 
var shortName = 'WebSqlDB'; 
var version = '1.0'; 
var displayName = 'WebSqlDB'; 
var maxSize = 65535; 
// this is called when an error happens in a transaction 
function errorHandler(transaction, error) { 
   alert("Error: "+ error.message + "code: " + error.code); 
} 
// this is called when a successful transaction happens 
function successCallBack() { 
   alert("DEBUGGING: success"); 
} 
function nullHandler(){} 
// called when the application loads 
function onBodyLoad(){ 
// This alert is used to make sure the application is loaded correctly 
alert("DEBUGGING: we are in the onBodyLoad() function"); 
 if (!window.openDatabase) { 

   alert("Databases are not supported in this browser."); 
   return; 
 } 

 db = window.openDatabase(shortName, version, displayName,maxSize); 

 db.transaction(function(tx){ 


   tx.executeSql( 'CREATE TABLE IF NOT EXISTS User(UserId INTEGER NOT NULL PRIMARY KEY, FirstName TEXT NOT NULL, LastName TEXT NOT NULL)', [],nullHandler,errorHandler); 
 },errorHandler,successCallBack); 
} 

function ListDBValues() { 
 if (!window.openDatabase) { 
  alert("Databases are not supported in this browser."); 
  return; 
 } 
  $('#lbUsers').html('');

 db.transaction(function(transaction) { 
   transaction.executeSql('SELECT * FROM User;', [], 
     function(transaction, result) { 
      if (result != null && result.rows != null) { 
        for (var i = 0; i < result.rows.length; i++) { 
          var row = result.rows.item(i); 
          $('#lbUsers').append("<br>" + row.UserId + ". " + row.FirstName+ " " + row.LastName); 
        } 
      } 
     },errorHandler); 
 },errorHandler,nullHandler); 
 return; 
} 

function AddValueToDB() { 
 if (!window.openDatabase) { 
   alert("Databases are not supported in this browser."); 
   return; 
 } 

   db.transaction(function(transaction) { 
   transaction.executeSql('INSERT INTO User(FirstName, LastName) VALUES (?,?)',[$('#txFirstName').val(), $('#txLastName').val()],nullHandler,errorHandler); 
   }); 

 ListDBValues(); 
 return false; 
} 
</script> 
</head> 
<body onload="onBodyLoad()"> 
<h1>WebSQL</h1> 
<input id="txFirstName" type="text" placeholder="FirstName"> 
<input id="txLastName" type="text" placeholder="Last Name"><br> 
<input type="button" value="Add record" onClick="AddValueToDB()"> <br>
<input type="button" value="Refresh" onClick="ListDBValues()"> <br> 
<br> 
<span style="font-weight:bold;">Currently stored values:</span> 
<span id="lbUsers"></span> 
</body> 
</html>

I am working on a phonegap app and I am creating it on android os.I am getting 

"Can't find variable: $ at file:///android_asset/www/dbDemo.html:103"

line due to error occurred at 103

 $('#lbUsers').html('');

and 

"Can't find variable: $ at file:///android_asset/www/dbDemo.html:131"

line due to error occurred at 131

transaction.executeSql('INSERT INTO User(FirstName, LastName) VALUES (?,?)',[$('#txFirstName').val(), $('#txLastName').val()],nullHandler,errorHandler);

while running the the above code.Help me to get rid of the problem.Any help would be highly appreciated.Thanx in advance.

Upvotes: 0

Views: 6053

Answers (4)

anil
anil

Reputation: 1

Try putting jquery.min.js script tag before phonegap-1.4.1.js script tag like below.

Seems like jQuery is not loaded before it is used.

Upvotes: 0

csbrookes
csbrookes

Reputation: 361

It does look like jQuery isn't loading. I'm looking at your code and I think the problem could be as simple as an extra space...

<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></ script>
<script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>

There's a space up there in the closing script tag - Try changing it from </ script> to </script>

Upvotes: 3

Artyom
Artyom

Reputation: 1599

You are calling ListDBValues() in your head section (second line before the closing script tag). This causes a problem because the jQuery library has not yet loaded at that point, and that's why you are getting errors. Instead, try moving that function call to your body - insert the following before the closing body tag:

<script type="text/javascript">
$(document).ready(function() {
    ListDBValues();
});
</script>

Upvotes: 0

silly
silly

Reputation: 7887

try to use jQuery('blabla') instead $('blabla')

Upvotes: 0

Related Questions