AGB  ·  Datenschutz  ·  Impressum  







Anmelden
Nützliche Links
Registrieren
Zurück Delphi-PRAXiS Programmierung allgemein Programmieren allgemein [AJAX] Kompletten Div aus neuer Seite austauschen?
Thema durchsuchen
Ansicht
Themen-Optionen

[AJAX] Kompletten Div aus neuer Seite austauschen?

Ein Thema von Phoenix · begonnen am 20. Jul 2006 · letzter Beitrag vom 23. Jul 2006
Antwort Antwort
Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.641 Beiträge
 
#1

[AJAX] Kompletten Div aus neuer Seite austauschen?

  Alt 20. Jul 2006, 11:33
Hi,

folgendes:
Ich habe ein Formular. Auf Klick auf einen Button soll eine komplett neue Seite vom Server geladen werden (Querystring baut sich aus den Formulareingaben auf...), aus dieser neu geladenen Seite soll jedoch nur ein <DIV> - Block (inkl. seines Inhaltes) gegen ein anderes DIV-Element Element auf der bisherigen Seite ausgetauscht werden.

Kurz: Suchfeld: Bei Klicken auf Suchen soll das Ergebnis anstelle des Formulars angezeigt werden.

Kann mir da jemand nen Tipp geben wie der (unsichtbare) Aufruf der neuen Seite auszusehen hat und wie man dann auf diesem neuen Dokument an die Elemente kommt? Ich denke den Rest bekomme ich dann schon selber hin.
Sebastian Gingter
Phoenix - 不死鳥, Microsoft MVP, Rettungshundeführer
Über mich: Sebastian Gingter @ Thinktecture Mein Blog: https://gingter.org
  Mit Zitat antworten Zitat
Dunedain
(Gast)

n/a Beiträge
 
#2

Re: [AJAX] Kompletten Div aus neuer Seite austauschen?

  Alt 20. Jul 2006, 22:29
Hab mich vor kurzem selbst mit AJAX beschäftigt, dabei ist folgende Testdatei entstanden (Anhang).

Wenn du aber NUR eine Seite anhand von Suchkriteren zum Benutzer bringen willst, dann kannst
du auch auf AJAX verzichten (und dadurch auch ältere Browser ansteuern)...

Dazu könntest du unter dein Formular einen IFrame Contaier setzten, welcher standardmäßig ausgeblendet ist.
Nach Auswahl der Such Kriterien änderst du die Adresse des IFrames und zeigst 'ihn' dann an.
Angehängte Dateien
Dateityp: zip ajax_315.zip (2,6 KB, 18x aufgerufen)
  Mit Zitat antworten Zitat
Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.641 Beiträge
 
#3

Re: [AJAX] Kompletten Div aus neuer Seite austauschen?

  Alt 20. Jul 2006, 23:06
Zitat von Dunedain:
Wenn du aber NUR eine Seite anhand von Suchkriteren zum Benutzer bringen willst, dann kannst
du auch auf AJAX verzichten (und dadurch auch ältere Browser ansteuern)...
Nope. Ich hab da schon ganz konkrete Vorgaben die ich umsetzen darf/muss

Aber danke, ich schau mir das morgen Früh mal an.
Sebastian Gingter
Phoenix - 不死鳥, Microsoft MVP, Rettungshundeführer
Über mich: Sebastian Gingter @ Thinktecture Mein Blog: https://gingter.org
  Mit Zitat antworten Zitat
Benutzerbild von alcaeus
alcaeus

Registriert seit: 11. Aug 2003
Ort: München
6.537 Beiträge
 
#4

Re: [AJAX] Kompletten Div aus neuer Seite austauschen?

  Alt 21. Jul 2006, 07:53
Zitat von Dunedain:
Wenn du aber NUR eine Seite anhand von Suchkriteren zum Benutzer bringen willst, dann kannst
du auch auf AJAX verzichten (und dadurch auch ältere Browser ansteuern)...
*hust* Warum auf Technologien verzichten wenns auch anders geht?

Wichtig bei AJAX ist, dass ein Fallback-Mode dahintersteckt. Du musst es nicht total weglassen, nur weil aeltere Browser oder Browser ohne natives XMLHttpRequest-Objekt das Zeug nicht immer moegen. Hier mal ein Beispiel:
Anstatt der Zeile in deinem Code:
Code:
<input id="form" type="button" onclick="SendRequest('http://localhost/ajax/test.txt');" value="Click Me" />
schreiben wir das:
Code:
[url="index.html?foo=bar"]Click Me[/url]
Nun muss SendRequest nur noch zurueckgeben, ob beim Erstellen und Senden des Requests alles ok ging. Wenn true zurueckkommt, gibt onclick false zurueck, und der Browser folgt dem Link nicht. Ist JS deaktiviert oder ging irgendwas nicht, folgt der Browser dem Link und du kannst ueber server-seitige Skripte das erledigen, was sonst ueber AJAX passiert waere

Greetz
alcaeus
Andreas B.
Die Mutter der Dummen ist immer schwanger.
Ein Portal für Informatik-Studenten: www.infler.de
  Mit Zitat antworten Zitat
Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.641 Beiträge
 
