Javascript per Ajax nachladen

[Spoiler]

Servus Zusammen,

ich stehe grad vor einer kleinen Herausforderung:

Ich habe ein DIV-Tag mit der ID="PageFilter".

Wenn eine Seite geladen wird, die eine Filtermöglichkeit enthält, wird dieser DIV-Tag mittels Daten, die per AJAX geladen werden über innerHTML mit Leben befüllt.

Diese Daten beinhalten ein Formular, mit Radiobuttons und einem Select.
Wenn ich nun einen der Radiobuttons anklicke, soll ein weiterer Ajaxaufruf stattfinden, der das Content-Div aktualisiert ... was auch soweit kein Problem wäre.
Ich habe die Radiobuttons nun mit einem onclick versehen und das Select mit einem onchange.

Problem: weder der onclick, noch der onchange reagieren.

Selbst wenn ich die sache mit onclick="alert('Test');" versehe, sodaß ich einfach nur mal eine Reaktion sehe, passiert gar nichts.
Sowohl Firefox, als auch IE bleiben hier mucks Mäuschen still.

Können Browser Javascript, das per Ajax nachgeladen wird, nicht ausführen??

Danke im Voraus.

Gruß

Spoiler

 

[Timmer]

Hier gibt es einige Probleme. onclick und onchange schreiben einfach einen Eventhandler, dies aber nur beim Seitenaufruf. Was danach per AJAX geladen wird, kennt der Browser in vielen Fällen nicht. Arbeitest du mit herkömmlichen JavaScript für AJAX oder nutzt du ein Framework wie jQuery? Von jQuery weiß ich, dass es Methoden gibt, um das Problem zu umgehen, siehe .on() – jQuery API

MfG Timmer

 

[Spoiler]

Hi,

danke für die schnelle Antwort.

Ich benutze normales Javascript, da ich bis jetzt zu faul war, mich in JQuery einzuarbeiten ...

Ich habe weiter getestet:
Die onclicks im Content-Div funktionieren, die im Filter-Div nicht, auch wenn ich ein Submit-Button auf ein onclick reagieren lassen will.

Wenn es hier Probleme gibt, würde dann ein onsubmit funktionieren, dem ich ein return false nachstelle um das Senden des Formulars zu verhindern?

 

[Timmer]

Das kann ich dir pauschal nicht beantworten. Ausprobieren ist die Devise ;)

Wo ich gedanklich grad nicht mitkomme: Wenn im Filter-DIV etwas geklickt wird, wird der Content-DIV geupdated. Danach funktioniert das klickem im Filter-DIV nicht mehr, jedoch im Content-DIV?

 

[Spoiler]

onsubmit="return function() {alert('Test'); return false}"

funktioniert leider nicht ... stopp das Absenden des Formulars nicht.

im Filter-Div funktioniert gar kein onclick.

im Content-Div wird über ein Menü (link, der auch mit onclick arbeitet), etwas nachgeladen, was ein onclick enthält.
Dieses Onlick funktioniert dann.

Beispiel:
Auf der Seite befindet sich oben ein Link "Artikel verwalten".
Wenn ich draufklicken, wird der Content-Div mit einer Tabelle gefüllt, in der sich die Artikel befinden (ein Formular, mit entsprechendene Inputs um z.B. Name oder Nummer des Artikels zu verändern).
Unter dieser Tabelle befindet sich der Submit-Button, der ein onclick auslöst.
Dieses onclick funktoniert.

Unter dem Content-Div befindet sich dann das Filter-Div. Dieses wird entsprechend geladen, um bei den Artikel filtern zu können.
Wenn das Filter-Div geladen wird, funktoniert eben das Onclick im Content, aber die im Filter nicht.

Und das verstehe ich grad nicht wirklich.

 

[Spoiler]

um das mal deutlich zu machen:

Hier die beiden Templates. Im Content würde noch das BIT Fehlen, sprich die einzelnene Datenzeilen, aber die enthalten keine onclicks.


Filter

<form action="#" name="PageFilterEntrys" method="post" onsubmit="return false;">
  <fieldset>
    <legend><input type="submit" name="Submit" value="Filtern" onclick="alert('Test');" /></legend>
    <fieldset>
      <legend>StückKZ</legend>
      <input type="radio" name="StadaSTKZ" value="0" checked />ALLE
      <input type="radio" name="StadaSTKZ" value="M" />M
      <input type="radio" name="StadaSTKZ" value="S" />S
    </fieldset>
    <fieldset>
      <legend>Warengruppe</legend>
      <select name="StadaWGRP">
        <option value="0">ALLE
        $OUTPUT[WGRPSELECT]
      </select>
    </fieldset>
  </fieldset>
  <br />
</form>

Content

<table class="tborder" align="center" width="100%" cellspacing="$STYLE[cellspacing]" cellpadding="$STYLE[cellpadding]">
  <form action="#" name="StadaEntry" method="post" onsubmit="return false;">
  <input type="hidden" name="Do" value="mod/stada/save" />
    <tr>
      <td width="20%" align="center" class="alt2">
        Art.-Nr.
      </td>
      <td width="20%" align="center" class="alt2">
        Bezeichnung
      </td>
      <td width="20%" align="center" class="alt2">
        Warengruppe
      </td>
      <td width="20%" align="center" class="alt2">
        StückKZ
      </td>
      <td width="20%" align="center" class="alt2">
        LöschKZ
      </td>
    </tr> 
    $DATEN[OUTPUT_BIT]
    <tr>
      <td width="20%" align="center" class="alt2">
        <input type="text" name="NewArtNr"  size="35" />
      </td>
      <td width="20%" align="center" class="alt2">
        <input type="text" name="NewArtBez"  size="35" />
      </td>
      <td width="20%" align="center" class="alt2">
        <select name="NewWGRP">
        $DATEN[NEWWGRPSELECT]
        </select>
      </td>
      <td width="20%" align="center" class="alt2">
        <select name="NewSTKZ">
        $DATEN[NEWSTKZSELECT]
        </select>
      </td>
      <td width="20%" align="center" class="alt2">
        &nbsp;
      </td>
    </tr>
    <tr>
      <td width="100%" align="center" class="alt1" colspan="6">
        <input type="submit" name="Submit" value="Speichern"  onclick="AjaxGetRequest('mod/stada/save');" />
      </td>
    </tr>
  </form>
</table>

 

[FoXMorayn]

lad die daten per jquery nach und benutze $(selector).html(). setze die events per javascript in das nachzuladende dokument. jquery übernimmt für dich eine art eval() vom nachzuladendem code. ist nicht die aller feinste art, aber es funktioniert und der code ist hinterher gut zu pflegen.

bsp

<form>
</form>
<script>
jquery zeugs
</script>

 

[Spoiler]

Nach Stunden der Analyse konnte ich jetzt herausfinde, dass beim Parsing im PHP ein stripslashes fehlte und dass deshalb die Ausgabe, die an den Browser gesendet wird, nicht korrekt ist.
Nachdem ich das geändert habe, funktionieren die Events jetzt wieder wie sie sollen.

Vielen Dank für eure Mühen.

Gruß

Spoiler

 

[Spoiler]

Hab jetzt mit JQuery angefangen:

gut, funktioniert.

Aber wie meinst du das mit dem eval()??

Ich führe immer selbst ein eval() auf die zurückgegebenen Daten aus:

success:  function(data)
              {
                ajax = eval('(' + data + ')');
                if(ajax!=false)
                {
                  HandleReturn(ajax);
                }
              }

Oder kann ich mir das sparen ... denn ohne funktioniert es nicht?