I have a system where I send an Ajax command, which returns a script block with a function in it. After this data is correctly insert in the DIV, I want to be able to call this function to preform the required actions.
Is this possible?
+3
A:
That seems a rather weird design for your code - it generally makes more sense to have your functions called directly from a .js file, and then only retrieve data with the ajax call.
However, I believe it should work by calling eval() on the response - provided it is syntactically correct javascript.
DanSingerman
2009-02-04 10:21:52
A:
This does not sound like a good idea.
You should abstract out the function to include in the rest of your JS from the data returned by AJAX methods.
Fwiw though, (and I don't understand why you're inserting a script block in a div?) even inline script methods written in a script block will be accessible.
annakata
2009-02-04 10:23:23
+3
A:
It is fully possible, and there are even some fairly legitimate use cases for this. Using the prototype framework it's done as follows:
new Ajax.Updater('items', '/items.url', {
parameters: { evalJS: true}
});
See documentation of ajax updater. The options are in the common options set. As usual there are some caveats about where "this" points, to so read the fine print.
The javascript will be evaluated upon load. If the content contains function myFunc() you could really just say myFunc() afterwards. Maybe as follows:
if (window["myFunc"])
myFunc()
This last checks if the function exists. Maybe someone has a better cross-browser way of doing that which works in IE6.
krosenvold
2009-02-04 10:29:00
This should work in all browsers: `if (myFunc) myFunc()`
awe
2009-09-01 08:18:56
+6
A:
I think to correctly interpret your question under this form: "Ok, I'm already done with all Ajax stuff; i just wish to know if the Javascript function my Ajax callback inserted into the DIV is callable at any time from that moment on, i.e. I do not want to call it contextually to the callback return".
Ok, if you mean something like this the answer is yes, you can invoke your new code by that moment at any time during the page persistence within the browser, under the following conditions:
1) Your Javascript returned by Ajax callback must be syntactically ok;
2) Even if your function declaration is inserted into a <script> block within an existing <div> element, the browser won't know the new function exists, as the declaration code has never been executed. So, you must eval() your declaration code returned by the Ajax callback, in order to effectively declare your new function and have it available during the whole page lifetime.
Even if quite dummy, this code explains the idea:
<html>
<body>
<div id="div1">
</div>
<div id="div2">
<input type="button" value="Go!" onclick="go()" />
</div>
<script type="text/javascript">
var newsc = '<script id="sc1" type="text/javascript">function go() { alert("GO!") }<\/script>';
var e = document.getElementById('div1');
e.innerHTML = newsc;
eval(document.getElementById('sc1').innerHTML);
</script>
</body>
</html>
I didn't use Ajax, but the concept is the same (even if the example I chose sure isn't much smart :-)
Generally speaking I do not question about your solution design, i.e. whether it is more or less appropriate to externalize + generalize the function in a separate .js file and the like, but please take note that such solution could raise further problems, especially if your Ajax invocations should repeat, i.e. if the context of the same function should change or in case the declared function persistence should be concerned, so maybe you should seriously consider to change your design to one of the suggested examples in this thread.
Finally, if I misunderstood your question and you're talking about contextual invocation of the function when your Ajax callback returns, then my feeling is to suggest the Prototype approach described by krosenvold, as it is cross-browser, tested and fully functional, and this can give you a better roadmap for future implementations.
Hth.
Scarlet
2009-02-04 13:10:31
A:
i get the same problem but the code. Actually, i have a ajax script which give a html response like this:
if(response==="success"){ $('').appendTo('#files').html('x ').addClass('uploadok');
the response which contain html line: class="delete" is not working at all. the class="delete" actually must trigger another ajax script which will delete/remove the current div. but it did not work. I have no idea what's going on and how to fix it :(
A:
Yes, the answer from Scarlet is the best one!
Just 2 things to clarify it:
Invoke eval() when you get responce from AJAX, for example here:
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { obj.innerHTML = XMLHttpRequestObject.responseText; eval(document.getElementById('ajx_jscrpt').innerHTML); }If you have a function with the same name before AJAX call - it's not going to work.
For DanSingerman - DON'T Judge if the code is weird - just help IF YOU CAN!!!
All the best!
Niki
2010-08-01 09:54:06