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
– m90, Commented Feb 27, 2012 at 7:35
103:- $('#lbUsers').html(''); 131:- transaction.executeSql('INSERT INTO User(FirstName, LastName) VALUES (?,?)',[$('#txFirstName').val(), $('#txLastName').val()],nullHandler,errorHandler); — himanshu
– himanshu, Commented Feb 27, 2012 at 7:36
i think this could help stackoverflow.com/questions/4888725/… — NET Experts
– NET Experts, Commented Feb 27, 2012 at 7:39
The code looks ok, so my guess would be a incorrect URL for your jQuery-JS-file. Have you checked that? — m90
– m90, Commented Feb 27, 2012 at 7:43
Also make sure that the reference to core jquery file should come before jquery mobile in your head tag — DG3
– DG3, Commented Feb 27, 2012 at 13:41

csbrookes · Accepted Answer · 2012-02-27 16:48:13Z

3

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>

answered Feb 27, 2012 at 16:48

csbrookes

3611 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

silly · Accepted Answer · 2012-02-27 07:41:53Z

0

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

answered Feb 27, 2012 at 7:41

silly

7,8972 gold badges26 silver badges37 bronze badges

1 Comment

silly Over a year ago

can you check if jquery is loaded? like console.log(jQuery)

Artyom · Accepted Answer · 2012-02-27 07:50:16Z

0

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>

answered Feb 27, 2012 at 7:50

Artyom

1,58912 silver badges22 bronze badges

Comments

anil · Accepted Answer · 2014-04-17 09:09:09Z

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, 2014 at 9:09

anil

1

1 Comment

anil Over a year ago

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related