[AJAX] Kompletten Div aus neuer Seite austauschen?

[Phoenix]

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.

[Dunedain]

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.

[Phoenix]

Zitat:

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.

[alcaeus]

Zitat:

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

[Phoenix]

Zitat:

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 :)

[alcaeus]

Zitat:

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

[Phoenix]

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;
        }    
    }
}

[Phoenix]

Arg.. ich glaub ich habs selber rausgefunden :wall:

Zitat:

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.

[Phoenix]

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.