I just inherited a website and haven't worked on website for about 15 years and am not familiar with programing for touch screens.
I have the below onClick submit code that works on all browsers (including Safari desktop on PC) that I have tested as well as using Google search on an iPad, but when attempting to press the "Submit" button when accessing the site via iPad Safari it will not fire. I've search for JQuery solutions, but am not up to speed on JQuery. Any help appreciated.
function submitentry()
{
password = document.password1.password2.value.toLowerCase()
username = document.password1.username2.value.toLowerCase()
passcode = 1
usercode = 1
for(i = 0; i
<center>
<form action="" name="password1">
<strong>User * * : </strong>
<input type="text" name="username2" size="15">
<br>
<strong>Password: </strong>
<input type="password" name="password2" size="15">
<br><br>
<input type="button" value="Submit"onClick="submitentry(); return true">
</form>
Turns out that any non-anchor element assigned a click handler in jQuery must either have an onClick attribute (can be empty like below):
onClick=""
OR
The element css needs to have the following declaration:
cursor:pointer
via : http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working
I'm not sure but that's probably because touch devices doesn't have pointer.
Try .live():
$(document).ready(function(){
$("#submitButton").live("click", function(){
// do something
}
});
Or, try this plugin:
https://github.com/aanand/jquery.tappable.js
I suggest you to try to avoid writing unobtrusive code such inline event handlers like onclick, onmousedown, etc because different browser work differently. Especially in touch devices.
Thanks for the suggestion. Being new to jQuery it is taking me awhile to get up to speed. Below is what I got to work, so far, but still am having problems with the touch screen on iPad when accessing the site using Safari. But it does work, strangely, when I access the site using Google on the iPad. Strange, I think!
My HTML input statement is:
<input type="button" value="Submit" id="click"/>
jQuery:
$('#click') .click(function(){
submitentry();
});
I'm thinking that if I use something other than .click it might work. Just need to figure out what. We'll see...
Related
In iOS 8 and above, to show the Search button on the iOS keyboard, you use the action attribute in the form. From Anton's answer here ... Show 'Search' button in iPhone/iPad Safari keyboard
<form action=".">
<input type="search" />
</form>
But this does not work when you are using an AngularJS form with ng-submit like this
<form action="." ng-submit="doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
The action attribute breaks the Angular form submit.
Any suggestions on how to put a dummy action attribute and still get ng-submit to handle the form processing? Or any other solution that would show the iOS keyboard's search key with an AngularJS HTML5 form.
Just encountered the same problem, key here is that angular prevents default form submission only if no action specified, so if you want to specify one you need to preventDefault manually, which should be pretty easy.
This should work (worked for me):
<form action="." ng-submit="$event.preventDefault();doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
Also note, that you will need to blur() your input field after you made a Search request in order to auto-hide keyboard.
Update:
With the latter this directive will help you:
.directive('prettySubmit', function () {
return function (scope, element, attr) {
var textFields = $(element).children('input');
$(element).submit(function(event) {
event.preventDefault();
textFields.blur();
});
};
})
I have placed preventDefault() in directive, so your form will look like this:
<form action="." ng-submit="doSearch(searchtext)" pretty-submit>
<input type="search" ng-model="searchtext" />
</form>
I encountered the same problem.
Finally I decided to use
<form action="{{'#/search/' + searchText }}">
Instead, and it works.
I'm really hoping someone can help. I just got over one big hurdle in my current project, only to hit another. I have a deadline fast approaching, so any advice would be very much appreciated.
I am developing a mobile application for iPad using MVC4 and Jquery Mobile. At a certain point in my app, the user will trigger a pop-up box, which contains "yes" and "no" buttons. If the user clicks "yes", I want to send some parameters to an action in my controller, do some database work, and then return a partial view (with updated model) that will be displayed in my main view. I have the following jquery that executes upon click of a href button that is inside a pop-up.
$(function () {
$("#popupSubmit").bind("tap", tHandler);
function tHandler(event) {
$.post('#Url.Action("LoadTestData", "WO")',
{TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestServiceRequestNum.innerHTML },
function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); });
}
});
In the above code, #popupSubmit is the href button, LoadTestData is an Action that returns a partial view, WO is the Controller, and #detailsDiv is a placeholder div in the main view. TestKey and TestRequestNumber are parameters that must be passed to the Action. Below is the code for the Action, LoadTestData. _ShowTestPartial is the Partial View.
[HttpPost]
public ActionResult LoadTestData(string TestKey, string TestRequestNumber)
{
//do database work
return PartialView("_ShowTestPartial", model);
}
Now, all of this code works on my desktop in Safari. However, this DOES NOT work on the iPad. I've tested, and the code does make it into the tHandler event when the button is clicked on the iPad, but there's something about the URL.Action or about returning a partial view in this way that the iPad just doesn't like.
Does anyone know how to solve this issue for iPad?
Edit (additional info from comments): To be clear, the partial view isn't being rendered at all on iPad, but it is on desktop Safari (and in Chrome for that matter). I have tried replaced "create" with "pagecreate" but this actually took away the JQM styling in the desktop browers and didn't change anything about the iPad.
It also doesn't seem to matter where I place the bind function...I've tried it as a separate function. I've tried it in .ready() and in .on('pageinit'). In all of these cases, it works on desktop Safari and Chrome, but not on iPad.
Also, as I said before, the .bind("tap") works on iPad. I've tested by putting other code in the tHandler. However something in the .$post does not work on iPad.
Thank you Omar, and anyone else who has any ideas. All are welcome!
Edit # 2: On Omar's advice I moved my function to $(document).on('pageinit'). I also added error catching on the $.post. Updated code below:
$(document).on('pageinit', function () {
$("#popupSubmit").bind("tap", tHandler);
function tHandler(event) {
$.post('#Url.Action("LoadTestData", "WO")', { TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestRequestNum.innerHTML })
.done(function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); })
.fail(function (xhr, textStatus, errorThrown) { alert(xhr.responseText); })
}
});
Fortunately, this enabled me to see the error occurring on the iPad. Unfortunately, the error coming out of $.post is "An unknown error occurred while processing your request". Everything is still running smoothly on the desktop browsers with this code.
It turns out the answer was that, on the iPad the parameters were not getting passed to $.post. lblTestRequestNum and lblTestKey are labels on my JQM popup dialog box. See below:
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="b" data-dismissible="false"
style="max-width:416px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Selection <label id="lblTestRequestNum" style="text-align:left; height:22px; font-size:14px;">#Model.TestRequestNumber</label></h1>
</div>
<div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">
<h3 class="ui-title" style="text-align:center; height:22px;">Are you sure?</h3>
<label id="lblTestKeyLabel" style="text-align:left; height:22px; font-size:14px; margin-left:95px;">Test Key: </label>
<label id="lblTestKey" style="text-align:left; height:22px; font-size:14px;"></label>
<label id="lblTestType" style="text-align:left; height:22px; font-size:14px; margin-left:95px;"></label>
<a id="popupSubmit" data-role="button" data-inline="true" data-rel="back"
data-mini="true" data-theme="b" style="width:150px;" type="submit">Yes</a>
<a href="#" data-role="button" data-inline="true" data-rel="back"
data-mini="true" data-transition="flow" data-theme="b" style="width:150px;">No</a>
</div>
</div>
On the desktop, Safari was able to retrieve the parameters I needed from the labels in the popup. But on iPad, it could not. So, I simply found places outside of the pop-up, in my main view to display/retrieve my parameters from. Lesson learned: Don't expect iPad to be able to read anything from labels/inputs inside your pop-up dialog.
I currently have a link in the below form:
Change
In order to fit the look of the site in which I'm adding this link, I want to change it to a button input, as so:
<input type="button" value="Change" onclick="changeNumbers('Numbers', '#Url.Action("ChangeNumbers")')" />
However, I'm running into a snag with this second form: the single quotes around #Url.Action("ChangeNumbers") are being flagged as Unterminated string constant. Can anyone tell me what I'm doing incorrectly and how to fix it?
EDIT
It didn't occur to me to just try the page - it looks like the second form works. So now my question is - why is Visual Studio flagging this as incorrect?
You're not doing anything "incorrectly" per se, it's just that Razor isn't perfect, and things like quotes within quotes tend to cause it to freak.
One quick fix would be to store the URL in a variable and then use the variable:
#{ var url = Url.Action("ChangeNumbers"); }
<input type="button" value="Change" onclick="changeNumbers('Numbers', '#url')" />
However, an even better fix is to not use the onclick attribute at all. Put this where it belongs: in JS.
<script>
$('#myButton').on('click', function () {
changeNumbers('Numbers', '#Url.Action("ChangeNumbers")');
});
</script>
Used jQuery above, since it's included in MVC by default
I've found that to make Visual Studio happy in this scenario, the easiest thing to do is simply change the <input /> element to a <button></button> element and the error will resolve itself:
<button type="button" onclick="changeNumbers('Numbers', '#Url.Action("ChangeNumbers")')">Change</button>
Otherwise, to continue using an <input /> the markup will need to be changed to the following:
<input type="button" value="Change" onclick="#("changeNumbers('Numbers', '" + Url.Action("ChangeNumbers") + "')")" />
How can I close a browser page via eg. an HTML button and Dart?
I've tried
window.close();
which doesn't appear to do anything;
I've also tried :
window.document.$dom_dispatchEvent();
using CloseEvent, but I'm not sure how to set that up.
I've also tried HTML and javascript without success.
Please advise how this can be done. It's needed for desktop-type apps IMO.
I used this:
<form method="post">
<input type="button" value="Close Window"
onclick="window.close()">
</form>
Maybe try
window.focus(); window.close()
I asked about this on the jquery forum a few weeks ago without luck, so I will try again here :)
I've made a simple widget for a project I'm working on, but I have encountered an odd problem.
It is easiest to explain it with an example implementation.
http://decko.dk/buttontest
On the page there are 3 button. The first one is my drop down widget. The next one is a regular disabled button (A) and the last one a regular enabled button (B).
If you then refresh the page (press F5 or whatever) the enabled button is mysteriously now disabled.
I have no clue why this happens, but if button A is not disabled to begin with, button B will not be disabled when refreshing. Also, if I remove the call to insertAfter in my widget-code, the button will not be disabled.
Can anyone shed light on why this strange behavior occurs?
By the way, I have only been able to reproduce this in Firefox.
I believe this is a bug in how Firefox remembers form field/control values and states:
After the first page load, there are three <button> elements in the document, and <button id="button_a"> is disabled. (When the jQuery UI styled button is enabled or disabled, it sets the underlying element to the same state.)
Firefox remembers that the second <button> is disabled.
After a page refresh, before any scripts are run, Firefox restores form fields and controls. It disables the second <button>, but since no script has been run, the second button is <button id="button_b">.
When jQuery UI creates the styled button for <button id="button_b">, it sees that it is disabled and continues to style it as disabled.
There are two issues here:
How Firefox remembers which elements are disabled. It's not taking into account dynamic elements. I suggest filing a bug with Mozilla for this.
Form elements stay disabled after a page refresh. I'm not sure if this is the correct behaviour, but there are two bugzilla reports on this.
The test case can simplify down to just adding a <button> element dynamically and disabling <button id="button_a">, no jQuery / jQuery UI necessary:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>disabled button test</title>
<script type="text/javascript">
window.onload = function () {
var a = document.getElementById('button_a'),
menu = document.createElement('button');
menu.appendChild(document.createTextNode('Menu'));
document.body.insertBefore(menu, a);
a.disabled = true;
};
</script>
</head>
<body>
<button id="button_a">A</button>
<button id="button_b">B</button>
</body>
</html>
I've been getting this problem also and worked out it was down to silly behaviour in firefox, my fix was as so:
before:
//set up the buttons
$("button").button();
after:
//set up the buttons (and make sure firefox behaves)
$("button").button().attr("autocomplete", "off");
Setting the Expires HTTP header to a date in the past, solved the problem for me in Firefox 6.0.
Here is the solution I found works really well in all browsers...
I give each button (that can be disabled) a class 'js_submit'
I then re-enable any disabled buttons with class 'js_submit' on the pagehide event that fires when a page is unloaded.
I wrap the event assignment inside a try catch to prevent browsers that don't support this event from throwing an error (such as IE).
Here is the code:
<input id="button" type="button" value="Submit" class="js_submit" />
// Fix for firefox bfcache:
try {
window.addEventListener('pagehide', PageHideHandler, false);
} catch (e) { }
//Fires when a page is unloaded:
function PageHideHandler() {
//re-enable disabled submit buttons:
$('.js_submit').attr('disabled', false);
}
In my case it was a Bootstrap bug
<input id="appointmentBtn" type="button"
ng-click="addAppointment()" class="btn btn-primary btn-xs
disabled" value="Add Appointment">
Instead it should have been
<input id="appointmentBtn" type="button"
ng-click="addAppointment()" class="btn-primary btn-xs
disabled" value="Add Appointment">