JavaScript Wie mehrere <tr> ansprechen für AJAX Response

[RemoteC]

Hallo!

Ich stehe vor einem Problem welches vermutlich keines ist, nur bin ich mittlerweile so eingefahren, dass mir die Kreativität fehlt auf eine Lösung zu kommen.

Ich habe ein Formular welches in einer 2-spaltigen Tabelle angezeigt wird: links die Labels, rechts die Eingabefelder/Checkboxen etc.

Nun habe ich ein DropDown bei dem es einen AJAX-Event gibt, je nachdem was dort ausgewählt wird soll das Formular andere Eingabefelder haben.

Für eine Feld geht das ja noch mit einem <span id="AJAXResponse"> innerhalb von <td> und über document.geltElementById('AJAXResponse').innerHTML wird geändert.
Wie mache ich das aber nun für mehrere Tabellenzeilen? Ich kann ja nicht einfach ein DIV oder span mitten in der Tabelle platzieren, ich brauche aber ein Element mit einer ID damit ich dort dann meine Rückgabewerte (= mehrere Tabellenzeilen) angezeigt werden. Die Eingabefelder, und damit Tabellenzeilen, vorher und nachher sollen durch den AJAX Response nicht angerührt werden, nur ein paar Zeilen in der Tabelle drinnen.

Ich bitte um konstruktiven Input =)

lg

Edit: An einer anderen Stelle habe ich schon ein JS verwendet welches die Style-Eigenschaften von bestimmten Klassen ändert. Mit display:none & display:table-row kann ich so schnell Ein- & Ausblenden. Leider brauch ich aber AJAX weil je nachdem was bei dem DropDown ausgewählt wird eine SQL-Query ausgeführt wird.

 

[RemoteC]

Update:

Ich habe es jetzt so gelöst, dass das Formular aus mehreren Tabellen besteht, konkret 3 Tabellen:

1. Tabelle für statische Werte
2. Tabelle mit einer ID für alles aus dem AJAX-Response
3. Tabelle mit statischen Werten, die aber aus Gründen der Benutzerfreundlichkeit am Ende des Formulars sein sollen.

Damit das Formular nicht "zerstückelt" aussieht habe ich überall <th width="200px"> ohne Inhalt gemacht, dadurch bleiben die Tabellenspalten bei allen 3 Tabellen gleich breit.

Ich habe aber jetzt ein Problem:
Ich verwende in dem Formular den jQuery UI - Datepicker Demos & Documentation mit dem Icon. Bei den Formularfeldern, welche erst im Nachhinein als AJAX-Response erzeugt werden, fehlt jetzt der Datepicker obwohl die IDs der Formularfelder in der dates-Variable sind. Ich schätze mal das liegt daran, dass die Funktion, welche den Datepicker initialisiert, nur beim Seitenaufruf gestartet wird. Was muss ich machen, um diese Funktion auch für die AJAX-Response Formularelemente aufzurufen?

Das wär' die Funktion in der alle Formularelemente definiert sind welche einen Datepicker bekommen sollen:

<script type="text/javascript" language="JavaScript">
<!--
$(function() {
    // dates: ID der Formularfelder mit Datum; *E = Formularfelder fürs Editieren (kann ja nicht die selbe ID haben)
    var dates = $( "#GebDatum, #IdGueltigBis, #BeGueltigBis, #AuGueltigBis, #SVAngemeldetAm, #SVGueltigBis, #A1GueltigBis, #Eintritt, #Austritt, #Beginn, #GebDatumE, #IdGueltigBisE, #BeGueltigBisE, #AuGueltigBisE, #SVAngemeldetAmE, #SVGueltigBisE, #A1GueltigBisE, #EintrittE, #AustrittE, #BeginnE" ).datepicker({
        regional: [ "de"],
        changeMonth: true,
        changeYear: true,
        showOn: "button",
        buttonImage: "http://www.hackerboard.de/images/calendar.gif",
        buttonImageOnly: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        yearRange: "1900:2090"
    });
});
//-->
</script>

Edit: Es gibt ein refresh:
".datepicker( "refresh" ) - Redraw a date picker, after having made some external modifications."
Aber wo und wie baue ich das ein? Habe gerade probiert das mit einem onClick zu triggern aber da kommen nur Fehler raus:
- datepicker is not defined
- $.datepicker is not a function
- ...

Edit2: Try & Error
<input type="button" value="refresh Datepicker" onClick="$().datepicker('refresh')" />
Da kommt zwar keine Fehlermeldung in der Fehlerkonsole aber es passiert auch nichts.

 

[sTEk]

Wann rufst Du die Funktion denn auf? Ich würde die nach dem erfolgreichen AJAX-Request...also via jquery bei dem hier aufrufen:

<script type="text/javascript" language="JavaScript">
$.ajax({
        type: "POST",
        data: ...,
        url: ...,
        cache: false,
        success: function(msg){
           //divs der Tabelle setzen
           //hier erst die Funktion aufrufen und die DatePicker erzeugen
      }
    });
