Cordova form doesn't submit or buttons are not working (android +4.4)

Question

NOTE: The following issue only occurs on Android versions above 4.4.2 (as far as I know)

TL;DR

Problem 1:Buttons with click/tap/vclick/touchstart attached to them, seem to work only partly (10-30% of the time) in my cordova app (Android only).
Problem 2: The button in my form (submit button) doesn't trigger my .submit(function(){..}); event, but the 'go/enter' button on the keyboard does trigger the event. (also Android only)

I'm trying to develop a hybrid app for ios/android/windows. In the app, I'll have the occasional button that needs to trigger some actions.

Problem 1
Generally I'd use .on('click', function() { ... });, but I've learned that click doesn't really cooperate with mobile devices. Instead I'll either use vclick, tap or touchstart, yet this doesn't always seem to work. Sometimes the button will trigger, sometimes it will trigger after I repeatedly tap/click it.

Problem 2
On other pages I'll have a form that's wrapped in a <form> tag and includes a <button type="submit" id="btnSubmit">Submit form</button>. In my javascript I'll have an .on('submit', function(e){ ... }); event to catch the form submit, but for another unexplainable reason, this doesn't seem to work.

Here is my form:

<form id="registerForm" method="post" action="#" class="ui-body ui-body-b ui-corner-all">
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="regLang" data-translation="reg_language"></label>
        <select id="regLang" name="Language">
            <!--<option value="0">EN</option>-->
            <option value="1">NL</option>
            <option value="2">FR</option>
            <!--<option value="3">DE</option>-->
        </select>
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="regCode">Registration Code:</label>
        <input type="text" name="RegistrationCode" placeholder="Registration Code" data-translation="reg_code" id="regCode" />
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="regEmail">E-Mail Address:</label>
        <input type="email" name="EmailAddress" placeholder="Email Address" data-translation="reg_email" id="regEmail" />
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <!--<label for="regPassword">Password:</label>-->
        <input type="password" name="Password" placeholder="Password" data-translation="reg_password" id="regPassword" />
    </div>
    <div data-role="fieldcontain" class="ui-hide-label">
        <button type="button" id="regRegister">
            <span data-translation="reg_register"></span>
        </button>
    </div>
</form>

And this should be the code to get my form triggered:

$("#registerForm").submit(function (e) {
    console.log("I don't even make it inside.");
});

When I press the submit button as you can see on the image, the form will submit and go through the code above. When I however press the "Registreren" button, nothing will happen.

Now I know you guys will say, just add an onclick event to the button and catch the form submit like that, but then I'll just be stuck with my first problem. The button doesn't always seem to get triggered..

Update

As requested, here is how my index.html pages looks like to see an overview of my additional scripts:

