Matze: Ajax Verständnisproblem

Hallo allen!

Stellt euch vor ich habe ein klassisches Menü mit Reitern.
Darunter befindet sich ein Div-Kontainer.
Per klick auf einen der Reiter wird per JavaScript-Request eine Variable an ein PHP-Script übertragen und eine entsprechende (Text)Datei geladen.
Der Inhalt der Datei wird dann in den Kontainer geladen.

Soweit nichts neues denk ich.

Ich habe aber um das gesamte Konstrukt ein Formular gezogen und die geladenen Dateien enthalten Formular-Elemente.
Wie übertrage ich also dieses Formular bzw was passiert mit den gesetzten Werten in einem Teil des Formulars (Reiter 1) wenn ich einen anderen Reiter anwähle?

Ich hoffe ich konnte mich verständlich ausdrücken.
Kann mir dazu noch einmal jemand Hilfestellung geben?

Danke und Grüße,
Matze

  1. Hi,

    Ich habe aber um das gesamte Konstrukt ein Formular gezogen und die geladenen Dateien enthalten Formular-Elemente.
    Wie übertrage ich also dieses Formular

    Kommt drauf an, was du willst.
    Wenn du es "per AJAX" abschicken willst - dann durchlaufe die einzelnen Felder, lese ihren Namen und Inhalt aus, und bastle dir daraus den noetigen Querystring zusammen. URL-gerechtes Kodieren nicht vergessen, Stichwort encodeURIComponent. Ach ja, geht natuerlich nur fuer "normale" Formularfelder, nicht fuer File-Uploads, denn JavaScript hat auf lokale Dateien keinen Zugriff.

    bzw was passiert mit den gesetzten Werten in einem Teil des Formulars (Reiter 1) wenn ich einen anderen Reiter anwähle?

    Da passiert erst mal gar nix, weil das wechseln zu einem anderen Reiter lediglich das Aus-/Einblenden verschiedener Elemente per JS/CSS bedeutet.

    MfG ChrisB

    --
    "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
    1. Hallo!

      Wenn du es "per AJAX" abschicken willst - dann durchlaufe die einzelnen Felder, lese ihren Namen und Inhalt aus, und bastle dir daraus den noetigen Querystring zusammen. URL-gerechtes Kodieren nicht vergessen, Stichwort encodeURIComponent. Ach ja, geht natuerlich nur fuer "normale" Formularfelder, nicht fuer File-Uploads, denn JavaScript hat auf lokale Dateien keinen Zugriff.

      Das bedeutet also, dass ich bei jedem klick auf einen anderen Reiter die Formularinhalte mitschicken und jedesmal per PHP speichern u./o. ändern muss bis das Formular "endgültig" abgeschickt wird, d.h. alle nötigen Einträge gemacht wurde? Es soll schließlich noch ein Error-Handling geben.

      Da passiert erst mal gar nix, weil das wechseln zu einem anderen Reiter lediglich das Aus-/Einblenden verschiedener Elemente per JS/CSS bedeutet.

      Bedeutet es ebend nicht. Die Elemente liegen beim Clienten ja erst vor wenn auf einen entsprechenden Reiter geklickt wurde. Angenommen ich habe Reiter 1 vor mir und fülle das Formular wie auch immer aus und schicke es wie auch immer ab. Da liegt der Inhalt von Reiter 2 noch auf dem Server und wurde nie abgerufen. Somit kann ich auch nichts ein o. ausblenden was es beim Client noch nicht gibt.

      Danke und Grüße,
      Matze

      1. Hi,

        Das bedeutet also, dass ich bei jedem klick auf einen anderen Reiter die Formularinhalte mitschicken und jedesmal per PHP speichern u./o. ändern muss bis das Formular "endgültig" abgeschickt wird, d.h. alle nötigen Einträge gemacht wurde?

        Nicht notwendigerweise.

        Da passiert erst mal gar nix, weil das wechseln zu einem anderen Reiter lediglich das Aus-/Einblenden verschiedener Elemente per JS/CSS bedeutet.

        Bedeutet es ebend nicht. Die Elemente liegen beim Clienten ja erst vor wenn auf einen entsprechenden Reiter geklickt wurde. Angenommen ich habe Reiter 1 vor mir und fülle das Formular wie auch immer aus und schicke es wie auch immer ab. Da liegt der Inhalt von Reiter 2 noch auf dem Server und wurde nie abgerufen. Somit kann ich auch nichts ein o. ausblenden was es beim Client noch nicht gibt.

        Ach nee.
        Dann laedst du es halt auf erstmalige Anforderung hin nach, OK. Wenn dann nochmal ein Reiter angesprungen wird, der zuvor bereits besucht wurde - dann brauchst du natuerlich nicht erneut vom Server laden.

        Unklar ist immer noch, ob die auf einem Reiter eingegebenen Formulardaten fuer die Ermittlung der Daten auf dem naechsten/einem anderen Reiter notwendig sind. Wenn nicht, dann brauchst du das Formular auch nicht "zwischendurch" abzuschicken.
        Bastis Vorschlag, das ganze gleich in ein Formular zu packen, und dieses lediglich zur Anzeige auf mehrere Reiter zu verteilen, boete sich wohl am ehesten an, wenn der Formularaufbau statisch ist.

        MfG ChrisB

        --
        "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
        1. Hallo ChrisB!

          Dann laedst du es halt auf erstmalige Anforderung hin nach, OK. Wenn dann nochmal ein Reiter angesprungen wird, der zuvor bereits besucht wurde - dann brauchst du natuerlich nicht erneut vom Server laden.

          Achja, natürlich. Hm... und wie find ich raus ob die Daten schon im Browsercache sind? Sonst ist ja logisch, dass die Felder immer wieder leer sind wenn ich die Reiter wechsle.

          (...) Wenn nicht, dann brauchst du das Formular auch nicht "zwischendurch" abzuschicken.

          Genau, das hab ich jetzt verstanden.

          Bastis Vorschlag, das ganze gleich in ein Formular zu packen, und dieses lediglich zur Anzeige auf mehrere Reiter zu verteilen, boete sich wohl am ehesten an, wenn der Formularaufbau statisch ist.

          Ich hatte eine ähnliche Idee. Ich hatte die Fieldsets mit einem <legend>-"Rahmen" untereinander und bei Klick auf eine "keine Angaben"-Checkbox wurde die Höhe des Fieldsets soweit verringert, dass nur noch der Button zu sehn war. Das Problem dabei war, das die Input-Felder zwar in dem verkleinerten Fieldset nicht mehr zu sehen waren, sie haben sich aber irgendwie mit dem darunter liegenden Fieldset überlagert, so dass ich dort die liegenden Elemente nicht mehr bedienen konnte. Wenn ich die Felder nach dem "Einfahren" per JS auf disabled gesetzt hab, konnte man die Einträge an ihrer ursprünglichen Position eingegraut sehen und das darunter liegende Fieldset hat sich nach oben und "dahinter" verschoben. Hm.

          Merkwürdiges Verhalten.

          Danke und Grüße, Matze

          1. Hallo Matze,

            Achja, natürlich. Hm... und wie find ich raus ob die Daten schon im Browsercache sind? Sonst ist ja logisch, dass die Felder immer wieder leer sind wenn ich die Reiter wechsle.

            Es geht nicht um den Browsercache, der wäre sowieso zu unzuverlässig. Ruf doch einfach per JS den Inhalt der Elemente ab, oder lösch diesen einfach nicht daraus. Ich meine, wo ist das problem?

            Der Benutzer hat zuerst Tab 1 vor sich.  Dann gibt er die Daten ein und wechselt auf den 2. Tab. Dein Code muss jetzt nur den 1. Tab ausblenden und den 2. nachladen bzw. anzeigen. Aber du kannst doch problemlos in Tab 1 die eingegebenen Daten entweder verarbeiten und irgendwo im JS zwischenspeichern, oder auch einfach in den Formularelementen lassen und dann am Schluss eben alle Daten absenden.

            Jonathan

            1. Hallo Jonathan, Hallo ChrisB!

              Ich glaub mir fehlt die Möglichkeit abzufragen ob fieldsetB bereits aufgerufen wurde oder erst vom Server nachgeladen werden muss während man sich fieldsetA betrachtet und auf den Reiter für die Anzeige von fieldsetB klickt.

              Oder bin ich da auf dem Holzweg?

              Danke für eure Hilfe!

              Grüße, Matze

          2. Hi,

            Dann laedst du es halt auf erstmalige Anforderung hin nach, OK. Wenn dann nochmal ein Reiter angesprungen wird, der zuvor bereits besucht wurde - dann brauchst du natuerlich nicht erneut vom Server laden.

            Achja, natürlich. Hm... und wie find ich raus ob die Daten schon im Browsercache sind?

            Wie Jonathan schon sagte, der Browsercache ist hier eher uninteressant. (Bei einem erneuten AJAX-Request auf die selbe Ressource sich ggf. daraus zu bedienen, dass uebernimmt der Browser fuer dich, da brauchst du nicht eingreifen.)

            Das HTML-Dokument ist in diesem Falle dein "Cache".
            Du laedst Inhalte nach, und fuegst sie ins Dokument ein. Also kannst du auch vor dem Request abfragen, ob du das Einfuegen vorher schon gemacht hast - Element mit bestimmter ID vorhanden, Merker im JavaScript-Code gesetzt, etc.
            Dann brauchst du diesen Inhalt natuerlich nicht erneut laden und einbauen, sondern nur wieder sichtbar machen.

            MfG ChrisB

            --
            "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
  2. Hallo,

    ich habe eine ähnliche Lösung für umfangreiche Formulare - aber etwas einfacher: das gesamte Formular steht im Seitenquelltext, die umzuschaltenden Bereiche sind die fieldsets untergebracht. Beim onload-Event wird eine Javascript-Funktion aufgerufen, welche alle fieldsets außer dem ersten unsichtbar macht und die Karteireiternavigation erzeugt.

    Der Vorteil ist, auch mit deaktiviertem JS ist das Formular benutzbar, es müssen keine vorher eingetragenen Werte übergeben werden, das Ganze ist einfach erweiterbar - nur ein neues fieldset hinzufügen - fertig.

    Grüße Basti