JavaScript/Jquery Animation

[tobmes]

Hi Experten,

ich befasse mich gerade mit Webprogrammiereung. Dazu habe ich mir ein kleines Projekt ausgedacht. Und zwar eine kleine Lagerverwaltung. Der Benutzer hat die Möglichkeit über ein Formular eingaben zu machen, diese werden dann in die Datenbank geschrieben. Soweit, so gut. Beim erfolgreichem absenden der Daten soll der Benutzer auch ein Feedback bekommen, das habe ich bis jetzt mir einem alert("Daten erfolgreich gespeichert"); gemacht. Das ist jedoch nicht wirklich schön.

Jetzt habe ich gesehen, das man mit JQuery auch DOM-Elemente erzeugen kann. Auch das habe ich hinbekommen. Jetzt habe ich nur ein Problem und zwar wird mir die Meldung nur ganz kurz angezeigt.

Hier mal der Code:

function fail() {
    var fail = $("<p/>", {
        html: "Es ist ein Fehler aufgetreten",
        "class": "alert"
    });
    fail.appendTo("#test").fadeIn("slow").fadeOut(3000);
    return false;
}

function ok() {
$(document).ready(function(){
  var ok = $("<p/>", {
      html: "Daten erfolgreich gespeichert",
      "class": "allRight"
  });
  ok.appendTo("#test").fadeIn("slow");
  setTimeout(function(){ok.fadeOut("slow");},3000);
  // ok.appendTo("#test").fadeIn("slow").fadeOut(3000);
  // ok.animate({
  // top: "0px"
  // }, 2000 ).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
  // ok.fadeOut(3000);
});

    return true;
}

Die Fehlermeldung wir korrekt angezeigt, die Erfolgesmedung wie gesagt nur ganz ganz kurz. Jemand eine Idee, wie ich das besser machen kann?

Danke schon mal für die Hilfe

[Der Martin]

Moin,

Der Benutzer hat die Möglichkeit über ein Formular eingaben zu machen, diese werden dann in die Datenbank geschrieben. Soweit, so gut.

reden wir hier von herkömmlicher Formularverarbeitung?

Jetzt habe ich gesehen, das man mit JQuery auch DOM-Elemente erzeugen kann. Auch das habe ich hinbekommen. Jetzt habe ich nur ein Problem und zwar wird mir die Meldung nur ganz kurz angezeigt.

Ohne den HTML-Code, auf dem dein Javascript aufbaut, kann man nur raten.

Und ich rate: Das Formular wird abgeschickt, gleichzeitig dein Javascript-Effekt ausgelöst und so die Meldung angezeigt. Ein paar Zehntelsekunden später ist die Antwort des Servers auf den Formularversand eingetroffen, und das neue Dokument wird vom Browser geparst und angezeigt.

Jemand eine Idee, wie ich das besser machen kann?

Wie gesagt: Zeig mal das HTML dazu. Dann kann man weitersehen.

So long,
 Martin

[tobmes]

Hi Martin,

danke schon mal für die schnelle Antwort, hier ist mal der Code für das Formular.

echo <<< showHTML
  <h1> Mein Lager </h1>
        <p>$this->message</p>//htmlspecialchars einbinden, aber wie?
<p id="test"></p>
  <small>Mit * gekennzeichnete Felder sind Pflicht</small>
  <form method="POST" action="lager.php" onsubmit="return checkIsSet();">
  <label class="mobile">
  Artikel*<br/>
  <!--<input type="text" name="artikel"/>-->
  <select name="artikel" size="1" class="csstest">
  <option value="1" selected>Auswählen ...</option>
showHTML;
        foreach ($item as $key => $value) {
            $value = htmlspecialchars($value);
            echo <<< showHTML
    <option>$value</option>
showHTML;
        }
        echo <<< showHTML
  </select>
  </label>
  <label class="mobile">
  Menge*<br/>
  <input type="text" name="menge" size="10" id="num" class="csstest"/>
  </label>
  <label class="mobile">
  Lagerort*<br/>
  <!--<input type="text" name="lagerort"/>-->
  <select name="lagerort" size="1">
  <option value="1" selected>Auswählen ...</option>
showHTML;
        foreach ($lagerort as $key => $value) {
            $value = htmlspecialchars($value);
            echo <<< showHTML

            <option>$value</option>
showHTML;
        }
        echo <<< showHTML
  </select>
  </label>
  <label class="mobile">
  Kommentar<br/>
  <input type="text" name="kommentar"/>
  </label>
  <label class="mobile">
  Option<br/>//todo: implementieren
  <input type="radio" name="hasOption" value="no">Nein
  <input type="radio" name="hasOption" value="yes">Ja
  </label>
  <input type="submit" class="submit submit1" name="storeIn" value="einlagern"/>
  <!--<button type="submit" class="submit submit1" name="einlagern">einlagern</button>-->
  <!--<button type="submit" class="submit submit2" name="auslagern">Auslagern</button>-->
  <input type="submit" class="submit submit2" name="storeOut" value="auslagern"/>
  </form>

