sebbel: Mit "Ajax" HTML-Code nachladen.. <form> in FF nicht angezeigt

Hallo,

ich lade per Ajax HTML Daten in ein DIV mittels innerHTML neu. Das funktioniert auch einwandfrei, sowohl im FF als auch im IE. (Wobei IE sowieso nicht beachtet werden muss, weil Intranet Anwendung.)

Jedoch bin ich auf ein Problem gestoßen, welches mir unangenehmes Kopfzerbrechen bereitet:

Werden Daten geladen, in der ein FORM Tag innerhalb eines TR Tags einer Tabelle vorhanden ist, wird die komplette Tabellenzeile nicht angezeigt.  Sicherlich könnte man dies mit CSS lösen, in dem man in diesen Fällen eine Tabellenzeile nachmacht. Wäre in meinem Falle nur viel Arbeit, weil ich hauptsächlich mit Tabellen (eben für eine tabellenartige Anzeige) gearbeitet habe.

Ein kl. und simples Beispiel (nur mit Tags, ohne Attribute) um das Problem nochmal zu verdeutlichen:

Tabellenzeile wird nicht angezeigt:
<table>
<tr>
<form>
<td>&nbspb;</td>
</form>
</tr>
<table>

Tabellenzeile wird angezeigt:
<table>
<tr>
<td><form>&nbsp;</form></td>
</tr>

Jedoch besteht der Sinn ja nicht, jeder Tabellenspalte in einer Zeile ein eigenes Formular zu geben..