</script>

Zum Refresh aller DatePicker denen eine eigene Klasse geben und via jquery alle Elemente der Klasse wählen...

   ...
<style TYPE="text/css">
   .myClass {
      ...
      color: blue;
      ...
   }
</style>
   ...
   <div class="myClass">div class="myClass"</div>
   <span class="myClass">span class="myClass"</span>


   <input type="button" value="refresh Datepicker" onClick="$('.myClass').datepicker('refresh');" />
   ...

 

[RemoteC]

Danke für die Antwort, ich habe aber das Gefühl dass das nicht so einfach ist.

1.) Ich kann den Datepicker nicht erst nach einem erfolgreichen AJAX-Response aufrufen da ich es auch schon davor brauche bzw. auch bei Formularen ganz ohne AJAX.

Die $function() { var dates = $... } steht am Anfang des <body>, dort wird sie auf allen Seiten, welche einen datepicker brauchen, per PHP include reingeschrieben. Die 3 <script src="jquery.[...]" ... > stehen im <head>. Sprich die Funktion wird beim Laden der Seite aufgerufen.

Das ist wohl auch mein Problem weil bei einem AJAX-Response die Seite nicht neu geladen wird sondern eben nur ein DIV (oder in meinem Fall table). Wie kann ich da nochmal die Funktion aufrufen? Für mich ist dieses $(function) verwirrend - Was ist da der Funktionsname?

2.) Das refresh funktioniert immer noch nicht. Ich habe alle Inputs, welche erst durch den AJAX-Response hinzu kommen und einen Datepicker haben sollen, eine Klasse "DatepickerClass" gegeben, dein Code für den Button macht aber nach-wie-vor nichts (keine Angst: myClass habe ich gegen DatepickerClass geändert), auch keine Fehlermeldung. Die IDs dieser Inputs stehen aber in der Liste ("var dates=...") für den Datepicker.
Es funktioniert auch nicht wenn ich statt der Klasse die ID des "AJAX-table" nehme oder die ID eines <input> bei dem es angezeigt werden soll.

 

[Zwirni]

Du hast 2 grundsätzliche Denkfehler:
1) Es ist nicht möglich ein Tabellenelement über innerHTML zu füllen. Insbesondere der IE macht hier einen Strich durch die Rechnung und liefert nur eine Fehlermeldung. Der einzige Weg das zu umgehen ist, die Inhalte per DOM innerhalb der Tabelle zu erzeugen. Als Resultat eines AJAX-Requests (womit das ursprüngliche Problem eigentlich nichts zu tun hat) ist das natürlich ziemlich ungünstig, da dieser meist schon HTML-Code liefert.
2) Ein Formular sollte man nicht in eine Tabelle stopfen. Wenn es dir um die gleichmäßige Ausrichtung von Beschriftung zu Feld geht, verwende <fieldset> und <label> und entsprechende CSS-Eigenschaften - keine Tabelle, keine Tabellenzellen. Wenn Du das machst, wirst Du auch das unter 1) beschriebene Tabellenproblem nicht mehr haben (da Du ein <fieldset> locker per innerHTML verändern kannst) und der HTML-Code wäre auch semantisch korrekt.

 

[RemoteC]

Du hast 2 grundsätzliche Denkfehler:
1) [...]Insbesondere der IE macht hier einen Strich durch die Rechnung [...]

Da bin ich leider auch schon drauf gekommen ...

2) Ein Formular sollte man nicht in eine Tabelle stopfen. [...]

Naja, gibt genug Tutorials für CSS styled forms wo die Grundstruktur trotzdem noch eine Tabelle bleibt.
Ich habe jetzt die Tabelle gelöscht, schon alleine wegen IE-Bug, zwei Nachteile sehe ich beim CSS gegenüber der Tabelle:
- Der Abstand zwischen <label> und <input> richtet sich nicht automatisch nach dem längsten <label> sondern muss fix vorgegeben werden. Nachdem mein Formular dynamisch ist muss ich jetzt bei der Breite des <label> vom längsten, möglichen ausgehen. Wenn ein User aber seine Auswahl derart trifft, dass dieses Eingabefeld mit der längsten Beschriftung nie erscheint ist trotzdem der Abstand zwischen <label> und <input> da.
- Ein weiteres Problem habe ich mit einem Ersatz für "valign=middle": Eine Checkbox, welche zu einem 2-zeiligem <label> gehört, wird nicht mittig in der Zeile angezeigt, selbst wenn für input{vertical-align:middle;} definiert ist.

Das Problem mit dem datepicker habe ich aber noch immer. Wo bzw. wie sage ich dem datepicker-Skript, dass es neue Formularfelder gibt und es dort auch kontrollieren soll, ob für diese Felder ein datepicker dargestellt werden soll?