Using Ajax Request Generated JavaScript
Hi all. Recently I was working on a web application that utilized JavaScript and AJAX. Who would have guessed. Anyways, I ran into a bit of a snag when I had the AJAX requests result defining a JavaScript snippet. The problem was that AJAX requests strip out script tags and don’t let them get inserted into the DOM tree. I am not sure why this is the case, maybe for some security reason that I have yet to see. Anyways, this creates a bit of a problem when you are trying to do things like use a JavaScript calendar widget inside the AJAX result set when the calendar widget needs to be initialized by some JavaScript code that is unique to that calendar.
Despite all my efforts in googling I failed to find a clearly defined solution. Bits of the sites have clues but none of them had actual solutions with enough detail to make it reproducible. Hence, after exploring all of these hints and all of the combinations of the hints I managed to find a working solution for using JavaScript that is dynamically generated as part of the result of an AJAX call.
Lets assume that you are using Prototype because I was, and it is a very common AJAX JavaScript library. The first thing I looked to find out was if there was an event fired off to the portion that is generated by AJAX request. The answer is, not that I could find. There are events in the top level document but none which really help you. Since, there are no events or callbacks in the child document (one produced by the ajax call and loaded into the top level) and no script tags carried through to the top level document we first have to figure out a way to get the JavaScript code to the top level document and then secondarily have JavaScript evaluate it.
In order to get the script tags content to the top level document I had to create a div that contained the raw content of the script tag that I wanted available. Beyond that the div had to have a unique ID that was able to be obtained programatically in the top level document using JavaScript. An example of this might look as follows (html.erb template of JavaScript):
2 <%= calendar_id %>SelectHandler = function(type, args, obj){
3 var selected = args[0];
4 var selDate = selected[0][0] + “-” + selected[0][1] + “-” + selected[0][2];
5 <% if txt_input_id.nil? %>
6 document.getElementById(“<%= calendar_namespace %>_<%= calendar_id %>”).value = selDate;
7 <%= calendar_id %>hide();
8 <% else %>
9 document.getElementById(“<%= txt_input_id %>”).value = selDate;
10 <%= calendar_id %>hide();
11 <% end %>
12 }
13
14 <%= calendar_id %>show = function (){
15 var cur_z = $(‘<%= calendar_container %>’).style.zIndex;
16 if (!cur_z) {
17 cur_z = 1;
18 } else {
19 cur_z = parseInt(cur_z)
20 }
21 $(‘<%= calendar_container %>’).show();
22 $(‘<%= calendar_container %>’).style.zIndex = (cur_z + 1);
23 }
24 <%= calendar_id %>hide = function(){
25 var cur_z = $(‘<%= calendar_container %>’).style.zIndex;
26 if (!cur_z) {
27 cur_z = 1;
28 } else {
29 cur_z = parseInt(cur_z)
30 }
31 $(‘<%= calendar_container %>’).hide();
32 $(‘<%= calendar_container %>’).style.zIndex = (cur_z - 1);
33 }
34
35 YAHOO.namespace(“<%= calendar_namespace %>.<%= calendar_id %>”);
36 YAHOO.<%= calendar_namespace %>.<%= calendar_id %>.init = function() {
37 YAHOO.<%= calendar_namespace %>.<%= calendar_id %>.Cal = new YAHOO.widget.Calendar(“<%= calendar_id %>”,“<%= calendar_container %>”, <%= @opts %>);
38 YAHOO.<%= calendar_namespace %>.<%= calendar_id %>.Cal.selectEvent.subscribe(<%= calendar_id %>SelectHandler, YAHOO.<%= calendar_namespace %>.<%= calendar_id %>.Cal, true);
39 YAHOO.<%= calendar_namespace %>.<%= calendar_id %>.Cal.render();
40 }
41 </div>
This div with a unique id gives me the capability of pulling out the associated raw JavaScript that is the innerHTML content of this div in the top level document and having the top level documents JavaScript evaluate it. This can be done with a JavaScript function like the following:
2 var script = document.getElementById(“cal_visited_on_” + id + “_script”).innerHTML;
3 eval(script);
4 var my_init_cmd = “YAHOO.namespace_o_hell.cal_visited_on_” + id + “.init();”;
5 eval(my_init_cmd);
6 return true;
7 }
The next logical question of course is what event or callback launches the above JavaScript function in the top level document. The answer in this case is simply to use the Prototypes Ajax.Updater onComplete callback by having it first programatically figure out the name of the div using the reproducible naming scheme and then call the above JavaScript function passing it the necessary id to access the hidden JavaScript div. This might look something like the following:
Assuming that you have those three components in place and properly setup with all the syntax correct you should have a working solution. Note: Be very careful of syntax errors in the JavaScript inside the eval() method because FireBug won’t detect them, or run-time errors in the JavaScript anywhere because not all of them will be detected by FireBug. Anyways, hope this helps someone out there, it sure would have helped me if I had it.