I have a jQuery Mobile App that relies on a popup to run a Time & Attendance system. The system works fine except for IE versions 9+ on Windows 8+.
When the button to check in/out at a client is pressed, a POST request is sent to a handler page to manage the request (ie validate data, enter into database) before being forwarded to the relevant client entry.
What appears to be happening is the button event is being fired twice. The first time is flagged as "Aborted" (as seen in Result column of the F12 Developer Tools) before it is called again (I would post images, but don't have sufficient reputation). However it seems the call is making it to the handler page, despite being supposedly aborted, as there are TWO entries appearing in the database.
The code for the button is as follows:
<button data-inline="true" data-mini="true" data-theme="b" data-ajax="false" id="submitBtn" onClick="this.form.submit(); this.disabled=true;">Check Out / Split Visit</button>
I deliberately disable the button so users can't click on the button multiple times. I have tried different ways of generating the button, including using a href and setting the data-role to button and making the button a submit button - the same thing occurs. There is no other JavaScript running on the button click as it was playing up with some mobile devices (user validation is done on the handler page).
I can force the page to render as an older version of IE by setting the X-UA-Compatible to be IE=7, but this makes the app awful to look at and I'm not sure about the security aspects of forcing IE to handle the page as an earlier version.
I'm using jQuery Mobile 1.3.2 and jQuery 1.10.2 as the newer versions don't have some features that are core to our application. The backend is written in PHP. The fault has been duplicated on Windows Phone 8, a Surface 3 and Windows 8.1 Desktop.
Popup Code:
<div data-role="popup" id="checkInOut" data-theme="b" data-dismissible="false" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
<h3 id="checkTitle">Check-In At Client</h3>
<form action="checkInOutHandler.php" method="post" name="checkInOutForm" id="checkInOutForm" data-ajax="false">
<input type="hidden" name="TAClientID" id="TAClientID" />
<input type="hidden" name="actionType" id="actionType" value="In" />
<label for="useCurrentTime">
Use Current Time
</label>
<input id="useCurrentTime" name="useCurrentTime" type="checkbox" class="useCurrentTime" data-mini="true" checked="checked" />
<!-- Hidden Div for the manual entry of time !-->
<div id="customTimeDiv" style="display: none;">
<label for="customTime">
Enter the time you wish to use (in 24 Hour format hh:mm)
</label>
<input id="customTime" name="customTime" type="time" placeholder="Enter Time (hh:mm)" data-mini="true" />
<label for="customReason">
You MUST select a reason for not using the current time
</label>
<select name="customReason" id="customReason" data-theme="b" data-icon="arrow-d" data-inline="true" data-mini="true">
<option value="" selected>Please select a reason...</option>
<option value='937'>No reception</option><option value='938'>Forgot</option><option value='943'>Phone flat / not working</option><option value='944'>Problem with portal</option><option value='949'>Split Visit</option><option value='964'>Incorrect Client Selected</option><option value='963'>Incorrect Service Selected</option><option value='945'>Other (Payroll may call to confirm)</option> </select>
</div>
<!-- End Hidden Div !-->
<br />
<input type="hidden" id="travelTime" name="travelTime" data-mini="true" data-inline="true" value="0" />
<button data-inline="true" data-mini="true" data-theme="b" data-ajax="false" id="submitBtn" onClick="this.form.submit(); this.disabled=true;">Check In</button>
Cancel
</form>
</div>
Header Code:
<!DOCTYPE html>
<html>
<head>
<title>SMNCC App</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="https://portal.suemann.com.au/favicon.ico" />
<!-- <script type="text/javascript" src="./js/timeTrack.js"></script>!-->
<script type="text/javascript" src="./js/readNewsItem.js"></script>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile.min.css" /> <!-- Original File: jquery.mobile-1.3.2.min.css !-->
<link rel="stylesheet" href="./themes/hartijaPrint.css" type="text/css" media="print"> <!-- Hartija print CSS framework !-->
<script type="text/javascript" src="./jqueryMobile/jquery.min.js"></script> <!-- Original File: jquery-1.10.2.min.js !-->
<script type="text/javascript" src="./jqueryMobile/disableAjax.js"></script>
<script type="text/javascript" src="./jqueryMobile/jquery.mobile.min.js"></script> <!-- Original File: jquery.mobile-1.3.2.min.js !-->
</head>
<body
I'm not running Windows 8 so I can't test it, but you can check to see if the button has already been pressed using jQuery.
Eg: Html code:
<button id="mybutton">Click me!</button>
jQuery:
var alreadySent = false;
$(document).ready(function() {
$("#myButton").click(function(event) {
event.preventDefault();
if (!alreadySent) {
sendPostRequestOrWhatever();
alreadySent = true;
}
$(this).prop("disabled", true);
});
});
Of course, this assumes that when you say the button fires twice you mean that the click event is running twice. If the click event is only firing once but the send request is firing twice, then the code won't work.
Related
I'm trying to set focus to a particular edit field when a page opens or button is pressed. The following simple HTML/Javascript (Test.html) works with Firefox and Chrome but not Safari. Safari will clear the text with the clear button and post it with find button but not select it when the select button is pressed. Any help would be appreciated. (iOS 7 on an iPad 2)
Update -- Replaced with working code
<html>
<head>
<!-- Latest JQuery; Must be loaded before Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
$(document).ready(function()
{
var identNum = document.getElementById("identNum");
identNum.value = "AAAABBBB111"
identNum.focus();
identNum.setSelectionRange(0, identNum.value.length);
});
</script>
<body>
<div>
<form class="form-horizontal" name="myForm" role="form" action="Test" method="post">
<div class="form-group" align="center">
<div>
<label class="control-label">Text:</label>
<input type="text" id="identNum" name="identNum" size="25" value="" style="text-align:center;'">
</div>
<div>
<button class="btn btn-primary">Find</button>
<a class="btn" onclick="javascript:document.getElementById('identNum').value=''" >Clear</a>
<a class="btn" onclick="javascript:document.getElementById('identNum').focus(); document.getElementById('identNum').setSelectionRange(0, identNum.value.length)" >Select</a>
</div>
</div>
</form>
</div>
</body>
</html>
EDITED TO INCLUDE .focus()
Try
javascript:document.getElementById('identNum').focus().setSelectionRange(0, 999);
Mobile devices, in particular iOS can be quite funny about select();
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
EDIT: A note on input focus without user interaction
As found by #zappullae
It appears that in recent versions of iOS, Apple require user interaction in order to activate the keyboard, so this will not be possible on page load.
https://medium.com/#brunn/autofocus-in-ios-safari-458215514a5f
I have a basic login page with some styling as you'll see in the example. In the end, there's a jQuery script to do an animation for 1500ms whilst loading the next page.
I've encountered a strange bug where approx. 50% of the time, it'll do the animation and load the next page - but the remaining approx 50%, it'll just route to the /static/jquery.min.js file and open it in the browser(with the given URL to the path). I'm no jQuery shark. What gives?
Sample code, a login.html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src='static/jquery.min.js'></script>
<link rel="shortcut icon" type="image/png" href="static/images/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="static/images/bg.jpg"/>
<meta charset="UTF-8">
<title>Title!</title>
<style>
// Lots of css for the login form
</style>
</head>
<body>
<div class="login">
<header class="login-header"><span class="text"><h4>Title!</h4></span><span class="loader"></span></header>
<form class="login-form" id="log-inform" action="/loginp" method="post">
<label><input class="login-input" type="text" name="username"/><h3>user</h3></label>
<label><input class="login-input" type="password" name="password"/><h3>password</h3></label>
<button class="login-btn" type="submit">login</button>
</form>
</div>
<script>
// jQuery function for animation after successful login
$('.login-input').on('focus', function() {
$('.login').addClass('focused');
});
function doOnSubmit(e) {
e.preventDefault();
$('.login').removeClass('focused').addClass('loading');
setTimeout(function(){
$('.login-form').submit();
},1500); // time in ms to do animation whilst loading the next page
$('.login').unbind('submit', doOnSubmit);
}
$('.login').on('submit', doOnSubmit);
</script>
</body>
</html>
As said - it works completely as intented about half the time. But why would it redirect to the https://localhost:port/static/jquery.min.js half the time? It just opens it up on the browser.
Edit: I think I've narrowed it in a bit. The first time, it'll open the jquery.min.js - the second time, I can login. So it must be related to loading the jquery.min.js?
Second edit: It can be closed. It wasn't related to this code, but rather permissions for loading files from the Java backend. Sorry
I am trying to use jquery virtual keyboard - http://mottie.github.io/Keyboard/mobile.html to create a numbers only input text with a few accelerator keys for a mobile web application.
However I am having a huge issue that is the native android keyboard gets triggered when i press the input box to trigger the on-screen/ virtual keyboard. How do I trigger only virtual keyboard, other plugins can also be used. I have tested a few that all have the same issue.
Perhaps there is a way to disable the input field so it does not trigger the native keyboard but still triggers the on-screen one? making input "readonly" has some issue.
I have the same issue as this other so user: https://stackoverflow.com/questions/15289281/disable-mobile-default-keyboard-to-show-up-using-my-own-virtual-keyboard-web-a however there is no answer to his question.
First attempt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Keyboard Basic Demo</title>
<!-- demo -->
<link href="demo/demo.css" rel="stylesheet">
<!-- jQuery & jQuery UI + theme (required) -->
<link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<!-- keyboard widget css & script (required) -->
<link href="css/keyboard.css" rel="stylesheet">
<script src="js/jquery.keyboard.js"></script>
<!-- keyboard extensions (optional) -->
<script src="js/jquery.mousewheel.js"></script>
<!--
<script src="js/jquery.keyboard.extension-typing.js"></script>
<script src="js/jquery.keyboard.extension-autocomplete.js"></script>
-->
<!-- initialize keyboard (required) -->
<script>
$(function(){
alert("Keyboard ON");
//$('#keyboard').keyboard();
$('#keyboard').on('click tap vclick', function (event) {
//alert("detected touch");
event.stopImmediatePropagation();
event.preventDefault();
$('#keyboard').keyboard();
});
});
</script>
</head>
<body>
<!-- Links to other demo pages & docs -->
<div id="nav">
Main Demo
<a class="current" href="basic.html">Basic</a>
Mobile
Layouts
Navigate
Calculator
<a class="play" href="http://jsfiddle.net/Mottie/MK947/">Playground</a>
<a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
<a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
<a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a><br><br>
</div>
<!-- End Links -->
<div id="wrap"> <!-- wrapper only needed to center the input -->
<!-- keyboard input -->
<input id="keyboard" type="text">
<div><p>Static TEST</p></div>
</div> <!-- End wrapper -->
</body>
I added the following code it does appear to work, however more testing is required to make this a solid workaround:
$('.keyboard').on('focus click tap vclick', function (event) {
event.stopImmediatePropagation();
event.preventDefault();
$('.keyboard').blur();
});
You can add readonly to the <input> tag, this will stop the native keyboard from appearing. Though remember to remove it for desktop users, which will require some device detection which is never fun.
Just use the global attribute <div inputmode="none">,it shoule help.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.
I am using phonegap like this in my application, also note the app is being styled by jquery mobile,
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
I have this html,
<div id="sync" data-role="page">
<div data-role="header" data-position="inline">
<a data-rel="back" data-icon="back">Back</a>
<h1>Sync</h1>
</div>
<div data-role="content">
<button onclick="sync()">Sync</a></button>
</div>
</div>
I have compiled this for Android and have it working on my Android phone.
But the button there called 'sync' is not always responsive. I click the button and the sync() method doesn't get called every time. I find myself clicking the button a number of times. I can see the button moving when I click it, it is responding by drawing itself being pushed in, but the sync method is not being called.
The sync method starts like this,
function sync()
{
alert("syncing");
$.mobile.loadingMessage = "syncing";
$.mobile.showPageLoadingMsg();
I put the alert in for debugging purposes.
UPDATE:
It has been pointed out that my HTML has an extra tag in it. I have removed it as below but the problem still exists,
<div data-role="content">
<button onclick="sync()">Sync</button>
</div>
I had a similar problem in my application. I tried two different things but I'm not sure wich fixed it.
I added charset="utf-8" in my script tag.
I moved the button click function in to its own script tag. I think there's an error in the other JavaScript block that is preventing the button click function from working when it's in that script block. So you can try isolating the button click JavaScript and see if that helps.
Joke answer: did you push the button hard enough?
Possibly the problem answer:
<button onclick="sync()">Sync</a></button>
^^^^---dangling tag
Is that </a> possibly the cause of the button breaking?