CODEWITHSUNDEEP
jquerymobilejquery-mobileplayframework
retrobrain
retrobrain

Reputation: 390

Jquery Mobile service call never happens

I am trying to play around with jquery mobile, but getting nowhere while running this on android emulator. The service call is never triggered. The handleSubmit function is never called.Here is the blog i was following:

http://www.raymondcamden.com/index.cfm/2011/11/10/Example-of-serverbased-login-with-PhoneGap

Here is my index.html

    <!DOCTYPE HTML>
    <html>

    <head>
        <meta name="viewport" content="width=320; user-scalable=no" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Create Your Account</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
        <script src="js/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
        <script src="js/jquery.mobile-1.0.1.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/main.js"></script>
    </head>

    <body onload="init();">

    <div id="loginPage" data-role="page">

        <div data-role="header">
            <h1>Sign Up</h1>
        </div>

        <div data-role="content">    

            <form id="loginForm">
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" value="" placeholder="Username" />
            </div>

            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="password">Password:</label>
                <input type="password" name="password" id="password" value="" placeholder="Password" />
            </div>

            <input type="submit" value="Login" id="submitButton">
            </form>

        </div>

        <div data-role="footer">
            <h4>&copy;</h4>
        </div>

    </div>

    <script>
    $("#loginPage").live("pageinit", function(e) {
            checkPreAuth();
        });
    </script>

    </body>
    </html>

Here is main.js

    function init() {
    document.addEventListener("deviceready", deviceReady, true);
    delete init;
    }


    function checkPreAuth() {
        var form = $("#loginForm");
        if(window.localStorage["username"] != undefined && window.localStorage["password"] != undefined) {
            $("#username", form).val(window.localStorage["username"]);
            $("#password", form).val(window.localStorage["password"]);
            handleLogin();
        }
    }

    function handleLogin() {
        var form = $("#loginForm");    
        //disable the button so we can't resubmit while we wait
        $("#submitButton",form).attr("disabled","disabled");
        var u = $("#username", form).val();
        var p = $("#password", form).val();
        console.log("click");
        if(u != '' && p!= '') {
            $.post("http://10.0.2.2:9000/sample1/processsubmit", {username:u,password:p}, function(res) {
                if(res == true) {
                    //store
                    window.localStorage["username"] = u;
                    window.localStorage["password"] = p;             
                    $.mobile.changePage("some.html");
                } else {
                    navigator.notification.alert("Your login failed", function() {});
                }
             $("#submitButton").removeAttr("disabled");
            },"json");
        } else {
            //Thanks Igor!
            navigator.notification.alert("You must enter a username and password", function() {});
            $("#submitButton").removeAttr("disabled");
        }
        return false;
    }

    function deviceReady() {    
        console.log("deviceReady");
        $("#loginForm").on("submit",handleLogin);
    };

    $( document ).bind( "mobileinit", function() {
        // Make your jQuery Mobile framework configuration changes here!

        $.mobile.allowCrossDomainPages = true;
    });

Any ideas what am i missing? I am running the service as a play framework service.

Upvotes: 1

Views: 640

Answers (1)

Daniel Alexiuc
Daniel Alexiuc

Reputation: 13240

I can't see any function called handleSubmit.

I would start by setting some breakpoints in the javascript and make sure the events that you are expecting to be triggered are actually being triggered.

Upvotes: 1

Related Questions