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

Question

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.

Are you sure your jQuery is loading properly? If yes, what are the two lines (103 and 131) that throw the errors? — m90, Feb 27 '12 at 07:35
103:- $('#lbUsers').html(''); 131:- transaction.executeSql('INSERT INTO User(FirstName, LastName) VALUES (?,?)',[$('#txFirstName').val(), $('#txLastName').val()],nullHandler,errorHandler); — himanshu, Feb 27 '12 at 07:36
i think this could help http://stackoverflow.com/questions/4888725/jquery-referenceerror-cant-find-variable — NET Experts, Feb 27 '12 at 07:39
The code looks ok, so my guess would be a incorrect URL for your jQuery-JS-file. Have you checked that? — m90, Feb 27 '12 at 07:43
Also make sure that the reference to core jquery file should come before jquery mobile in your head tag — DG3, Feb 27 '12 at 13:41

score 3 · Accepted Answer · answered Feb 27 '12 at 16:48

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>

score 0 · Answer 2 · answered Apr 17 '14 at 09:09

0

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.

answered Apr 17 '14 at 09:09

anil

1

– anil Apr 17 '14 at 09:10

score 0 · Answer 3 · answered Feb 27 '12 at 07:41

0

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

answered Feb 27 '12 at 07:41

silly

7,789
2
24
37

can you check if jquery is loaded? like `console.log(jQuery)` – silly Feb 27 '12 at 08:30

score 0 · Answer 4 · answered Feb 27 '12 at 07:50

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>

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

4 Answers4