0

I've been stuck on this for several days. I'm trying to build Cordova app with OnsenUI and jQuery.

My current problem is that I'm trying to validate a form, but it's returning undefined values. I'm assuming there is something wrong with the way I'm loading the scripts or readying the document. That said, I have no idea what am I doing so it may be something completely different.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />

    <!-- JS dependencies (order matters!) -->
    <script src="scripts/platformOverrides.js"></script>
    <script src="lib/jquery-3.0.0.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>

    <!-- app js-->
    <script src="js/app.js"></script>

    <!-- CSS dependencies -->
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-sunshine-theme.css" />

    <title>Onsen UI</title>
</head>

<body>
<!-- Cordova reference -->
<script src="cordova.js"></script>

<ons-tabbar>
        <ons-tab active page="login.html" label="Login" icon="ion-home">
        </ons-tab>
    </ons-tabbar>
</body>
</html>

login.page

<ons-page id="login_page">
    <ons-toolbar>
        <div class="center">Přihlášení</div>
    </ons-toolbar>

    <div class="login-form" id="login_form">
        <form id="login_form">
            <input type="email"     id="login_username" class="text-input--underbar" placeholder="Username"    value="test_name">
            <input type="password"  id="login_passowrd" class="text-input--underbar" placeholder="Password"    value="">
            <input type="text"      id="login_server"   class="text-input--underbar" placeholder="Server"      value="" hidden>
            <br><br>
            <ons-button modifier="large" class="login-button" id="login_confirm" onclick="$('#login_form').submit();">Login</ons-button>
        </form>
        <br><br>
        <ons-button modifier="quiet" class="adv-settings" id="adv_settings_btn">Adv. settings</ons-button>
    </div>
</ons-page>

And now the app.js. I have tried several ways, but as far as I can tell, they all do basically the same thing.

ons.ready(function () {
    $(function () { $('#login_server').hide(); })
    $("#adv_settings_btn").click(function () {
        $('#login_server').toggle('hidden');
    });

    $("#login_form").submit(function (e) {
        e.preventDefault();
        console.log($("#login_username").val());
    });
});

or this one

jQuery(document).ready(); {
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady() {
    $(function () { $('#login_server').hide(); })
    $("#adv_settings_btn").click(function () {
        $('#login_server').toggle('hidden');
    });

    $("#login_form").submit(function (e) {
        e.preventDefault();
        console.log($("#login_username").val());
    });
}

and also this one

jQuery(document).ready(function () {
    // do document ready stuff
    $(function () { $('#login_server').hide(); })
    $("#adv_settings_btn").click(function () {
        $('#login_server').toggle('hidden');
    });

    $("#login_form").submit(function (e) {
        e.preventDefault();
        console.log($("#login_username").val());
    });
}).on('deviceready', function () {
    // do deviceready stuff, put all calls to plugins in here
});

The hide() and toggle() work fine in every example, but when I call the val() in the submit function, it returns undefined.

Initially I wanted to read user input, but discovered that even if I prefill it (as it is in the example), I'm unable to read it. Which lead me to believe there must be problem loading the DOM or something similar.

I'm using latest Cordova, jQuery 3.0.0 and OnsenUI 2.0.0-rc.12.

rancor1223
  • 316
  • 1
  • 14
  • Missing the basic concept that the form doesn't exist when page is initially loaded. It is loaded after and therefore you need to delegate the event – charlietfl Jun 20 '16 at 10:36
  • Ah, yes, I knew I forgot about something I wanted to mention. I couldn't find any reference to this in the OnsenUI documentation. I will look into the question you linked. Thanks you. Though, I tried inluding the login.html in the index.html file as a template and that didn't change anything. I suppose it doesn't load it immediately though so that would make sense. – rancor1223 Jun 20 '16 at 10:42
  • Regardless of template or ajax...that element won't exist in dom at run time. Never used Onsen but there should also be internal page load events you can use – charlietfl Jun 20 '16 at 10:45
  • The question was eventually answerd [here](http://stackoverflow.com/a/37946271/2395003). – rancor1223 Jun 22 '16 at 05:34

0 Answers0