'Any way to pass parameters programmatically to an onclick function?
I have an onclick function which performs several tasks. In another JavaScript function I do not have access to the context variables needed to perform these tasks. To get around this I have been simply calling the onclick function directly.
The problem I have now is that I'd like to perform a task after an Ajax action in the onclick completes. Is there any way for me to pass a function to the onclick method of a link? What would the onclick attribute look like?
e.g. something like this:
<a id="link3" href="javascript:void(0);" onclick="function(callback) { X(a); Y(b); Z(c, callback); };">click me</a>
Clicking on this would pass "undefined" as the callback, while I could also call it explicitly like this:
document.getElementById("link3").onclick(function() { alert("Completed all tasks"); } );
Is something like this possible? Basically I want to be able to pass an optional parameter to the onclick method, but if it's absent I want it to behave as if there were just procedural code in the onclick.
EDIT: Added more specifics
The use case is that the onclick calls a search function which requires session variables. When regular searches are performed there is no problem, but when I wish to refresh the search results (e.g. when a the user edits or deletes one of the returned results) I need to call the same search function that was called previously and then print out a feedback message after they are refreshed. This feedback message output is what I would like to be in the callback method. I'd also like to set the window.location.href to page down to the affected row in the event of an edit or an insert.
I have access to several variables on the server side which I print out directly to the onclick attribute when I render the page. In other JavaScript files that I am including on my page I would also like to be able to execute the same functions contained within the onclick. The only problem being that I would have to pass all these variables to those functions indirectly through several intermediate methods in the call chain.
The other option is to print these values to hidden page values and then retrieve them from within my method, but I would like to avoid this as it would be cluttering up everything just so that I could decorate my function call with some visual after-effects.
Solution 1:[1]
Although this may be possible somehow, I would recommend not to add arguments to the native DOM events.
I can't see a real architectural need for this, either. Can you make a full example of a use case where you need this? I'm pretty sure someone can come up with an alternative solution that doesn't make additional arguments necessary.
Wouldn't, in your example, the right place to place the alert be the success callback of the Ajax request?
Solution 2:[2]
This works for me:
<body onload="f = document.getElementById('link3').onclick; f(function(){alert('Completed all tasks')});">
<input id="link3" type="button" onclick="alert(typeof(arguments[0])); arguments[0]()">
</body>
The first directive returns "function", and the second one returns "Completed all tasks", as expected. In your case, the following should work:
<input id="link3" type="button" onclick="X(a); Y(b); Z(c, arguments[0]);">
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | yuttadhammo |