I have two conditions here, cond1 and cond2 .If its the cond1 I will disable my onclick event, else I will enable it.
This is what I fished out :
if(cond1) {
document.getElementById('mTag').removeAttribute("onclick");
} else {
document.getElementById('mTag').setAttribute('onclick');
}
The problem is once the onclick gets disabled , its not getting enabled again. If its cond2 , then it must be enabled . What am I doing wrong? Kindly suggest some solution to this.
Why would you do that? This will be annoying user experience anyway. Better is to disable/enable the tag:
document.getElementById('mTag').disabled = cond1;
To prevent the click event, you have to prevent the event from bubbling upwards.
document.getElementById('mTag').onclick = function(e) {
if (!e) var e = window.event;
event.cancelBubble = !cond1;
...
};
You did it wrong. Removing the attribute doesn't unbind the event.
This is the right way:
document.getElementById("mTag").onclick = null;
you don't need to remove onclick attribute you can set a flag in your handler
var enable;
function myhandler() {
if (enable) {
//my code
}
}
if(cond1){
enable = false;
} else {
enabled = true;
}
I think it's better to set a flag, and check for that flag at the beginning of your handler:
function handler(event) {
if ( !this.flag )
return;
// do the actual handling
}
Related
My web page uses iCheck checkboxes. I am trying to get event when Shift key is pressed along with clicking on checkboxes. but no where in the documentation, iCheck gives that notification like normal document.click(function()) gives.
I am using
$('input[name=selectinp]').on('ifChanged', function(event){
...
});
Here, event.shiftkey is undefined.
Please help.
I know this is an old question, but I will answer it to help any future folks that are looking for solutions. The iCheck library does not pass through the entire click event, so you can't check for event.shiftKey. Instead, you have to manually build your own variable that stores whether the shift key is pressed or not:
var shiftIsPressed = false;
$(window).keydown(keyDownHandler);
$(window).keyup(keyUpHandler);
function keyDownHandler(event) {
if (event.key == "Shift") {
shiftIsPressed = true;
}
}
function keyUpHandler(event) {
if (event.key == "Shift") {
shiftIsPressed = false;
}
}
$('input[name=selectinp]').on('ifChanged', function(event){
if (shiftIsPressed) {
...
} else {
...
}
});
I know it is not the smartest idea, but I still have to do it.
Our users want to use ENTER like TAB.
So, the best I came up with is this:
Ext.override(Ext.form.field.Base, {
initComponent: function() {
this.callParent(arguments);
this.on('afterrender', function() {
var me=this;
this.getEl().on('keypress',function (e){
if(e.getKey() == 13) {
me.nextNode().focus();
}
});
});
}
});
But it still does not work exactly the same way as TAB.
I mean, it works OK with input fields, but not other controls.
May be there is some low-level solution.
Any ideas?
In the past I've attached the listener to the document, something like this:
Ext.getDoc().on('keypress', function(event, target) {
// get the form field component
var targetEl = Ext.get(target.id),
fieldEl = targetEl.up('[class*=x-field]') || {},
field = Ext.getCmp(fieldEl.id);
if (
// the ENTER key was pressed...
event.ENTER == event.getKey() &&
// from a form field...
field &&
// which has valid data.
field.isValid()
) {
// get the next form field
var next = field.next('[isFormField]');
// focus the next field if it exists
if (next) {
event.stopEvent();
next.focus();
}
}
});
For Ext.form.field.Text and similar xtypes there is a extra config enableKeyEvents that needs to be set before the keypress/keydown/keyup events fire.
The enableKeyEvents config option needs to be set to true as it's default to false.
ExtJS API Doc
Disclaimer: I'm not an expert on ExtJs.
That said, maybe try something like:
if (e.getKey() === 13) {
me.blur();
return false; // cancel key event to prevent the [Enter] behavior
}
You could try this
if (e.getKey() === 13) {
e.keyCode = Ext.EventObject.TAB
this.fireEvent(e, {// any additional options
});
}
Haven't really tried this ever myself.
How to remove and event listener with an Anonym function , with removeEventListener();
document.getElementById("object").onclick = function(e){
if(e && e.stopPropagation) {
e.stopPropagation();
} else {
e = window.event;
e.cancelBubble = true;
}
}
So I have this piece of code and the function what's called must be anonym I'dont know why but If it's not then doesn't works correctly, maybe beacuse of the event :|
But If it's anonym how can I remove it?
Well you havent added an actual event listener, you have just populated the onclick variable with a function to be run. So you should be able to just use something like this:
document.getElementById("object").onclick = false;
EDIT
Just tried it in jsFiddle and what I suggested works.
Just give it a null value, which is the starting value when onclick is not initialized:
document.getElementById("object").onclick = null
I am using jquery to keep the focus on a text box when you click on a specific div. It works well in Internet Explorer but not in Firefox. Any suggestions?
var clickedDiv = false;
$('input').blur(function() { if (clickedDiv) { $('input').focus(); } });
$('div').mousedown(function() { clickedDiv = true; })
.mouseup(function() { clickedDiv = false });
Point to note: the focus() method on a jquery object does not actually focus it: it just cases the focus handler to be invoked! to actually focus the item, you should do this:
var clickedDiv = false;
$('input').blur( function() {
if(clickeddiv) {
$('input').each(function(){this[0].focus()});
}
}
$('div').mousedown(function() { clickedDiv = true; })
.mouseup(function() { clickedDiv = false });
Note that I've used the focus() method on native DOM objects, not jquery objects.
This is a direct (brute force) change to your exact code. However, if I understand what you are trying to do correctly, you are trying to focus an input box when a particular div is clicked when that input is in focus.
Here's my take on how you would do it:
var inFocus = false;
$('#myinput').focus(function() { inFocus = true; })
.blur(function() { inFocus = false; });
$('#mydiv').mousedown(function() {
if( inFocus )
setTimeout( function(){ $('#myinput')[0].focus(); }, 100 );
}
Point to note: I've given a timeout to focussing the input in question, so that the input can actually go out of focus in the mean time. Otherwise we would be giving it focus just before it is about to lose it. As for the decision of 100 ms, its really a fluke here.
Cheers,
jrh
EDIT in response to #Jim's comment
The first method probably did not work because it was the wrong approach to start with.
As for the second question, we should use .focus() on the native DOM object and not on the jQuery wrapper around it because the native .focus() method causes the object to actually grab focus, while the jquery method just calls the event handler associated with the focus event.
So while the jquery method calls the focus event handler, the native method actually grants focus, hence causing the handler to be invoked. It is just unfortunate nomenclature that the name of this method overlaps.
I resolved it by simply replace on blur event by document.onclick and check clicked element if not input or div
var $con = null; //the input object
var $inp = null; // the div object
function bodyClick(eleId){
if (eleId == null || ($inp!= null && $con != null && eleId != $inp.attr('id') &&
eleId != $con.attr('id'))){
$con.hide();
}
}
function hideCon() {
if(clickedDiv){
$con.hide();
}
}
function getEl(){
var ev = arguments[0] || window.event,
origEl = ev.target || ev.srcElement;
eleId = origEl.id;
bodyClick(eleId);
}
document.onclick = getEl;
hope u find it useful
I got a function which checks if some input fields are changed:
var somethingchanged = false;
$(".container-box fieldset input").change(function() {
somethingchanged = true;
});
And a function which waits on window.onload and fires this:
window.onbeforeunload = function(e) {
if (somethingchanged) {
var message = "Fields have been edited without saving - continue?";
if (typeof e == "undefined") {
e = window.event;
}
if (e) {
e.returnValue = message;
}
return message;
}
}
But if I edit some of the fields and hit the save button, the event triggers, because there is a post-back and the fields have been edited. Is there anyway around this, so the event does not fire upon clicking the save button?
Thanks
When I do this pattern I have a showDirtyPrompt on the page. Then whenever an action occurs which I don't want to go through the dirty check I just set the variable to false. You can do this on the client side click event of the button.
The nice thing about this is that there might be other cases where you don't want to prompt, the user you might have other buttons which do other post backs for example. This way your dirty check function doesn't have to check several buttons, you flip the responsability around.
<input type="button" onclick="javascript:showDirtyPrompt=false;".../>
function unloadHandler()
{
if (showDirtyPrompt)
{
//have your regular logic run here
}
showDirtyPrompt=true;
}
Yes. Check to see that the button clicked is not the save button. So it could be something like
if ($this.id.not("savebuttonID")) {
trigger stuff
}