Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

android

cordova

jquery-mobile

webview

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.
enter image description here

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>
like image 964
Jordec Avatar asked Oct 31 '22 03:10

Jordec

1 Answers

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

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

like image 155
CristiC777 Avatar answered Nov 13 '22 15:11

CristiC777
Sign in to Comment

Related questions

VerifyError when using Instant Run
Getting a Permission Denial when querying my own ContentProvider from my own App
Android Fingerprint - Crypto primitive not backed by AndroidKeyStore provider
Dexguard / Proguard make app crash on Enum switch
Clickable View Pager in Android
Android Emulator Camera Displaying Blocks
Crop YUV420/NV21 byte array directly in android
Android OS thinks app is not responding when at breakpoint during debug
Realm "cascade delete" on Android
How can I query GcmNetworkManager to see if my task is scheduled or not?
Sinch Call Recording Android
Set a delay in libGDX
When Have All The Views In A Fragment Been Given A Size?
Android MVP - Which model to present to view
Adding third party library dependencies to Android Library
Could not create Android emulator: Failed to parse AVD config file
Using Content URI with ACTION_VIDEO_CAPTURE
How to download a pdf file in Android?
Failed to find style 'mapViewStyle' in current theme
Android WebView Javascript getSelection

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!