<head>
    <meta charset="UTF-8" />
    <title>Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <!-- JQuery -->
    <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.3.0.min.css" type="text/css" />

    <!-- simple dialog -->
    <link rel="Stylesheet" href="jquery-mobile/jquery.mobile.simpledialog.min.css" type="text/css" />

    <link href="styles/main_absolute.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="styles/font-awesome.min.css" type="text/css" />
    <link href="styles/app.css" rel="stylesheet" type="text/css" />

    <link href="jquery-mobile/jquery-ui/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link href="slickgrid/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />

    <script>
    // Prevent default errors at start of application when running in browser. 
    // However, still shows other exceptions that are needed to debug the application.
    // NOTE: comment this code if you're building the ios or android app (or windows)
        // (function () {
        //     var ConsoleBasedNativeApi = {
        //         exec: function(bridgeSecret, service, action, callbackId, argsJson) {
        //             return console.log(argsJson, 'gap:'+JSON.stringify([bridgeSecret, service, action, callbackId]));
        //         },
        //         setNativeToJsBridgeMode: function(bridgeSecret, value) {
        //             console.log(value, 'gap_bridge_mode:' + bridgeSecret);
        //         },
        //         retrieveJsMessages: function(bridgeSecret, fromOnlineEvent) {
        //             return console.log(+fromOnlineEvent, 'gap_poll:' + bridgeSecret);
        //         }
        //     };
        //     window._cordovaNative = ConsoleBasedNativeApi;
        // })();
    </script>

    <script src="cordova.js" type="text/javascript"></script>

    <script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/md5.js" type="text/javascript"></script>
    <script src="js/lib/jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/lib/jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
        <!-- <script src="js/lib/jquery-mobile/jquery.mobile-1.4.2.js" type="text/javascript"></script> -->
    <script src="js/lib/jquery-mobile/jquery-drag/jquery.event.drag-2.2.js" type="text/javascript"></script>

    <!-- jquery progress bar -->
    <link href="styles/jqm-progress-bar/jQMProgressBar.css" rel="stylesheet" type="text/css" />
    <script src="js/lib/jquery-mobile/jquery.mobile.simpledialog2.min.js" type="text/javascript"></script>

    <!--simple dialog-->
    <script src="js/lib/jqm-progress-bar/jQMProgressBar.js" type="text/javascript"></script>

    <!-- Slickgrid -->
    <link href="slickgrid/slick.grid.css" rel="stylesheet" type="text/css" />
    <link href="slickgrid/controls/slick.pager.css" rel="stylesheet" type="text/css" />

    <script src="slickgrid/slick.core.js" type="text/javascript"></script>
    <script src="slickgrid/slick.grid.js" type="text/javascript"></script>
    <script src="slickgrid/slick.dataview.js" type="text/javascript"></script>
    <script src="slickgrid/controls/slick.pager.js" type="text/javascript"></script>

    <!-- toastr -->
    <link href="js/lib/toastr/toastr.min.css" rel="stylesheet" type="text/css" />
    <script src="js/lib/toastr/toastr.min.js" type="text/javascript"></script>

    <!-- moment -->
    <script src="js/lib/moment.min.js" type="text/javascript"></script>

    <!-- Underscore -->
    <script src="js/lib/underscore.min.js" type="text/javascript"></script>

    <script src="js/lib/jquery-plugins/data-selector.js" type="text/javascript"></script>

    <!-- statusbar -->
    <script src="js/lib/statusbar.js" type="text/javascript"></script>

    <!-- Own libs -->
    <script src="js/app/namespace.js" type="text/javascript"></script>
    <script src="js/app/translation.js" type="text/javascript"></script>
    <script src="js/app/toast.js" type="text/javascript"></script>
    <script src="js/app/config.js" type="text/javascript"></script>
    <script src="js/app/settings.js" type="text/javascript"></script>
    <script src="js/app/utils.js" type="text/javascript"></script>
    <script src="js/app/database.js" type="text/javascript"></script>
    <script src="js/app/grid.js" type="text/javascript"></script>
    <script src="js/app/sidebar.js" type="text/javascript"></script>
    <script src="js/app/logo.js" type="text/javascript"></script>

    <script src="js/app/news.js" type="text/javascript"></script>
    <script src="js/app/registration.js" type="text/javascript"></script>
    <script src="js/app/sync.js" type="text/javascript"></script>
    <script src="js/app/login.js" type="text/javascript"></script>
    <script src="js/app/cart.js" type="text/javascript"></script>
    <script src="js/app/productdetail.js" type="text/javascript"></script>
    <script src="js/app/customer.js" type="text/javascript"></script>
    <script src="js/app/recipe.js" type="text/javascript"></script>
    <script src="js/app/endlessgrid.js" type="text/javascript"></script>
    <script src="js/app/visitreports.js" type="text/javascript"></script>
    <script src="js/app/reports.js" type="text/javascript"></script>
    <script src="js/app/progresshandler.js" type="text/javascript"></script>
    <script src="js/app/departments.js" type="text/javascript"></script>
    <!-- iScroll -->

    <script src="js/lib/iscroll/iscroll.js" type="text/javascript"></script>
    <script src="js/lib/iscroll/jquery.mobile.iscrollview.js" type="text/javascript"></script>
    <link href="js/lib/iscroll/jquery.mobile.iscrollview.css" rel="stylesheet" type="text/css" />
    <link href="js/lib/iscroll/jquery.mobile.iscrollview-pull.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript">
        $(document).bind("mobileinit", function(){
              $.mobile.hashListeningEnabled = false;
          });

    </script>
    <script src="js/app/app.js" type="text/javascript"></script>

    <!-- Debugger -->
    <!--<script src="http://192.168.100.199:8080/target/target-script-min.js#anonymous"></script>-->
    <!--<script src="http://192.168.16.125:8080/target/target-script-min.js#anonymous"></script>-->
    <!-- <script src="http://debug.phonegap.com/target/target-script-min.js#bee0a570-a515-11e3-8d7c-22000a98b3d6"></script> -->

</head>
<body>
    Content is probably not relevant and also way too long
</body>

You mean the "#" in my form action? I define my action in the javascipt. It'll use an ajax call to communicate to my server code. — Jordec, May 16 '16 at 14:33
@t0mm13b yes and after pressing the button(s) over and over, the breakpoint eventually trigger. But very rarely from the first attempt. — Jordec, May 18 '16 at 10:40
Are you using additional scripts? Can you show us your index.html? — t0mm13b, May 18 '16 at 10:57
OP updated. I also tried commenting out a few of them to see any difference in behaviour, but without success. But I'm willing to do it again for the sake of 'you never know' — Jordec, May 18 '16 at 11:39
Ok, cordova script should be the last after the other scripts. Also, could not help noticing, iScroll could be interfering with the click events, comment out both references to it in js code and the script from there and try again. — t0mm13b, May 18 '16 at 11:47
I applied the changes, but nothing changed. Changed html can be found here http://pastebin.com/V9Rru0Rg — Jordec, May 18 '16 at 13:08

score 2 · Answer 1 · edited May 23 '17 at 12:15

2

On the button regRegister put action onclick="yourFunction()"

and read this : How to add function on button in phonegap?

edited May 23 '17 at 12:15

Community

1
1

answered May 25 '16 at 07:44

CristiC777

481
11
20

score 0 · Answer 2 · answered May 22 '16 at 21:21

The regRegister button has type=button, not type=submit, however I am not sure this is the problem. I had similar issues with tap not working in an Ionic / Cordova app and the problem was that Ionic's tap system was interfering with some maps I was loading (OpenLayers). In Ionic the solution is this one.

Perhaps one of the libraries you are loading interferes with jQuery Mobile.

score 0 · Accepted Answer · answered May 25 '16 at 08:21

0

I solved the issue as it was a HTML problem. On top of my HTML there was a div that covered the whole screen. This div had a display: none style attached to it which made it impossible for me to click on it. By removing this I was able to click every button again.

answered May 25 '16 at 08:21

Jordec

1,516
2
22
43

ok :) have fun ! but read how to attach an action to a button for calling a function :) for your programming future :D – CristiC777 May 25 '16 at 09:55

Cordova form doesn't submit or buttons are not working (android +4.4)

Update

3 Answers3