How To Keep a Javascript Working with ResonseText Data

Question

I've been building an application with php/mysql and javascript with Prototype/Scriptaculous.

A page has a search contacts field, with a default set of data in an HTML table. A user types in some characters, and the table get updated.

What's actually happening is the table is getting replaced with a new table and new data.

I've got a javascript that works against that table, which is loaded in the standard fashion via script tags at the bottom of the page.

Problem is, it only works on the default data (the part thats loaded with the page), when the search updates the table data, the script stops working. The search still will work since that was originally loaded with the page but it seems my script is unaware of page updates or new data.

How can I get this to work? Do I have to include the script with every Ajax call?

Thanks Rich

Answer 1

Posting the relevant code would help, but you have most likely attached an event listener to an element that is replaced by the AJAX call.

If that is the case, you will need to recreate and reattach the event handler to the new element, even if that new element is exactly equivalent to the element it is replacing.

Answer 2

OK, I'll post a bit of code here. But yes an event listener is attached to an element.

Here's a bit of the Javascript class I was building which looks for events from a search field, collects data from that field and other form elements and sets them up in this.params.

After the data is returned to the ajax object, its updated to the page, which is identical to the original code (different rows).

var Compass_Search = Class.create({ ...

search: function() {
 $('search_form').observe('change', this.get_data.bind(this));
},

get_data: function(e) {
 var ele = e.target;
 var filters = $$('.search_option');
 if($(ele).tagName == 'INPUT') {
  if($(ele).readAttribute('type') == 'checkbox') {
   this.watch_filters(filters);
  }
 }

 if(this.default_text == $('search_box').value) {
  this.set_text_value('null');
 } else {
  this.set_text_value($('search_box').value);
 }


 new Ajax.Request(this.url, {
  method: 'post',
  parameters: this.params,
  onComplete: function(r) {
   result_text = r.responseText;
   $('main').update(result_text);
  }
 });
},

...});