Werte an Overlay mit extern geladener Seite übergeben

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Werte an Overlay mit extern geladener Seite übergeben

    Hallo zusammen,

    ich suche nach einer Möglichkeit, in meinem OnlineShop ein Overlay zu öffnen, das eine externe Seite lädt, zugleich aber eingegebene Variablenwerte vom Shop übergibt.

    Beispiel:
    Onlineshop hat 2 Eingabefelder für Wert 1 und 2

    Es wird im Overlay eine Seite zum Prüfen der Daten geladen, hier sollen nun die Werte z.B. addiert werden, sofern das Ergebnis nach Kundenwunsch korrekt ist, sollen mit einer Bestätigung zugleich aber die eingegebenen Werte 1 und 2 wieder zurück übertragen werden in den OnlineShop. Es muss also in beide Richtungen mit der Wertübergabe klappen.

    Ich habe bislang Beispiele gesehen, die per Javascript ein Overlay mit dem HTML-Code aufbauen, das ich aber nicht nutzen kann, da die externe Seite sehr komplex aufgebaut sein wird.

    Besteht die Möglichkeit also, Werte ans Overlay mit extern geladener Seite zu übergeben? Nach Bestätigung im Overlay die Daten auch wieder zurück auf die Hauptseite zu übergeben?

    Ansatz wäre der hier:
    jquerytools.org/demos/overlay/external.html

    Danke vielmals!!!

  • Danke für die Info, habe ich auch mal angeschaut, leider bin ich ein AJAX Noob. :(

    Habe auch nach kleinen Anwendungsbeispielen gesucht, bei dem Werte von Input-Boxen an ein Overlay per Ajax übergeben werden und wieder zurück.

    Mir würde ein kleines Beispiel genügen, wie man auf der Shopseite 2 Input-Boxen dekalieren muss und wie diese per Ajax übergeben werden, zuletzt dann per Ajax im Overlay (mit extern geladener HTML-Seite) ausgelesen werden.
    Hat mir dazu jemand ein kleines Beispiel? Den Rest kann ich sicherlich selbst umsetzen :-/

  • Moin!

    am einfachsten ist es wahrscheinlich, die Daten von außen nach innen mittels POST Variablen zu übergeben:

    Quellcode

    1. $.ajax({
    2. data: array(
    3. var1: $("#field1").val(),
    4. var2: $("#field2").val()
    5. )
    6. });


    von innen nach außen kannst du das ganze über window.parent ansteuern. Entweder als Variable über window.parent.var1 oder mittels jQuery:

    Quellcode

    1. $("window.parent").find("#field1").val("value here")


    Das ist das, was mir spontan dazu einfällt. Viel Erfolg! :)

    Grüße,
    Bodo06

  • danke für den Tipp Bodo, ich hoffe ich komme bald zu einem Ergebnis :)

    Mein Button schaut derzeit wie folgt im Shop aus:

    Quellcode

    1. <input type="submit" name="submit" value="Daten prüfen" onclick="$.ajax({
    2. url: 'auswertung.html',
    3. beforeSend: function () {
    4. overlayrequest();
    5. overlayposition();
    6. },
    7. success: function(data) {
    8. setTimeout(function(){
    9. overlayclose();
    10. $('body').append(data);
    11. overlayposition();
    12. },2500);
    13. },
    14. });return false;">
    Alles anzeigen



    wäre der Umbau dann so korrekt?

    Quellcode

    1. <input type="submit" name="submit" value="Daten prüfen" onclick="$.ajax({
    3. data: array(
    4. var1: $("#field1").val(),
    5. var2: $("#field2").val()
    6. ),
    8. url: 'auswertung.html',
    9. beforeSend: function () {
    10. overlayrequest();
    11. overlayposition();
    12. },
    13. success: function(data) {
    14. setTimeout(function(){
    15. overlayclose();
    16. $('body').append(data);
    17. overlayposition();
    18. },2500);
    19. },
    20. });return false;">
    Alles anzeigen

  • ja ne ist klar :D

    ich bin kein ajaxer, darum frage ich ja ... dennoch weis ich jetzt nicht obs passt oder nicht ^^

    habe eben von jquery ein Beispiel gefunden, mit Overlay von externen Seiten, dieser Button ist ein Code-Schnipsel, den man WENN möglich ja dann aufbohren könnte, für die Variablen-Übergabe :)

    wenn das so passt, super ...


    das Beispiel findet man hier, evtl. hat ja jemand Lust, dieses Beispiel mal aufzubohren mit einem Eingabefeld, gerne auch gegen paar euros :P
    jquerytools.org/demos/overlay/external.htm

  • Moin!

    ich glaub ich hab inzwischen gerafft, was dein Begehr ist. :)

    Hier mal ein paar Gedanken dazu:

    1. Ajax ist nichts anderes als ein 0815 HTTP-Request, nur dass du diesen durch JavaScript auslösen und komplett verwalten kannst. Schaue dir dazu am besten mal einige Artikel dazu an. ;)
    2. Ajax wird zumeist in 2 Situationen genutzt:
    a) Wenn du Code nachladen willst (Zum Beispiel spezifischen HTML Code bei hochdynamischen Websites), oder
    b) wenn du eingegebene Werte von einem PHP-Script prüfen lassen willst und anhand des Resultats den User über Fehler informieren oder zu einer Success Seite leiten willst (oder einer ähnlichen serverseitigen Scriptsprache)
    3. Wenn du lediglich Werte prüfen willst und/oder DB Operationen durchführen willst, macht es wenig Sinn, den Code des Overlay Contents in die zweite Datei zu legen.
    4. In diesem Fall macht es Sinn, die Werte als JSON zurückzugeben. Dies kann von jQuery direkt geparst werden und direkt genutzt werden. Das erspart dir einiges an Käse, den du selber schreiben müsstest um mit dem Result der PHP-Seite umzugehen.

    Wenn du das berücksichtigst, kommt in meinen Augen folgende Konstellation zustande:
    Datei1: (overlay.htm)
    - enthält den kompletten HTML Code einschließlich des contents vom Overlay
    - sendet beim Click auf den "Prüfen" Button ein Ajax-Request an eine PHP-Datei (zweite Datei), die die Werte prüft und anhand des Results den Dialog aufpoppen lässt.

    Ich habe dir in den Anhang zwei .zip Archive gepackt: Das erste enthält deinen Code, so modifiziert dass er das macht, was du ursprünglich vor hattest. Das zweite enthält den Code, so wie es meines Erachtens mehr Sinn macht.

    Viel Spaß damit!

    Grüße,
    Bodo06
    Dateien

    • test_improved.zip

      (1,41 kB, 340 mal heruntergeladen, zuletzt: )

    • test_modified.zip

      (1,38 kB, 354 mal heruntergeladen, zuletzt: )