Ein Bug im FF?? Wie gesagt, der IE zeigt alles einwandfrei an..

  1. hallo,

    Jedoch besteht der Sinn ja nicht, jeder Tabellenspalte in einer Zeile ein eigenes Formular zu geben..

    Nein. Aber <tr> hat nun einmal nur zwei Kindelemente, und <form> ist keines davon. Der Einsatz von <form> in Zusammenhang mit einer Tabelle ist dann sinnvoll, wenn es gänzlich außerhalb dieser Tabelle verwendet wird, also schematisch so:
      <form>
        <table>
          ...
        </table>
      </form>

    Ein Bug im FF?

    Ganz gewiß nicht.

    Wie gesagt, der IE zeigt alles einwandfrei an..

    _Das_ ist ein bug.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. Nein. Aber <tr> hat nun einmal nur zwei Kindelemente, und <form> ist keines davon. Der Einsatz von <form> in Zusammenhang mit einer Tabelle ist dann sinnvoll, wenn es gänzlich außerhalb dieser Tabelle verwendet wird, also schematisch so:
        <form>
          <table>
            ...
          </table>
        </form>

      Hmm, gibt es dafür gute Gründe, warum das so ist? Also das <form> kein Kindelement ist? Denn in meinem Falle, dass die <form> die Tabelle umschließt, ist nicht möglich. Warum? Weil ich in jeder Zeile und davon der ersten Spalte ein Formular habe mit einem Hidden-Field, dessen Wert  die ID der Zeile aus der Datenbank ist. Klicke ich nun auf Bearbeiten, bzw. die Tabellenzeile an, wird die Form gesendet usw..

      Das wird auch einwandfrei eingezeigt, weil die Form innerhalb eines <td> ist. Würde ich aber eine Form um die Tabelle legen, ginge dieses Prinzip der Datensatzauswahl verloren. Jedoch benötige ich ein Hinzufügen-Formular innerhalb der Tabelle - über mehrere Spalten hinweg, welches ohne diese innerHTML-Technik auch wunderbar funktioniert. Auch im FF! Nur beim nachträglichen Laden und ersetzen durch innerHTML springt wohl eine andere Parsingmethode im FF an.

      1. hallo sebbel,

        Hmm, gibt es dafür gute Gründe, warum das so ist?

        Natürlich. Der Grund trägt den Namen HTML. Die Spezifikationen dafür verantwortet das W3C.

        Denn in meinem Falle, dass die <form> die Tabelle umschließt, ist nicht möglich.

        Doch, natürlich.

        Weil ich in jeder Zeile und davon der ersten Spalte ein Formular habe

        Das ist ziemlich unmöglich, weil du nicht innerhalb eines Formulars ein weiteres "haben" kannst. Aber wenn du tatsächlich in jeder Tabellenzelle ein Formular haben möchtest, steht dem nichts im Wege. Dann brauchst du jedoch keines mehr, das gewissermaßen "außenherum" liegt.

        Klicke ich nun auf Bearbeiten, bzw. die Tabellenzeile an, wird die Form gesendet usw..

        "Die Form" gibt es nicht, das Internet ist kein Sandkasten, in dem man mit Förmchen spielen kann. Es gibt allerdings "das Formular". Und das bleibt immer hübsch da, wo es ist. Wenn du es bei jedem Klick versenden wolltest, könntest du ja immer bloß einmal klicken, danach wärs weggeschickt und einfach nicht mehr da. So doof haben sich aber die HTML-Erfinder nicht angestellt. Was tatsächlich "abgeschickt" wird, betrifft die Daten, die du eventuell in _das Formular_ eingetragen hast.

        Das wird auch einwandfrei eingezeigt, weil die Form innerhalb eines <td> ist.

        Wie sieht denn nun dein Code wirklich aus? Erst willst du es so haben: <tr><form> - und jetzt willst du es so haben: <td><form>. Was davon hast du denn nun im Einsatz?

        Würde ich aber eine Form um die Tabelle legen

        Was willst du denn nur mit "einer Form"? Welche Form haben denn deine Tabellen? Die sind vermutlich rechteckig, gelle? Welche Formen gibts denn für Tabellen noch? Und da Tabellen nun einmal um den Preis ihrer Existenz eine (meist rechteckige) Form haben, ist es völlig überflüssig, irrelevante Anstrengungen zum Hineinlegen einer anderen Form zu unternehmen.

        Jedoch benötige ich ein Hinzufügen-Formular innerhalb der Tabelle

        Nichts hindert dich daran.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. Ok, habe mich vllt. ein wenig missverständlich ausgedrückt. Hier ist ein vereinfachtes Beispiel, wie ich es bisher mache (Das Beispiel ist nur für das Logikverständis):

          <table>
          <tr>
          <td>Spalte1</td>
          <td>Spalte2</td>
          <td>Spalte3</td>
          </tr>

          <tr>
          <td><form><input type="hidden" name="ID" value="1"><input type"submit" value="Bearbeiten"></form></td>
          <td>Beispielwert1</td>
          <td>Beispielwert2</td>
          </tr>

          <tr>
          <td><form><input type="hidden" name="ID" value="2"><input type"submit" value="Bearbeiten"></form></td>
          <td>Beispielwert3</td>
          <td>Beispielwert4</td>
          </tr>

          <tr>
          <form>
          <td><input type"submit" value="Bearbeiten"></td>
          <td><input type="text" name="Wert1"></td>
          <td><input type="text" name="Wert2"></td>
          </form>
          </tr>

          </table>

          Wie gesagt, das ganze funktioniert 1a wenn die Seite normal aufgerufen wird. Und weil es sowieso eine Intranet-Lösung ist kann ich mich auch nur auf den FF konzentrieren. Nur nachträglich per innerHTML funktioniert es nicht.

          1. hallo,

            <td><form><input type="hidden" name="ID" value="1"><input type"submit" value="Bearbeiten"></form></td>

            Das ist ein leeres Formular, in dem lediglich das "hidden"-Feld vermutlich irgendwelche Werte bekommen soll - hier aber auch nicht hat, bis auf die einsame Ziffer 1. Warum soll man da auf "bearbeiten" klicken, wenn man nichts zum Bearvbeiten sieht? <input type="submit" macht auch nur dann Sinn, wenn in <form> mindestens eine "action" steht, sonst passiert eben - gar nichts. Du hast den "Modellcharakter" etwas überreizt, deine Darstellung hätte mehr Sinn machen sollen.

            <td>Beispielwert1</td>
            <td>Beispielwert2</td>

            Das sind zwei Beispielwerte ohne jeglichen Bezug zum vorangegangenen Formular. Da sie außerhalb jedes Formulars stehen, kann ihen auch nichts passieren. Glückwunsch.

            <td><form><input type="hidden" name="ID" value="2"><input type"submit" value="Bearbeiten"></form></td>
            <td>Beispielwert3</td>
            <td>Beispielwert4</td>

            Exakt dasselbe.

            </tr>
            <tr>
            <form>

            Dieses "form" gehört da nicht hin, sondern in das nächste <td>

            <td><input type"submit" value="Bearbeiten"></td>

            Hier gibt es außerhalb eines defekten Formulars nur einen wirkungslosen und sinnfreien submit-button.

            Wie gesagt, das ganze funktioniert 1a wenn die Seite normal aufgerufen wird.

            Nein, mit Sicherheit funktioniert das nicht. Das kann es gar nicht. Vermutlich möchtest du dich doch noch einmal mit Formularen beschäftigen.

            Und weil es sowieso eine Intranet-Lösung ist

            Das spielt hier keine Rolle.

            Nur nachträglich per innerHTML funktioniert es nicht.

            innerHTML ist eine Eigenschaft des Javascript-Objekts all und hat mit deinem Formular erstmal gar nichts zu tun.

            Grüße aus Berlin

            Christoph S.

            --
            Visitenkarte
            ss:| zu:) ls:& fo:) va:) sh:| rl:|
            1. Nun gut, ich passe. Danke für deine Hilfsbereitschaft, auch wenn diese mir leider nicht weiterhelfen konnte.

              Zu meinem Modellbeispiel: Es sollte lediglich zeigen, wie die Forms bei mir plaziert werden und welcher Inhalt schematisch in ihnen stecken.

              Ps: Warum macht eine Form mit einem hidden field und einem submit button für dich keinen Sinn?
              Der submit button (mit Name) dient mir zur Ansteuerung einer Funktion, die ID ist ein Parameter welcher mir sagt, welcher Datensatz gewählt wurde. Ist nichts anderes als mit einem Link zu arbeiten und diesen im Link zu übertragen.
              Ich habe mich aber aus optischen Gründen (und der Länge der zu übertragenden Daten in anderen Feldern) für die POST-Methode entschieden.

              PPS: Ich wäre vorsichtig mit der pauschalen Aussage, es könne nicht funktionieren, schließlich funktioniert genau dieses Schema seit Anfang des Projekt Mitte 2005.

              PPPS: Solltest du doch Interesse an diesem Logikkniffel haben, vllt. findest du ja noch eine Methode mehrere Forms innerhalb einer Tabelle zu platzieren, wobei eine aber immer alle Spalten genau einer Zeile umschließt.

              1. Hallo sebbel,

                Nun gut, ich passe. Danke für deine Hilfsbereitschaft, auch wenn diese mir leider nicht weiterhelfen konnte.

                Wenn Du Dich an die Hinweise von Christop Schnauß bezügliches Deines Formulars hältst, funktioniert es auch mit Firefox.

                Zu meinem Modellbeispiel: Es sollte lediglich zeigen, wie die Forms bei mir plaziert werden und welcher Inhalt schematisch in ihnen stecken.

                Das ist jedoch kein Grund, ein fehlerhaftes Beispiel zu posten bzw. dieses nun auch noch verteidigen zu wollen.

                Ich habe mich aber aus optischen Gründen (und der Länge der zu übertragenden Daten in anderen Feldern) für die POST-Methode entschieden.

                Ich habe einmal GET genommen, damit man auch sieht, das es übermittelt wird.

                Mit freundlichem Gruß
                Micha

                --
                LeagueEditor JavaScript :: simple Ligaverwaltung auf der Basis von JavaScript || JS Tetris :: für zwischendurch
                1. Wenn Du Dich an die Hinweise von Christop Schnauß bezügliches Deines Formulars hältst, funktioniert es auch mit Firefox.

                  Alle meine Formulare funktionieren einwandfrei. Mir geht es auch nicht um die Funktionsweise eines Formulares, sondern lediglich um die Platzierung innerhalb einer Tabelle.

                  Bitte versucht doch nochmals meine Grundidee zum Aufbau der Tabelle und der darin enthaltenen Formularen zu verstehen.

                  Zu meinem Modellbeispiel: Es sollte lediglich zeigen, wie die Forms bei mir plaziert werden und welcher Inhalt schematisch in ihnen stecken.
                  Das ist jedoch kein Grund, ein fehlerhaftes Beispiel zu posten bzw. dieses nun auch noch verteidigen zu wollen.

                  Muss ich denn alles in aller Ausführlichkeit schreiben, wenn es nur um die Platzierung von Formularen und dem damit verbundenen spaltenübergreifenden Sinn geht?

                  Ich habe einmal GET genommen, damit man auch sieht, das es übermittelt wird.

                  Bei mir wird alles übermittelt, es funktioniert auch alles einwandfrei. Auch die Formulare innerhalb einer Tabellenzeile (also <tr><form><td>...) wenn die Seite normal aufgerufen wird. Wenn ich diese Tabelle aber dann mit AJAX neulade und mit document.getElementById('tabellendiv').innerHTML ersetze, dann tritt beim FF scheinbar eine andere Parserfunktion in Kraft und das Formular wird nicht angezeigt.

                  Hoffe mich diesmal wirklich verständlich ausgedrückt zu haben, meine Nerven bezüglich dieses Thema's liegen nämlich schon blank.

                  Trotzdem vielen Dank für deine und der anderen Hilfe!

                  1. hallo sebbel,

                    Hoffe mich diesmal wirklich verständlich ausgedrückt zu haben

                    Ja. Du hast verständlich gemacht, daß du das Forum nicht verstehen willst. Um dir tatsächlich helfen zu können, brauchen wir deinen Code, und nicht irgendwelche schematischen und dadurch falschen und irreführenden Beispiele.
                    Und du hast verständlich gemacht, daß dir Ratschläge wurscht sind. <form> gehört nun einmal nicht in <tr>, du willst es aber unbedingt dort haben. Und du sprichst in Rätseln: niemand weiß, was du unter "normal aufrufen" verstehst.
                    Das einzige, was du bisher verständlich gemacht hast, ist: du hast defekten Code.

                    meine Nerven bezüglich dieses Thema's liegen nämlich schon blank.

                    Dein Formular auch.

                    Grüße aus Berlin

                    Christoph S.

                    --
                    Visitenkarte
                    ss:| zu:) ls:& fo:) va:) sh:| rl:|
                  2. Hallihallo!

                    Wie ich feststelle, scheint Ihr beide (sebbel und Christoph) einfach nur aneinander vorbei zu reden.
                    Haupsächlich aber scheinst Du, sebbel, nicht zu verstehen, was Christoph versucht, Dir mitzuteilen (ist kein Vorwurf, ich selber hatte damit auch schon meine Probleme (kein Vorwurf, Christoph ;) ) )

                    Ich versuche einmal zusammenzufassen:
                    a) es handelt sich um eine Intranetanwendung, daher kannst Du getrost von Javascript- Verfügbarkeit ausgehen
                    b) das tust Du auch, denn Du bindest Deine Daten per AJAX ins Dokument ein.
                    c) Du versuchst, die fürs "Bearbeiten" benötigte Datensatz-ID per Formular zu übergeben, was aber nicht valide ist, und nicht funktioniert.

                    Frage von mir: Meinst Du, Du _brauchst_ das Formular überhaupt?
                    So, wie ich das sehe, würde es auch ein ganz normaler Javascriptverweis ála

                    <a class="css_simulierter_button" href="javascript:bearbeiten(tabellenzeilennr)">bearbeiten</a>

                    tun.
                    Die Klasse, damit Du dem Verweis die optischen Eigenschaften eines Submit-Buttons geben kannst,
                    das Verwisziel ist Deine Funktion, die Du wahrscheinlich vorher per "onsubmit" aufgerufen hast (nehme ich mal an),
                    und der Parameter "tabellenzeilennr" ist der Wert, der vorher in Deinem hidden-Feld stand.

                    Somit solltest Du keine Probleme mehr mit der Validität haben, die Dich evtl. an Deinem Vorhaben mit dem Formular hat scheitern lassen.

                    Ich hoffe, ich konnte damit wenigstens ein kleines Bisschen helfen...

                    Viele liebe Grüße,
                    Der Dicki

                  3. Hallo sebbel,

                    Wenn Du Dich an die Hinweise von Christop Schnauß bezügliches Deines Formulars hältst, funktioniert es auch mit Firefox.

                    Alle meine Formulare funktionieren einwandfrei. Mir geht es auch nicht um die Funktionsweise eines Formulares, sondern lediglich um die Platzierung innerhalb einer Tabelle.

                    Ich habe - wie bereits geschildert - Dein Beispielcode und Christophs Hinweise zu einem funktionierenden Beispiel zusammen gefügt. Leider verstehe ich nun nicht mher, wo Dein Problem noch liegt und was der Grund Deines Scheiterns ist!

                    Bitte versucht doch nochmals meine Grundidee zum Aufbau der Tabelle und der darin enthaltenen Formularen zu verstehen.

                    Habe ich, sie ist jedoch falsch und muss korrigiert werden, damit es funktioniert.

                    Mit freundlichem Gruß
                    Micha

                    --
                    LeagueEditor JavaScript :: simple Ligaverwaltung auf der Basis von JavaScript || JS Tetris :: für zwischendurch
              2. Hallo Sebbel,

                PPPS: Solltest du doch Interesse an diesem Logikkniffel haben, vllt. findest du ja noch eine Methode mehrere Forms innerhalb einer Tabelle zu platzieren, wobei eine aber immer alle Spalten genau einer Zeile umschließt.

                ich hätte zumindest einen Vorschlag (für den mich die Experten hier im Forum wahrscheinlich steinigen werden ;-) )

                Also: folgendes geht (superstark vereinfacht - SCNR:
                <td>
                  <form>
                    <!-- Inhalt des Formulars -->
                  </form>
                </td>

                folgendes geht anscheinend nicht (weil in einem <tr> nur <td> stehen dürfen und keine anderen Elemente):
                <tr>
                  <form>
                    <td></td>
                    <td></td>
                  </form>
                </tr>

                Dann probier es doch einfach mal so:
                <tr>
                  <td colspan="3">
                    <form>
                      <table>
                        <tr>
                          <td></td>
                          <td></td>
                          <td></td>
                        </tr>
                      </table>
                    </form>
                  </td>
                </tr>

                Ich weiss, ist super unsauber und führt zu Tabellenmonstern, könnte aber funktionieren.

                liebe Grüße mbr

                1. hallo,

                  ich hätte zumindest einen Vorschlag (für den mich die Experten hier im Forum wahrscheinlich steinigen werden

                  Nicht doch.

                  Also: folgendes geht (superstark vereinfacht - SCNR:
                  <td>
                    <form>
                      <!-- Inhalt des Formulars -->
                    </form>
                  </td>

                  Ja, allerdings hat er das schon.

                  Dann probier es doch einfach mal so:
                  <tr>
                    <td colspan="3">
                      <form>
                        <table>
                          <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                          </tr>
                        </table>
                      </form>
                    </td>
                  </tr>

                  Das ist auch möglich.

                  Ich weiss, ist super unsauber und führt zu Tabellenmonstern, könnte aber funktionieren.

                  Es ist nicht unsauber, und es kann durchaus funktionieren. Formulare gehören zu den Dingen, die den Einsatz einer Tabelle rechtfertigen können (aber nicht müssen).

                  Grüße aus Berlin

                  Christoph S.

                  --
                  Visitenkarte
                  ss:| zu:) ls:& fo:) va:) sh:| rl:|
                2. Dann probier es doch einfach mal so:
                  <tr>
                    <td colspan="3">
                      <form>
                        <table>
                          <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                          </tr>
                        </table>
                      </form>
                    </td>
                  </tr>

                  Ich weiss, ist super unsauber und führt zu Tabellenmonstern, könnte aber funktionieren.

                  liebe Grüße mbr

                  Da bleibt dann aber leider das Problem, das je nach Inhalt der Tabelle die Spaltenbreite der untergeordneten Tabelle nicht mit der übergeordneten übereinstimmt.

              3. hallo,

                Warum macht eine Form mit einem hidden field und einem submit button für dich keinen Sinn?

                "eine Form" ist beispielsweise die Eigenschaft eines Kreises, rund zu sein. Was du meinst, ist ein Formular. Selbstverständlich darf ein Formular ein hidden-feld enthalten - oder auch mehrere. "hidden" bedeutet nur, daß es verborgen ist, also nichts angezeigt wird. Ein optisch leeres Formular macht tatsächlich keinen Sinn, selbst wenn es einen funtionierenden submit-button geben sollte. Es bietet keinerlei Hinweis, warum man den benutzen sollte.

                Der submit button (mit Name) dient mir zur Ansteuerung einer Funktion, die ID ist ein Parameter welcher mir sagt, welcher Datensatz gewählt wurde. Ist nichts anderes als mit einem Link zu arbeiten und diesen im Link zu übertragen.

                Dann nimm doch einen einfachen Verweis, der reicht völlig aus.

                Ich habe mich aber aus optischen Gründen (und der Länge der zu übertragenden Daten in anderen Feldern) für die POST-Methode entschieden.

                Optische Gründe? Und wo in deinem Beispiel hast du POST verwendet? Es steht nichts davon da.

                PPS: Ich wäre vorsichtig mit der pauschalen Aussage, es könne nicht funktionieren, schließlich funktioniert genau dieses Schema seit Anfang des Projekt Mitte 2005.

                Ich kann nur das beurteilen, was du postest. Und das ist werder funktionsfähig noch sinnvoll.

                PPPS: Solltest du doch Interesse an diesem Logikkniffel haben, vllt. findest du ja noch eine Methode mehrere Forms innerhalb einer Tabelle zu platzieren

                Finde ich gewiß nicht, weil ich normalerweise nicht mehr mit Förmchenspielen im Sandkasten beschäftigt bin. In eine Tabelle kannst du aber so viele Formulare einbauen, wie du für nötig hältst, daran hindert dich nichts.

                Grüße aus Berlin

                Christoph S.

                --
                Visitenkarte
                ss:| zu:) ls:& fo:) va:) sh:| rl:|