CODEWITHSUNDEEP
javascriptjqueryjsonajax
Gaurav
Gaurav

Reputation: 17

How to call function on body load

Here I am trying to call oauth2_login() function on body load and it should login the user. As of now I am hardcoding values that exist in database into username and password fields.

<!DOCTYPE html>
<html>
<!--
* Please see the included README.md file for license terms and conditions.
-->
<head>
    <title>Blank Cordova Mobile App Template</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <!-- see http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag -->
    <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->
    <!-- <link rel="stylesheet" href="css/app.css">-->
    <style>
        /* following two viewport lines are equivalent to meta viewport statement above, and is needed for Windows */
        /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html and http://dev.w3.org/csswg/css-device-adapt/ */
        @-ms-viewport {
            width: 100vw;
            min-zoom: 100%;
            zoom: 100%;
        }

        @viewport {
            width: 100vw;
            min-zoom: 100% zoom: 100%;
        }

        @-ms-viewport {
            user-zoom: fixed;
            min-zoom: 100%;
        }

        @viewport {
            user-zoom: fixed;
            min-zoom: 100%;
        }
        /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/

        .dispInline,
        .dispInlineLabel {
            display: inline-grid;
            border-bottom-width: 0;
        }

        .dispInlineLabel {
            min-width: auto;
        }

        .dispInline {
            min-width: auto;
        }

        .clearFloats {
            clear: both;
        }

        #tck_id {
            padding-bottom: 10px;
        }
    </style>
    <!-- See explanation at the bottom of this file for info regarding placement of JS libraries. -->
    <!-- These library references (below) are just examples to give you the general idea... -->
    <!-- <script src="lib/mc/hammer.js"></script> -->
    <!-- <script src="lib/ft/fastclick.js"></script> -->
    <!-- <script src="lib/jq/jquery.js"></script> -->
    <!--    <link rel="stylesheet" href="css/New.css" type="text/css">-->
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body onload="oauth2_login()">
<div data-role="page" id="paper">
    <div data-role="header" data-theme="b" data-position="fixed">
        <a href="#home" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse" onclick="location.href='home.html'">Back</a>
        <h1>Hello</h1>
    </div>
    <div data-role="content">
        <!--       <div class="clearFloats"></div>-->
        <!--  <button onclick="getLocation()">Try It</button>-->
        <p id="demo"></p>
        <div data-role="footer" data-position="fixed" data-theme="b">
            <!-- fixed footer -->
            <div data-role="navbar">
            </div>
        </div>
    </div>
</div>

<script>
    function oauth2_login() {
        var email = "[email protected]";
        var password = "abhigyan@123";
        var dataString = "User=" + email + "&Pass=" + password + "&login=";
        if ($.trim(email).length > 0 & $.trim(password).length > 0) {
            $.ajax({
                type: "POST",
                url: "http://35.201.138.23:8080/APIPRODUCTION/OperationJSP/operations.jsp",
                data: dataString,
                crossDomain: true,
                cache: false,
                beforeSend: function() {
                    $("#callAjax").html('Connecting…');
                },
                success: function(data) {
                    var Data = $.parseJSON(data);
                    if (Data.success == '1') {
                        localStorage.login = "true";
                        //localStorage.email = email;
                        var theName = $.trim($("#theName").val());
                        var thePassword = $.trim($("#thePassword").val());
                        localStorage.setItem("PMUsername", theName);
                        localStorage.setItem("PMPassword", thePassword);
                        localStorage.setItem("PMResponse", Data.success);
                        alert("Login Successful");
                        window.location.href = "home.html";
                    } else if (Data.success == '0') {
                        // document.getElementById("waiting").innerHTML = " ";
                        alert("Wrong User");
                        $("#callAjax").html('Login');
                    }
                }
            });
        }
        return false;
    });

    function Loading() {
        document.getElementById("waiting").innerHTML = "Loading...";
    }
</script>
<script src="cordova.js"></script>
<!-- for your event code, see README and file comments for details -->
<script src="js/paper.js"></script>
<!-- for your init code, see README and file comments for details -->
<script src="js/init-app.js"></script>
<!-- normalizes device and document ready events, see file for details -->
<script src="xdk/init-dev.js"></script>
<!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
<!-- Place your remote debugging weinre script URL here, if it does not work above. -->
</body>
</html>

I need some helps and suggestion. What is wrong with this? Above is all code that am using. Thanks

Upvotes: 0

Views: 96

Answers (4)

Vignesh Raja
Vignesh Raja

Reputation: 8761

Actually you are getting 2 console errors. (As I executed the same code in my machine.)

You have an extra ); before the method Loading(). Remove it and it will work. Just commented all the lines inside the method oauth2_login() and consoled a message to test and its working.

Note: You have a bad formatting which is not good for a developer. Pls kindly change it.

