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;
});
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
using jQuery UI 1.9.2 (upgraded from 1.8.23) and I see this on the Upgrade guide;
Deprecated url method and use of title attribute; use aria-controls attribute
(#7132) The url method has been deprecated in favor of leaving the href attribute unmodified even for remote tabs. The href attribute will point to the actual resource and the aria-controls attribute will point to the associated panel. This means that the title attribute will no longer be used to specify a custom panel id.
I have this code:
var $t = $("#tabs");
$t.tabs("url", 0, url);
$t.bind("tabsload", function (event, ui) {
console.log('tabsload fired');
});
$t.tabs("load", 0);
I cannot figure out how to set the url value for the tab (this code is fired when the user clicks on a grid row and the url value is rebuilt based on grid values) now as I do not understand the upgrade guide to use the aria-controls comment.
The approach I have taken is to set the href of the AJAX link and then call the load method to reload the content.
I appreciate that this does not use the aria-controls attribute, but the snippet from the upgrade guide states that this attribute points to the panel - remote tabs receive their content based on anchor contained in the li element, so I figured I should be able to use this approach.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Scripts/jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.min.css"
rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs();
$('#change-button').click(function (event) {
$('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at ' + new Date().toTimeString());
$('#tabs').tabs('load', 0);
event.preventDefault();
});
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="tabs">
<ul>
<li>
<a id="ajax-link" href="Handler1.ashx?echo=some text to repeat">Tab 1</a>
</li>
</ul>
</div>
<button id="change-button">Change</button>
</form>
</body>
</html>
I am using a generic HTTP handler (this is the AJAX request) which simply echos back the text it is passed, e.g., Handler1.ashx?echo=some text to repeat. Note that my tabs consist of only one tab that makes an AJAX call to this handler.
To change the Url, I handle the click event of the button and modify the href of ajax-link like this and then reload it:
$('#ajax-link').attr('href', 'Handler1.ashx?echo=changed at '
+ new Date().toTimeString());
$('#tabs').tabs('load', 0);
So for this to work you will need to provide the link you wish to change with an ID and you will need to know at which position the tab page occurs.
I've been trying to figure this out but still stuck.
so I'm using PhoneGap for iOS and JQueryMobile.
I'm trying to show alert when a button is clicked.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
and I have
this
Login
$(document).ready("#button").click(function() {
alert('button clicked');
});
when I tried to launch this in chrome, this works fine.
however, when I used iphone simulator, it doesnt show anything.
For a normal web application you would use dom ready i.e.
$(function(){ // <-- this is a shortcut for $(document).ready(function(){ ... });
$('#button').click(function(){
alert('button clicked');
});
});
However in a JQM application it is much more useful to bind to 'pageinit' i.e.
$(document).on('pageinit','[data-role=page]',function(){
$('#button').click(function(){
alert('button clicked');
});
});
Binding to pageinit works better because JQM inserts new pages into the same dom as the first page. Because of this all of your code in dom ready doesn't get called again. So that first bit of code i put above will only work for that first page in your JQM application. The second will work no matter what page your button is in. Let me know if I can clarify this further for you.
i have this code that should create a dialog with the page google inside when the link is clicked:
<?php use_javascript('/sfJqueryReloadedPlugin/js/jquery-1.3.2.min.js') ?>
<?php use_javascript('/sfJqueryReloadedPlugin/js/plugins/jquery-ui-1.7.2.custom.min') ?>
<?php use_stylesheet('/sfJqueryReloadedPlugin/css/ui-lightness/jquery-ui-1.7.2.custom.css') ?>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:hidden"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog();
}
);
//prevent the browser to follow the link
return false;
});
});
</script>
<a class="ajax" href="http://www.google.com">
Open a dialog
</a>
The problem: it shows the dialog but google is not inside.
I dont have any problems with:
<script type="text/javascript">
$(function() {
$("#dialog").dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Any idea?
Javi
You cant make cross-domain ajax requests. This means that you cant GET the html from google.com and shove it into your dialog. If you want to have google show up in your dialog then you will probably want to use an iframe, or just write your own html to look like google and when they hit search open a new window with the results
For security reasons, you cannot make an AJAX request to a domain other than the domain that originally served the webpage. For examples of security risks, see http://en.wikipedia.org/wiki/Same_origin_policy
Instead, you should consider using a hidden iframe with the Google page loaded inside of it that will then appear in the correct location when the button is clicked.
For example:
<iframe src="http://www.google.com/" style="display:none">
<p>Your browser does not support iframes.</p>
</iframe>
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">