Hi, I have a system that loads a div with content through the use of AJAX. All is well, I can get the div to load perfectly with details from my database and it works great. The problem is this: Inside the returned div, I have a couple of buttons with onclick events. The onclick events cause an error when I attempt to call a user defined function onclick="my_function();" but the onclick events do not cause an error when I call a js defined function onclick="alert('success');". Anyone know why this would be? my_function() is defined in the of my page. Although, I have also tried to define it in the content returned by AJAX, still with no luck. Any help will be greatly appreciated. Remo
A:
if you are using prototype, jquery, etc.. (any JS framework), you need to be sure you have set the param "evalJS" to true. this last example I put works in prototype.
check here for prototype
Gabriel Sosa
2009-05-12 02:29:13
I'm not using prototype or jquery etc, just basic js functions.
Remo
2009-05-12 02:46:51
A:
You could try adding event handlers via JavaScript instead of onclick handlers on the actual elements.
Then you could use anonymous functions.
alex
2009-05-12 02:45:29
Well, I use jQuery a lot, so I'd do $('selector').bind('click', function() { // this is the anon function });
alex
2009-05-12 03:09:38
do you think that this would make anything different? because the onclick="alert('success');" works inside the content loaded by AJAX.
Remo
2009-05-12 03:23:55
Well, it might. It's hard to say without examining all of your code. Sounds like it doesn't have the scope to your function for whatever reason, and that is why methods of the window object, like alert(), are working.
alex
2009-05-12 03:44:11
no, it's all good, I now know what the problem was.. freakin stupid me.. the element had the same name as the function it was trying to invoke.. I simply removed the element name and it is fixed.
Remo
2009-05-12 05:23:03
A:
If you're simply updating the innerHTML of a DIV element with the result of an AJAX request, keep in mind that the browser parses only HTML not scripts.
Probably that's why you're recieving the JavaScript Error.
To parse also the scripts you need to consult the documentation of your library. For instance, if you're using ASP.NET you can call ScriptManager.RegisterClientScriptBlock in order to instruct the AJAX client componenet to parse the scripts in the result.
On the other hand, if you're doing it by hand (one thing I did awhile back), you need to detect and parse the scripts yourself.
Paulo Santos
2009-05-12 02:48:48
Hi Paulo, I am not passing the script, only the html with the function call in the onclick event. the script is defined in the head of my original page.
Remo
2009-05-12 02:51:55
A:
OK, here is the simple answer.. I had the button element name and id as the same as the function which it was trying to call.. stupid mistake I know.. anyhow, it is now working.. however, I do have another problem.. my ajax only fires once.. it works great the first time, but after that the function doesn't work
here is my code:
function delete_account(account_id) {
create_request();
var url = "accounts_ajax.php?action=delete_account&account_id=" + account_id;
show_div('action_window');
document.getElementById('action_window').innerHTML = '<div class="please_wait"><img src="images/working.gif"><br>Loading...</div>';
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState!=4)return;if(xmlHttp.status==200){reload_div('action_window', xmlHttp.responseText);}};
xmlHttp.send(null);
}
it just causes an error second time around.
Remo
2009-05-12 05:59:02