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.
Related
Primefaces log has display but how can it will close option include.
I try below code:
<p:log id="log" />
In this code log panel is display but close option is never show because i just view log and close it. If there is any way to close log panel
Use .hide() method of PrimeFaces logger:
<p:commandButton type="button" value="close" onclick="PrimeFaces.logger.hide()" />
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'm implementing some kind of frontend editor in my web page, using rich:editor. When clicking a link, the editor should open, and after saving editor's content, the editor should close again. I'm having trouble with onsave event for closing the editor. Here is my code.
This is the link that opens the editor, due to setting the property bean.show to true. It works ok:
<h:commandLink>
...
<f:setPropertyActionListener value="true" target="#{bean.show}" />
</h:commandLink>
This is the editor itself, only rendered when show evaluates to true:
<h:form>
<rich:editor value="..." onsave="showEditor(false)" rendered="#{bean.show}" />
</h:form>
The onsave event should close the editor by setting the show property to false again, but the editor stays open, because showEditor() is not called:
<a4j:jsFunction name="showEditor">
<a4j:param name="param1" assignTo="#{bean.show}" />
</a4j:jsFunction>
Am I doing something completely wrong? Or do you have any other ideas how to realize this? Any help is appreciated.
just double-checked: in version richfaces 4.x, there is no onsave attribute at all, but
oninit
onblur
onfocus
ondirty
onchange
like pointed out in the org.richfaces.component.UIEditor class. The same is true, if you want to use f:ajax to ajaxify the editor.
Right now, the "save"-icon in the editor just sends a form.submit() or something. So either try to add your jsFunction on that event or to introduce an own save-button.
Edit: Richfaces 4 uses the javascript based CKEditor, so if you want to overwrite their "save"-button, this forum entry regarding CKEditor's save implementation might be of your help.
Also a valueChangeListener might be a possibility solution to trigger your Bean.setShow(boolean show) property.
xhtml:
<rich:editor value="#{bean.editorValue}"
valueChangeListener="#{bean.valueChanged}" />
method in managed bean:
public void valueChanged(ValueChangeEvent e) {
// do the code to close the window here
}
The valueChangeListener also works in Richfaces 4.3, but maybe starting within the javascript of the CKEditor is the better choice.
Hope, that helps... L.
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 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">