#5

Re: [AJAX] Kompletten Div aus neuer Seite austauschen?

  Alt 21. Jul 2006, 08:13
Zitat von alcaeus:
Wichtig bei AJAX ist, dass ein Fallback-Mode dahintersteckt. Du musst es nicht total weglassen, nur weil aeltere Browser oder Browser ohne natives XMLHttpRequest-Objekt das Zeug nicht immer moegen.
Brauche ich in dem speziellen Fall hier Glücklicherweise auch nicht. Das gibt eine Anwendung für einen geschlossenen Kreis an Benutzern, und die haben auf ihren Rechnern per Policy alle den gleichen IE mit aktiviertem JS drauf.

Aber für offen zugängliche Anwendungen ist das sicher richtig und wichtig, ich behalts im Hinterkopf
Sebastian Gingter
Phoenix - 不死鳥, Microsoft MVP, Rettungshundeführer
Über mich: Sebastian Gingter @ Thinktecture Mein Blog: https://gingter.org
  Mit Zitat antworten Zitat
Benutzerbild von alcaeus
alcaeus

Registriert seit: 11. Aug 2003
Ort: München
6.537 Beiträge
 
#6

Re: [AJAX] Kompletten Div aus neuer Seite austauschen?

  Alt 21. Jul 2006, 08:20
Zitat von Phoenix:
Brauche ich in dem speziellen Fall hier Glücklicherweise auch nicht. Das gibt eine Anwendung für einen geschlossenen Kreis an Benutzern, und die haben auf ihren Rechnern per Policy alle den gleichen IE mit aktiviertem JS drauf.
Ok, beachte dass du im IE < 7 auch aktiviertes ActiveX benoetigst (das native Objekt gibts erst im IE 7). Aber ich gehe davon aus dass du auch das bedacht hast

Greetz
alcaeus
Andreas B.
Die Mutter der Dummen ist immer schwanger.
Ein Portal für Informatik-Studenten: www.infler.de
  Mit Zitat antworten Zitat
Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.641 Beiträge
 
#7

Re: [AJAX] Kompletten Div aus neuer Seite austauschen?

  Alt 21. Jul 2006, 11:41
Weiter im text:

Ich habe nun folgenden, objektorienten Code.

Aufgerufen wird die ganze Aktion mit ' SwitchToResultView() ', damit wird ein Div erzeugt, der Back-Link eingefügt und der AJAX-Call gestartet. Ich bekomme sogar schon den Response-Text zurück.

Mein grosses Problem: Obwohl ich auf dem Object this.theResultPane erzeuge und sogar an den asynchronen Aufruf explizit mit übergebe, ist dieses Objekt im asynchronen Handler nicht definiert. Wo hab ich denn da nen Denkfehler?

Aso: Das Page-Wechseln klappt schon, also auch das zurückwechseln von der Result- zur Search-Ansicht. Nur das Schreiben vom Ergebnis ins richtige Div ist also das aktuelle Problem. Bin da wohl irgendwie out-of-Scope, aber ich kann mir das nicht erklären wo ich doch den Bereich explizit übergebe.

