Languages

Menu
Sites
Language
Using jQuery

Hello friends, i'm trying to use jquery.js library . But i'm not able to use $ sign .There is always a warning ,  '$' is not defined.

I have loaded the jquery library in index.html before the main.js file  at the end of the body tag as  below.

<body>
    <div id="main" class="page">
        <div class="contents">
            <span id="content-text">Basic</span>
        </div>
    </div>
   <script src="lib/jquery.js"></script>
    <script src="js/main.js"></script>
</body>

 

 

 

List

Responses

2 Replies
Marco Buettner

i will bind jquery.js on the head tag and only main.js on the body tag

Iqbal Hossain

Hi~
Please create a new web project 'jQuerySinglePage'

Go to New Tizen Web Project > Template > select 'jQuerySinglePage'

It will create ready Jquery project for you.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="A single-page template generated by Tizen Web IDE"/>

    <title>Tizen Web IDE - Tizen - jQuery Mobile - Single-Page</title>

    <link rel="stylesheet" href="./css/jquery.mobile-1.3.2.css"/>
    <script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
    <script type="text/javascript" src="./js/main.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
    <div data-role="page" >
        <div data-role="header" data-position="fixed" data-tap-toggle="false" >
            <h1>Single-page application </h1>
        </div><!-- /header -->

        <div data-role="content" >
            <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page.</p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed" data-tap-toggle="false" >
            <h4>Footer content</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>
</html>

main.js

var backEventListener = null;

var unregister = function() {
    if ( backEventListener !== null ) {
        document.removeEventListener( 'tizenhwkey', backEventListener );
        backEventListener = null;
        window.tizen.application.getCurrentApplication().exit();
    }
}

//Initialize function
var init = function () {
    // register once
    if ( backEventListener !== null ) {
        return;
    }
    
    // TODO:: Do your initialization job
    console.log("init() called");
    
    var backEvent = function(e) {
        if ( e.keyName == "back" ) {
            try {
                if ( $.mobile.urlHistory.activeIndex <= 0 ) {
                    // if first page, terminate app
                    unregister();
                } else {
                    // move previous page
                    $.mobile.urlHistory.activeIndex -= 1;
                    $.mobile.urlHistory.clearForward();
                    window.history.back();
                }
            } catch( ex ) {
                unregister();
            }
        }
    }
    
    // add eventListener for tizenhwkey (Back Button)
    document.addEventListener( 'tizenhwkey', backEvent );
    backEventListener = backEvent;
};

$(document).bind( 'pageinit', init );
$(document).unload( unregister );

Hope it will help you.

-Thanks