showHTML;

[Der Martin]

Hallo,

danke schon mal für die schnelle Antwort, hier ist mal der Code für das Formular.

ich meinte eigentlich den HTML-Code, nicht den serverseitigen PHP-Code, der es erzeugt. Das macht es nur schwieriger zu lesen - zumal du den PHP-Code im Posting als JS markiert hast, so dass das Syntax-Highlighting völlig falsch ist (hab's korrigiert).

  <form method="POST" action="lager.php" onsubmit="return checkIsSet();">

Das ist die wesentliche Stelle, auch wenn immer noch einiges fehlt. Zum Beispiel das HTML-Element mit der ID "test", auf das sich dein Javascript aus dem Originalpost bezieht. Zum Beispiel die Javascript-Funktion checkIsSet(), die beim Absenden des Formulars aufgerufen werden soll.

Also, was passiert? Wie ich schon vermutet habe: Das Formular soll abgeschickt werden, dann wird erst die Funktion checkIsSet() aufgerufen.
Im Fehlerfall gibt die vermutlich false zurück, womit die Standard-Aktion (das Absenden des Formulars) unterdrückt wird. Ergo: Die Fehlermeldung bleibt sichtbar.
Im Erfolgsfall muss checkIsSet() aber true zurückgeben, also wird das Formular ganz normal abgesendet, und das PHP-Script lager.php sendet eine neue Seite an den Browser. Damit ist natürlich die bisher angezeigte Seite (und somit auch dein erzeugter Hinweistext) hinfällig und bleibt nur so lange sichtbar, bis die Antwort von lager.php eintrifft.

Die Lösung muss also sein, den Hinweistext (Erfolg/Fehler) nicht vor dem Formularversand zu erzeugen, sondern serverseitig beim Verarbeiten der Daten in das neue Dokument einzubauen. Eine serverseitige Überprüfung der Daten auf Gültigkeit hast du doch hoffentlich? Denn die Javascript-Prüfung lässt sich ja jederzeit leicht aushebeln und kann daher nur eine gutgemeinte Ergänzung sein.

So long,
 Martin

[tobmes]

Hi Martin, oh sorry für das falsche syntax-highliting. Ja, mit der Prüfung der Daten bin ich mir bewusst, habe ich aber noch nicht ganz implementiert. Hier jetzt nochmal die andren Codes:

Hier soll dann die Fehlermeldung eingeblendet werden:

<p id="test"></p>

Und so erzeuge ich die Nachrichten für Erfolg/Fehler

function checkIsSet() {
    //alert("test");
    var strFehler = '';
    if (document.forms[0].artikel.value == "1") {
        strFehler += "Feld Artikel ist leer\n";
        document.forms[0].artikel.style.backgroundColor = "#ff9980";
    }
    if (document.forms[0].menge.value == "") {
        //todo auf Zahlen überprüfen
        strFehler += "Feld Menge ist leer\n";
        document.forms[0].menge.style.backgroundColor = "#ff9980";
    }
    if (document.forms[0].lagerort.value == "1") {
        strFehler += "Bitte ein Lagerort wählen\n";
        document.forms[0].lagerort.style.backgroundColor = "#ff9980";
    }
    if (strFehler.length > 0) {
        //alert("Es sind folgende Fehler aufgetreten: \n"+strFehler);

        if (!fail()) {
            return false;
        }

    }
    if (ok()) {
        return true;
    }
    //return true;
}

function fail() {
    var fail = $("<p/>", {
        html: "Es ist ein Fehler aufgetreten",
        "class": "alert"
    });
    fail.appendTo("#test").fadeIn("slow").fadeOut(3000);
    return false;
}

function ok() {
$(document).ready(function(){
  var ok = $("<p/>", {
      html: "Daten erfolgreich gespeichert",
      "class": "allRight"
  });
  ok.appendTo("#test").fadeIn("slow");
  setTimeout(function(){ok.fadeOut("slow");},3000);
  
});

    return true;
}

Die Lösung muss also sein, den Hinweistext (Erfolg/Fehler) nicht vor dem Formularversand zu erzeugen, sondern serverseitig beim Verarbeiten der Daten in das neue Dokument einzubauen.

Bin mir jetzt grad nicht so sicher, wie ich das machen soll. Stehe gerade etwas auf dem Schlauch