How to copy elements containing <script> children from an AJAX-loaded document?

Question

I'm currently trying to hack some kind of in-place editing functionality in the JIRA bugtracker without changing its page templates. So, on the details page for the problem, I bind the dblclick events to the fields that replace the static field with the editable form element (from the edit page that was loaded and cached at the beginning of the script). Some of these elements are JS widgets, such as a calendar widget, and they have <script> elements within the <td> for the field. I want to wrap these elements along with the rest of the HTML and execute them on the page.

So, the original static field looks like this:

<td bgcolor="#ffffff" width="80%"> 2008/Sep/22 </td> 

The one I'm trying to copy is as follows:

 <td class="fieldValueArea"> <input type="text" name="duedate" id="duedate" value="" size="10"> <img id="duedate_trigger_c" src="/jira/images/icons/cal.gif" width="16" height="16" border="0" alt="Select a date" title="Select a date"> <script type="text/javascript"> Calendar.setup({ firstDay : 0, // first day of the week inputField : "duedate", // id of the input field button : "duedate_trigger_c", // trigger for the calendar (button ID) align : "Tl", // alignment (defaults to "Bl") singleClick : true, ifFormat : "%e/%b/%y" // our date only format }); </script> </td> 

I want to save the <script> and execute it on the landing page (after the copy) so that the Calendar widget correctly enters.

I use jQuery for AJAX-load the edit page like this:

  $.get(editlink, function(data){ jeip_editpage = data; }, "text"); 

And replacing the field like this:

 this.innerHTML = $("#"+fieldname+"FieldArea .fieldValueArea",jeip_editpage).html(); 

(where this = TD field)

After $ .get (), jeip_editpage contains the <script> element in the right place, but when I try to grab the element as above, it disappears. I did some Googling and found that jQuery moves <script> elements around the page during the parsing stage, which is the right pain. I suppose that I could search, grab and replace the text immediately after $ .get (), to make sure that I have all the <script> elements separately, but I believe that there should be an easier way, right?

Note that I do not change any JIRA page template, so the answers related to returning HTML to a more useful layout will not work for me.

Answer 1

The jQuery Ajax API "$ .load" allows you to enable the selector after the URL (sorting "inside" the URL parameter). At the same time, it looks at the returned content for what you specified in the selector. Thus, you can load directly into the table cell:

 $(this).load(editLink + ' #' + fieldname + 'FieldArea .fieldValueArea *'; 

The "this" pointer will be the "td" you want to update. However, I am not 100% sure that this selector will work; he could, however. (What I'm trying to express is to select "td" in the HTML response and then get its contents.)

Answer 2

Scripts are removed from jQuery ajax requests. This is from the source code.

  58 // inject the contents of the document in, removing the scripts 
 59 // to avoid any 'Permission Denied' errors in IE 
 60 .append (res.responseText.replace (rscript, "")) 

Source: http://dev.jquery.com/browser/trunk/jquery/src/ajax.js

You can still write your own ajax function to capture html (with scripts) and then add jQuery.

Answer 3

You do not need to pass the Calendar script through ajax. The Ajax function has a calendar function:

 function SetupCal(string fieldSelector, string buttonSelector){ Calendar.setup({ firstDay : 0, // first day of the week inputField : fieldSelector, // id of the input field button : buttonSelector, // trigger for the calendar (button ID) align : "Tl", // alignment (defaults to "Bl") singleClick : true, ifFormat : "%e/%b/%y" // our date only format }); } 

Then on the download page: $ (function () {$ .get (editlink, function (data) {jeip_editpage = data;}, "text");

  var fieldArea = $("#"+fieldname+"FieldArea .fieldValueArea"); fieldArea.html(jeip_editpage); //call calendar function SetupCal("duedate","duedate_trigger_c"); 

});

So, the code in the static field comes from:

 <td bgcolor="#ffffff" width="80%"> 2008/Sep/22 </td> 

To:

 <td class="fieldValueArea"> <input type="text" name="duedate" id="duedate" value="" size="10"> <img id="duedate_trigger_c" src="/jira/images/icons/cal.gif" width="16" height="16" border="0" alt="Select a date" title="Select a date"> </td> 

Answer 4

You should be able to do the following:

 success: function(data) { $(content).html(data); // this should evaluate the data from an ajax call // when injected... }, format: "text" 

Basically, only when you install html with data, jquery parses that data in a global context. Just don't tell jquery that the html / json / etc data is just text.

The only thing I came across is that google chrome / safari will not accept tags in the data. However, this is jquery 1.2.6, so I don’t know if this is fixed, I just don’t do it anymore :)

Am I missing something in the question that prevents the behavior described above?

Edit: it looks like you are sending td to your ajax response. JQuery does weird things, trying to just enter this content. Wrap td with a table tag, then simply select td by doing $(...).html($(data).find("> tr"));