I'm having trouble trying to override a form element's onsubmit event. I have no problem adding a listener with addEventListener, but for my particular case, I need to replace the onsubmit but for some reason when I do, it gives me this error:
Error: Component is not available = NS_ERROR_NOT_AVAILABLE
My code is simply this:
gBrowser.contentDocument.getElementById("theform").onsubmit = function() {
return false;
};
Essentially I want to prevent the form from submitting, but this code fails and throws the above error. Using addEventListener to return false doesn't seem to stop the form from submitting.
Thanks.
For security reasons, the object returned by getElementById in an extension is an XPCNativeWrapper around the DOM element; it's not the element itself. This results in some important limitations. More details here:
Assigning to or reading an on* property on an XPCNativeWrapper of a DOM node or Window object will throw an exception. (Use addEventListener instead, and use "event.preventDefault();" in your handler if you used "return false;" before.)
https://developer.mozilla.org/en/XPCNativeWrapper#Limitations_of_XPCNativeWrapper
Related
I'm creating an chrome extension, and having issue that even if I changed the element text, the submit button not enables as usual and other stuff is not processing as manual typing.
I'm trying to fire the text changed event to process the elements normal behavior of manual typing using following script;
var el2=document.getElementById("tmsg");
el2.innerText="hello world";
try{
el2.fireEvent("onchange");
}catch(error)
{
alert("err:"+error);
}
However, the text is set, but getting following error
TypeError: el2.fireEvent is not a function
I'm looking for solution with java script, without JQuery solutions, but none worked for me.
Can anyone please point me what I'm doing wrong here, or better way to do that?
You are getting that error because eventTarget.fireEvent() is a proprietary method used in Internet Explorer.
The modern and standard way to manually dispatch events, according to MDN is as follows:
// CREATE EVENT
const event = new Event('change', {bubbles: true});
// GET TARGET ELEMENT
const el2 = document.getElementById('tmsg');
// DISPATCH EVENT
el2.dispatchEvent(event);
Hope it works.
A picture is worth a 1000 words:
As you can see from the picture above the form has a onsubmit event. But when I try to reference the onsubmit even it's telling me it's null.
The reason I'm asking this question is because I'm trying to clear the onsubmit event:
doc.getElementById("frmMaster").onsubmit = null;
Which is not working.
What am I doing wrong here?
I was able to work around the issue yesterday. After browsing the object hierarchy using chrome developer tools i noticed the object had a "onsubmit" attribute but the "onsubmit" property was already null. So:
doc.getElementById("frmMaster").removeAttribute("onsubmit");
successfully removed the event. I admit i don't totally grasp the difference between the event as a property or as an attribute but at least it resolved the issue.
I believe to unregister events you must use removeEventListener('event', boundFunction). A problem that arises from the code you have is that WebForm_OnSubmit may not be defined at a place accessible to you. What you will need to do is get that function into a context you can access from the console (or wherever you ultimately want to call this code). So you can essentially do this:
/*
somewhere in your server code, or wherever this WebForm_OnSubmit is defined
var handleToWebForm_OnSubmit = WebForm_OnSubmit; //must be global scope
// you will need to get a reference in javascript to this function
// and bind it so that you can willingly unbind it
*/
doc.getElementById("frmMaster").removeEventListener('submit', handleToWebForm_OnSubmit)
Recently lookup field in dynamic CRM form started throwing this error:
"Unable to get property '0' of undefined or null reference"
when we tried to change this lookup field. There is no Javascript called on Onchange event
I have attached a screenshot of the error:
In this case, if I did not know where this setaddionalparams function is located, my first move would be to disable all (or one by one) custom events on the form in the Handler Properties dialog that is called when you double click on the event handler in the Form Properties dialog in the Events tab (this one). If the error stops appearing then obviously the function is somewhere in your code.
Good luck!
UPDATE
There can be more reasons why you still see this error, please check scripts attached to the Ribbon, scripts inside HTML Web Resources and IFrames if you have any.
In addition, it may not be a direct call to the attribute by name, it may be a for loop that iterates through all attributes in the form. In this case you will need to search the code by the following keyword getValue()[0]. It seems like someone accesses a lookup attribute without checking if it's null. It should be fixed like this:
var productId = null;
var lookupValue = Xrm.Page.getAttribute("productid").getValue();
if (!!lookupValue && lookupValue.length > 0){
productId = lookupValue[0].id;
}
I want to delete an event handler form a form that contains an inline definition of onsubmit.
<form id="loginForm" onsubmit="return performTask(this);">
I have already try :
$("#loginForm").off("submit")
$("#loginForm").unbind("submit")
$("#loginForm").die("submit")
$("#loginForm").removeAttr("onsubmit")
$("#loginForm").removeProp("onsubmit")
$("#loginForm").attr("onsubmit", "")
$("#loginForm").prop("onsubmit, "")
$("#loginForm")[0].onsubmit = null
$("#loginForm")[0].onsubmit = undefined
$("#loginForm")[0].onSubmit = null
$("#loginForm")[0].onSubmit = undefined
And nothing works !
I add my own event listener usin jquery method on() but it is never called. It apear that the old event listener is executed before mine... It does the same thing with onClick event on button.
I have to explicit that I'm in a chrome extension and more precisely in a Content Script injected in a page.
So the question is, is there any way to purge event handlers ? Or much better is there any way to add an event listener that will be call before the inline handler ?
EDIT : After lot of ugly code, I have find a way to do what I want... I do a copy of the form, delete the inline envent handler, replace in the dom the old form by mine and then create my event handler. It's ugly but it works ... If anyone can explain why I can't do this other way ...
This is an isolated world problem. Chrome extensions run is a separate context from the page; while access to the DOM is shared, inline event listeners are isolated.
Quote from the documentation, emphasis mine:
It's worth noting what happens with JavaScript objects that are shared by the page and the extension - for example, the window.onload event. Each isolated world sees its own version of the object. Assigning to the object affects your independent copy of the object. For example, both the page and extension can assign to window.onload, but neither one can read the other's event handler. The event handlers are called in the order in which they were assigned.
So, to override a page-level listener, you need to inject your overriding code into the page context itself. This is possible; see this excellent answer for details, and here's an example:
var actualCode = "document.getElementById('loginForm').onsubmit = null;";
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);
This adds a <script> element to the page, which then executes in the page's own context.
Try this:
window.addEventListener('submit', function(event) {
event.stopImmediatePropagation();
}, true);
It will stop the propagation of the event.
I actually don't know the object whose 'onSubmit' event is being processed here, so using pseudo logic here:
Identify the object whose event is being processed - say obj.
Identify it's registered events - console.log(obj._events); - say it returns submit [ Function ]
Purge the call back: obj._events.submit = null;
Register your handler.
Hope this helps.
I have a fairly simple ASP.NET page that renders an HTML input (text box). Within the generated HTML, I attach a handler to several events, including onfocus, onkeypress, and onkeyup. Because this is a solution targeted at a version of IE that does not support addEventListener (situation about which I can do nothing), I am forced to use attachEvent.
A typical call to attachEvent is as follows - I've excerpted this source from the original for the sake of brevity/clarity, so it is not precisely the code at issue:
var hostControl = document.getElementById('mytextbox');
var attachResult = hostControl.attachEvent('onfocus', function(){
hostControl.select();
});
if (!attachResult)
{
alert('Attach failed.');
}
attachResult = hostControl.attachEvent('onblur', function(){
if (hostControl.value=='')
{
alert('Warning - no entry.');
}
});
if (!attachResult)
{
alert('Attach failed.');
}
When I step through this code in the IE debugger, attachEvent returns 'true' in both instances, which should indicate that the event attachment attempt was successful. However, when I look at the [Event] handlers for the control within the debugger, all the events show 'null', no handler attached.
Things I've tried/researched:
I've read several different articles on the vagaries of event attachment in IE, so I've speciously avoided any 'this' references.
I tried one version that used one of the addEvent wrapper blocks that tries to use addEventListener if available, even though I knew this would be an IE solution.
When I tried that version against FireFox, event attachment worked properly through addEventListener, but failed in IE using attachEvent (with attachEvent still returning true).
I then opted to eliminate any possible problems the wrapper might be introducing, and used attachEvent directly against the control, which leads me where I am now. The problem persists.
I would like to think I've simply overlooked something very simple, as I've hooked up events before without difficulty, but something here is throwing me a curveball I just don't recognize. Appreciate the extra eyeballs on this to see where I've erred.