Einzelnen Beitrag anzeigen

Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.639 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