Code:
function searchobj()
{
    this.searchbutton = null;
    this.isAdvanced = false;
    this.theAdvIframe = null;
    this.theSearchPane = null;
    this.theResultPane = null;
    this.isResultView = false;
    var p_ajaxObject = null;
   
    function getAjaxObj()
    {
       // Mozilla, Opera, Safari, IE7 and others
       if (typeof(XMLHttpRequest) != 'undefined')
       {
          p_ajaxObject = new XMLHttpRequest();
       }
       else if (!p_ajaxObject && typeof(ActiveXObject) != 'undefined')
       {
          // IE6 and lower
          try
          {
             p_ajaxObject = new ActiveXObject("MsoXMLml2.XMLHTTP");
          }
          catch(e)
          {
             try
             {
                p_ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
             }
             catch(e)
             {
                p_ajaxObject = null;
             }
          }
       }
       else
       {
           p_ajaxObject = null;
       }
   }
   
    function doAsyncResultQuery( searchstring )
    {
        if (!p_ajaxObject)
        {
            getAjaxObj();
        }
       
        if (p_ajaxObject)
        {
            var url = 'SearchPage.aspx?' + searchstring;
            p_ajaxObject.open("GET", url, true);
            p_ajaxObject.onreadystatechange = function() { onResultReceived(p_ajaxObject, this.theResultPane); };
            p_ajaxObject.send(null);
        }
        else
        {
            Alert("AJAX Call failed due to missing HTTP Request Object.\nPlease activate ActiveX.");
        }
    }
   
    function onResultReceived(ajaxobj, resultpane)
    {
        if (ajaxobj.readyState == 4 && ajaxobj.status >= 200 && ajaxobj.status <= 299 && ajaxobj.responseText)
        {
            alert (resultpane); // <-- undefined ???

            if (!resultpane) { alert("nochn scope problem"); }
            resultpane.getLastChild().innerHTML = ajaxobj.responseText;
            /*
            var div = document.getElementById('ResultView');
            if (div != null)
            {
                div.innerHTML = ajaxobj.responseText;
            }
            else
            {
                alert("Div nicht gefunden...");
            }
            */
        }
        ajaxobj = null;
    }

    this.SwitchToResultView = function( changeBackHandler )
    {
        // erst Suchstring holen und dann erst Suchfeld entfernen, sonst
        // sind die Eingaben nicht mehr auf dem Dokument verfügbar...

        // Baue Suchstring
        var searchstring = this.BuildSearchString();
               
        if (this.isAdvanced)
        {
            try
            {
                searchstring += this.BuildAdvSearchString();
            }
            catch (e)
            {
                // Date validation failed
                searchstring ="";
                alert(e);
            }
        }
       
        // entferne Suchfeld
        this.theSearchPane = document.getElementById('searchbox').firstChild;
        document.getElementById('searchbox').removeChild(this.theSearchPane);
       
        // erzeuge Resultpane
        this.theResultPane = document.createElement("div");      
        document.getElementById('searchbox').appendChild(this.theResultPane);
       
        // erzeuge 'Back to search' - Link
        var backlink = document.createElement("a");
        backlink.setAttribute("href", "#");
        backlink.appendChild(document.createTextNode("<< Back to Search"));
        addEvents(backlink, 'click', changeBackHandler, false);
        var backbutton = document.createElement("p");
        backbutton.appendChild(backlink);
        this.theResultPane.appendChild(backbutton);
       
        // erzuge ResultView
        var resultview = document.createElement("div");
        resultview.setAttribute("ID", "ResultView");
        this.theResultPane.appendChild(resultview);

        // Call zur Suchanfrage absetzen:
        if (searchstring != "")
        {
            doAsyncResultQuery(searchstring);
        }       

        this.isResultView = true;
    }

    this.SwitchToSearchView = function()
    {
        if (this.isResultView)
        {
            document.getElementById('searchbox').removeChild(this.theResultPane);
            document.getElementById('searchbox').appendChild(this.theSearchPane);
            this.theSearchPane = null;
            this.theResultPane = null;
            this.isResultView = false;
        }   
    }
}
Sebastian Gingter
Phoenix - 不死鳥, Microsoft MVP, Rettungshundeführer
Über mich: Sebastian Gingter @ Thinktecture Mein Blog: https://gingter.org
  Mit Zitat antworten Zitat
Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.641 Beiträge
 
#8

Re: [AJAX] Kompletten Div aus neuer Seite austauschen?

  Alt 21. Jul 2006, 11:51
Arg.. ich glaub ich habs selber rausgefunden

Zitat von Wikipedia:
Aufgrund eines Fehlers in der ECMAScript-Spezifikation ist das Ansprechen von öffentlichen Eigenschaften und Methoden in privaten Methoden schwierig, weil this nicht wie in öffentlichen Methoden auf das aktuelle Objekt verweist. Daher bedient man sich eines Tricks, indem man im Konstruktor this in einer privaten Eigenschaft speichert, gängigerweise self. Darüber gelingt der Zugriff auf öffentliche Eigenschaften und Methoden in privaten Methoden.
Sebastian Gingter
Phoenix - 不死鳥, Microsoft MVP, Rettungshundeführer
Über mich: Sebastian Gingter @ Thinktecture Mein Blog: https://gingter.org
  Mit Zitat antworten Zitat
Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.641 Beiträge
 
#9

Re: [AJAX] Kompletten Div aus neuer Seite austauschen?

  Alt 23. Jul 2006, 15:22
Es ist immer noch nicht vollbracht

Ich habe inzwischen umgesattelt, das mit dem xmlhttp-Objekt klappt wohl offensichtlich gar nicht.
Ich lade die Ergebnis-Seite nun ein einem IFrame nach. Sobald der iFrame das Suchergebnis komplett geladen hat, führt er folgendes aus:

Code:
    this.OnDocumentLoaded = function()
    {
        // event handler for completed load in dynamic iframe

        if (this.loadMode == "search")
        {
            // get handle on result div
            var loadframe = document.getElementById("loadframe");
            var doc = loadframe.contentWindow.document;      
            this.theResultView.innerHTML = doc.body.innerHTML;                      
            this.isResultView = true;
        }

        this.loading = false;
    }
this.theResultView ist übrigens ein Div der vorher erzeugt wurde.

Interessanterweise habe ich danach auf der Seite in dem div in dem das Ergebnis angezeigt werden soll den HTML-Quelltext der Ergebnisseite, aber das ist nicht das, was ich will. (

Leute, ich brauch echt ein wenig Hilfe. So hat das doch keinen Taug.
Sebastian Gingter
Phoenix - 不死鳥, Microsoft MVP, Rettungshundeführer
Über mich: Sebastian Gingter @ Thinktecture Mein Blog: https://gingter.org
  Mit Zitat antworten Zitat
Antwort Antwort


Forumregeln

Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Gehe zu:

Impressum · AGB · Datenschutz · Nach oben
Alle Zeitangaben in WEZ +1. Es ist jetzt 02:28 Uhr.
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz