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">
Related
I'm trying to get a slider to work in with JQuery Mobile 1.4.2.
What I would like to do is to use the slidestop event to update a value elsewhere. However, the slidestop event does not fire. I created a test file and tested in Safari and Firefox. Nothing happens when I stop sliding the slider. Could someone please tell me what tutorial I missed?
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<script src="js/jquery.min.js">
</script>
<script src="js/jquery.mobile.js">
</script>
<title>Concertzender</title>
</head>
<body>
<label for="slider-step">Input slider:</label>
<input type="range" name="slider-step" id="slider-step" value="150" min="0" max="500" step="10" />
</body>
<script>
$( "#slider-step" ).on('slidestop',function( event ) { alert("slidestop event fired"); });
</script>
</html>
EDIT:
I tried the answer suggested below, but I have a slightly more complicated setup than the example above and, therefore, it doesn't work out.
I am trying to avoid the page structure of JQuery Mobile and just use it for the slider. The thing is, when I change to another page, a pagecreate or pageshow is not present, so I cannot wait for those events. What I want is to create a new slider (or rather replace an empty div with another already existing div and then change the id of the formerly empty div's input id. So what I am left with is a unique newly ID'ed input (with corresponding label).
How would I go about and use the slidestop to interact with the new slider? I tried this:
$('newslider').slider();
$('newslider').on('slidestop', function(){alert("slidestop");});
But that gives me two sliders in Safari, of which one does the slidestop and the other is unresponsive. In iOS, however, I get one slider that slides, but does not fire a slidestop event. Omitting the first line gives me an unresponsive slider in Safari and one that doesn't fire in iOS.
So my question is pretty simple: How to enable the slidestop event for a new slider without using JQuery Mobile's pages?
You need to wrap all events/bindings in pagecreate.
$(document).on("pagecreate", function () {
$("#slider-step").on('slidestop', function (event) {
console.log("slidestop event fired");
});
});
Demo
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...
When I open a jQuery UI Dialog widget and the content in the dialog contains a textbox the dialog automatically closes when I press enter. This seems to happen only when using IE9 or IE10. I do not want the dialog the close when I press enter in the textbox.
I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<title>Testpage</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myDialog').dialog();
});
</script>
</head>
<body>
<div id="myDialog">
Some text
<input type="text"></input>
</div>
</body>
</html>
When you open this HTML page the dialog will close when you press enter (only in IE9+). Any suggestions?
It looks like in jQuery UI 1.10.x the close button in the upper-right changed from an <a> to a <button>. Since this button doesn't specify a type attribute, it is considered to be type="submit". When you press enter in IE9+, the browser looks for a submit button, finds the close button, and presses it.
There are a couple of ways to work around this problem, I'd argue that the best way is to correct the type of the close button by overriding the _init function of ui.dialog:
var baseInit = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function () {
baseInit.apply(this, arguments);
// Make the close button a type "button" rather than "submit". This works
// around an issue in IE9+ where pressing enter would trigger a click of
// the close button.
$('.ui-dialog-titlebar-close', this.uiDialogTitlebar).attr('type', 'button');
};
If the dialog doesn't need to be autoopened, after the dialog has been created and before it's opened:
$("button.ui-dialog-titlebar-close").attr("type","button");
Also, if you have any button elements in the dialog html, be sure to explicitly include the type="button" attribute in them, or enter in the input control will fire an action associated with the button.
The different between IE9/IE10 and IE11 seems to be that ie9 and 10 activate on keydown, while ie 11 activates the submit button on keyup.
If you are handling keyup to take your own action, it will work on most browsers...except ie 9-10. Another solution is to override keydown, but be careful to still allow certain controls to get the enter key:
$(document).on('keydown', '.ui-dialog', function (e) {
var tagName = e.target.tagName.toLowerCase();
if (e.which !== $.ui.keyCode.ENTER) return true;
if (tagName === 'textarea') return true;
if (tagName === 'select') return true;
e.preventDefault();
return false;
});
I have a dialog in my addon which is opened when some deletion process is completed. I use for all such messages XUL dialog that looks like this:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://myaddon/skin/Style.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://myaddon/locale/mydtd.dtd">
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
class="dialog" ondialogcancel="return true;">
<dialogheader id="dlgHdr"/>
<vbox flex="1" id="content" pack="center">
</vbox>
<script
type="application/x-javascript"
src="chrome://myaddon/content/mainScript.js"
/>
<script
type="application/x-javascript"
src="chrome://myaddon/content/dialogInit.js"
/>
<tfs_string id="new-profile-success" value="&newProfileSuccess.Text;"
style="overflow: hidden" />
<tfs_string id="delete-profile-success" value="&deleteProfileSuccess.Text;"
style="overflow: hidden" />
</dialog>
It has cancel button, ondialogcancel handler returns true. But it doesn't close immediately after pressing button. I have to drag this dialog a little to make it disappear. Moreover, this problem only happens when I restart browser after reinstalling addon. After one more restart dialog is closed immediately after i press Cancel. I use this dialog for some other messages, and they don't have such a problem.
If I close window and open it again with Chromebug debugger instead of restarting using popup, I can't reproduce this bug. But if I lauch another FF version and then first version again (with debugger), I manage to reproduce it. But when I use step-by-step execution on dialogcancel handler, Chromebug's interface becomes unresponsive (except script content area) and dialog doesn't close after I see in debugger that window.close() is executed, so I have to drag dialog window around a little again to make it disappear.
What should I do?
I finally found the reason. Problem was indeed caused by dialogInit.js script.
window.addEventListener('load', function () { myext.simpleDialogInitialize(); }, false);
window.addEventListener("MozAfterPaint", function () { window.sizeToContent(); }, false);
window.addEventListener('unload', function () { myext.simpleDialogFinalize(); }, false);
It contains even handlers for 'load' and 'unload' events. First one calls initializer specified in a method that opens this window. But there was one more handler for 'MozAfterPaint' event that called window.sizeToContent, so that infinite loop was triggered, I guess. Extension wasn't created from scratch so I didn't notice this mistake for some time. I moved resizing to the 'load' event handler after calling that initializer, works fine.
I have the same problem as posted here
I have a <button> element that triggers "A potentially dangerous request.form value..." error in asp.net MVC. For instance:
<button type="submit" name="logon" value="ok">Confirm</button>
<button type="submit" name="cancel" value="ok">Cancel</button>
And this javascript (with jquery UI 1.8.5)
<script type="text/javascript">
$(document).ready(function() {
$("button").button();
});
</script>
The issue is that I can't remove the name property (as the given solution in the link I posted) because I capture which button is pressed in the controller side this way:
public ActionResult Logon(FormCollection form, string logon, string cancel)
{
if (!string.IsNullOrEmpty(logon))
{
DoLogon();
}
if (!string.IsNullOrEmpty(cancel))
{
Cancel();
}
//etc
}
Is there any workaround for this? Thanks. Note that I don't have this problem in IE8 or firefox.
Have you seen this?
Cause
The .NET framework is throwing up an error because it detected something
in the entered text which looks like an HTML statement. The text doesn't
need to contain valid HTML, just anything with opening and closing
angled brackets ("<...>").
The solution proposed there is to disable the request validation on the server-side:
<pages validateRequest="false" />
Be sure to read through the warnings and explanations as well.