So halten Sie ein Javascript Arbeiten mit ResonseText-Daten

Question

Ich habe eine Anwendung mit PHP/MySQL und JavaScript mit Prototype/Scriptaculous erstellt.

Eine Seite enthält ein Feld für Suchkontakte mit einem Standarddatensatz in einer HTML-Tabelle. Ein Benutzer gibt einige Zeichen ein und die Tabelle wird aktualisiert.

Was tatsächlich passiert ist, wird die Tabelle mit einer neuen Tabelle und neuen Daten ersetzt.

Ich habe ein JavaScript, das gegen diese Tabelle funktioniert, die in der Standard-Mode über Skript-Tags am unteren Rand der Seite geladen wird.

Problem ist, es funktioniert nur auf die Standarddaten (der Teil, der mit der Seite geladen wird), wenn die Suche die Tabellendaten aktualisiert, funktioniert das Skript nicht mehr. Die Suche wird immer noch funktionieren, da sie ursprünglich mit der Seite geladen wurde, aber es scheint, dass mein Skript keine Seitenaktualisierungen oder neue Daten kennt.

Wie kann ich das zum Funktionieren bringen? Muss ich das Skript bei jedem Ajax-Aufruf einbeziehen?

Dank Rich-

Answer 1

den entsprechenden Code der Veröffentlichung würde helfen, aber Sie haben höchstwahrscheinlich ein Ereignis-Listener zu einem Element angebracht, die durch die AJAX-Aufruf ersetzt wird.

Wenn dies der Fall ist, müssen Sie den Ereignishandler erneut erstellen und an das neue Element anfügen, auch wenn dieses neue Element genau dem Element entspricht, das es ersetzt.

Answer 2

OK, ich poste hier ein bisschen Code. Aber ja ein Ereignis Listener ist an ein Element angehängt.

Hier ist ein bisschen von der Javascript-Klasse, die ich erstellt habe, die nach Ereignissen aus einem Suchfeld sucht, Daten von diesem Feld und anderen Formularelementen sammelt und sie in this.params einrichtet.

Nachdem die Daten an das Ajax-Objekt zurückgegeben wurden, wird es auf die Seite aktualisiert, die identisch mit dem ursprünglichen Code ist (unterschiedliche Zeilen).

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); 
     } 
    }); 
}, 

...});