:) Happy Coding :)

<!DOCTYPE html>
<html>
<!--
  * Please see the included README.md file for license terms and conditions.
  -->
<head>
    <title>Blank Cordova Mobile App Template</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <!-- see http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag -->
    <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->
   <!-- <link rel="stylesheet" href="css/app.css">-->
    <style>
        /* following two viewport lines are equivalent to meta viewport statement above, and is needed for Windows */
        /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html and http://dev.w3.org/csswg/css-device-adapt/ */
        @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
        /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
        .dispInline, .dispInlineLabel{
    display: inline-grid;
    border-bottom-width:0;

}
.dispInlineLabel{
    min-width: auto;


}
.dispInline{
     min-width: auto;

}
.clearFloats{
    clear:both;
}

        #tck_id
        {
            padding-bottom: 10px;
        }


    </style>

    <!-- See explanation at the bottom of this file for info regarding placement of JS libraries. -->
    <!-- These library references (below) are just examples to give you the general idea... -->
    <!-- <script src="lib/mc/hammer.js"></script> -->
    <!-- <script src="lib/ft/fastclick.js"></script> -->
    <!-- <script src="lib/jq/jquery.js"></script> -->

<!--    <link rel="stylesheet" href="css/New.css" type="text/css">-->
     <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>


<body onload="oauth2_login()">
  <div data-role="page" id="paper">
      <div data-role="header" data-theme="b" data-position="fixed">
           <a href="#home" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse" onclick="location.href='home.html'">Back</a>
         <h1>Hello</h1>
      </div>
      <div data-role="content">
          <p id="demo"></p>
          <div data-role="footer" data-position="fixed" data-theme="b"> <!-- fixed footer -->
              <div data-role="navbar"></div>
            </div>
        </div>
    </div>
    <script>

    function oauth2_login()
    {
        console.log("Here");
//      var email = "[email protected]";
//      var password = "abhigyan@123";
//        var dataString="User="+email+"&Pass="+password+"&login=";
//        if($.trim(userName).length>0 & $.trim(password).length>0)
//        {
//            $.ajax({
//            type: "POST",
//
//            url: "http://35.201.138.23:8080/APIPRODUCTION/OperationJSP/operations.jsp",
//            data: dataString,
//            crossDomain: true,
//            cache: false,
//            beforeSend: function(){ $("#callAjax").html('Connecting…');},
//            success: function(data){
//                    var Data = $.parseJSON(data);
//                    if(Data.success=='1')
//                    {
//                        localStorage.login="true";
//                        //localStorage.email=email;
//                        var theName = $.trim($("#theName").val());
//                        var thePassword = $.trim($("#thePassword").val());
//                        localStorage.setItem("PMUsername",theName);
//                        localStorage.setItem("PMPassword",thePassword);
//                        localStorage.setItem("PMResponse",Data.success);
//                        alert("Login Successful");
//                        window.location.href = "home.html";
//                    }
//                    else if(Data.success=='0')
//                    {
//
//                        // document.getElementById("waiting").innerHTML = " ";
//                        alert("Wrong User");
//                        $("#callAjax").html('Login');
//                    }
//                }
//            });
//        }
        return false;
    }

    function Loading()
    {
        document.getElementById("waiting").innerHTML = "Loading...";
    }
</script>




    <script src="cordova.js"></script>

    <!-- for your event code, see README and file comments for details -->
    <script src="js/paper.js"></script>
    <!-- for your init code, see README and file comments for details -->
    <script src="js/init-app.js"></script>
    <!-- normalizes device and document ready events, see file for details -->
    <script src="xdk/init-dev.js"></script>

    <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
    <!-- Place your remote debugging weinre script URL here, if it does not work above. -->
</body>

Upvotes: 0

Swamy
Swamy

Reputation: 400

You can do it in multiple ways:

  1. If using jQuery, call the method when the DOM gets ready:

    $(document).ready(function(){
    oauth2_login();
})

  2. If using javascript, call the method on window.onLoad:

    window.onload = function(){
     oauth2_login();
}

  3. You can make the entire oauth2_login() as a self-invoking function. I using jQuery, you can define this once DOM is ready.

    (function(){
     // code of oauth2_login goes here...
})();

  4. Else 

    <body onload="oauth2_login()"></body>

Upvotes: 0

Saurabh Mistry
Saurabh Mistry

Reputation: 13689

Call Your Function in side jquery's document ready function :

$(document).ready(function() {
  oauth2_login();
});

Upvotes: 0

Monisha Jayabarath
Monisha Jayabarath

Reputation: 66

Method 1: Use pure javascript (dom event)

<body onload="oauth2_login()">

Method 2: Or with jQuery

$(document).ready(function() {
  oauth2_login()
});

Upvotes: 2

Related Questions