CODEWITHSUNDEEP
androidjqueryjquery-mobilecordova
user1801060
user1801060

Reputation: 2821

ReferenceError: Can't find variable: $, jquerymobile + phonegap

I'm a newbie. I want to save a value inputted by the user in the preferences manager, and have it automatically populate a field(if it has been filled by the user). I get a "ReferenceError: Can't find variable: $ at file:///android_asset/www/index.html:53" in my Android logcat. Also my app crashes. What am I doing wrong?

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.2.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.2.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css" />
    <title>Hello World</title>

    <script type="text/javascript">
        document.addEventListener("deviceready", onDeviceReady, false);

        //once the device ready event fires up, you can safely do your thing
        function onDeviceReady(){
            //document.getElementById("welcomeMsg").innerHTML += "Phonegap is ready! version=";
        }

        $(function(){
            $('#savebutton').click(function(){
                //this is where the user manually keys in values, do error checking here
                window.localStorage.setItem("user_lat", $('#user_lat').val());
            });

            //called when the page is being shown
            $('#newpage').live('pageshow', function(){
                var userLat = window.localStorage.getItem("user_lat");
                if (userLat.length > 0){
                    $('#user_lat').val(userLat);
                }      

            });
        });


    </script>
</head>
<body>
    <div id="home" data-role="page">
        <div data-role="header">
            <h1>Home Page</h1>
        </div>
        <div data-role="content">
            Hola Phonegap & Jquery mobile!
            <a href="#newpage" data-role="button">Go to new page</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h4>Footer</h4>
        </div>
    </div>
    <!--2nd page-->
    <div id="newpage" data-role="page">
        <div data-role="header">
            <h1>Manually specify your GPS coordinates</h1>
        </div>
        <div data-role="content">
            <label for= "user_lat">Latitude:</label>
            <input type="text" name="user_lat" id="user_lat" value=""/>
            <a id ="savebutton" href="" data-role="button">Save</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h4>Footer</h4>
        </div>
    </div>

    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>        
</body>

Upvotes: 0

Views: 1263

Answers (2)

user710031
user710031

Reputation:

If '$' isn't defined I don't think that jQuery is being loaded correctly..

Try:

if ( $.mobile ) {
   // loaded
} else {
  // not loaded
}

to check if jQuery mobile is loaded, or try this for normal jQuery:

if (!jQuery) {
     alert("jQuery is not loaded");
}

Upvotes: 1

Adil
Adil

Reputation: 148120

You need to include jQuery in your page in order to use $ (jQuery) which you did not. You can add the script tag and give the url of jquery in src attribute. Add this tag in head tag so that it is added before it is required.

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

Upvotes: 1

Related Questions