Ergebnis 1 bis 9 von 9

Thema: Ajax: 2 Div's befüllen

  1. #1
    Azubi(ne)
    Registriert seit
    22.01.2007
    Beiträge
    74
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Ajax: 2 Div's befüllen

    Hallo,

    ich habe auf meiner Seite ein div-Bereich, der mit den Inhalten von den Hauptmenüpunkten befüllt wird. Nun kann es vorkommen, dass die geladene Seite weitere Menüpunkte enthält. Außerdem hat die geladene Seite einen weiteren div-Bereich, der eben die Inhalte dieser Untermenüpunkte aufnimmt(div im div). Das Befüllen der Div's führe ich mittels Ajax durch. Immer wenn ein Menüpunkt angeklickt wird (egal ob Haupt- oder Untermenü) wird die URL verändert. Nun werte ich in einem weiteren Javascriptteil die URL aus, um so z.B. Hyperlinks auf meine Seite zu ermöglichen. Wenn nun die URL auch das Untermenü enthält, möchte ich, dass erst in das div die Seite mit dem Hauptmenüpunkt geladen wird (wo auch das div für das Untermenü ist) und anschließend soll in das div für das Untermenü die entsprechende Seite geladen werden. Folgendes hab ich dazu gemacht:
    Code:
    if (window.location.hash == "#results_fce05"){
    		getSite("results/results.html", "main_fg");
    		getSite("results/fanmeisterschaft_fce.html", "resultsContent");
    	}
    , d.h. also results.html enthält den div-Container resultsContent. Das ganze funktioniert nur nicht, als Fehlermeldung bekomme ich, dass die Variable, der ich resultsContent zuweise, keine Eigenschaften hat. Übrigens die Aufrufesyntax der Funktionen sind korrekt, der zweite Aufruf funktioniert nämlich in results.html und lädt die entsprechende Seite in das div. Hat jemand eine Idee wo der Fehler liegen könnte? Wenn ich das alles zu kompliziert bschrieben habe, dann bitte noch mal nachfragen. Ich hoffe auf eure Hilfe

    edit: Sry, habe es ausversehen ins falsche Forum gepostet, wäre nett, wenn ein Moderator diesen Beitrag ins "PHP - CGI - Perl - JavaScript und Co."-Forum verschieben könnte.

    gruß chuqa
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Azubi(ne)
    Themenstarter

    Registriert seit
    22.01.2007
    Beiträge
    74
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hat wirklich keiner eine Idee?

  3. #3
    Forum Guru
    Registriert seit
    28.12.2004
    Ort
    Ringgenberg(bei Interlaken) / Schweiz
    Beiträge
    4.787
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    tut uns leit, unsere gemeinschaffts code Glaskugel ist gerade mal wieder in Reparatur...

    also wirst du wohl mehr als 2 zeilen posten müssen.

  4. #4
    Azubi(ne)
    Themenstarter

    Registriert seit
    22.01.2007
    Beiträge
    74
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard


    Naja kommt ja nur der normale Ajax-Code
    Code:
    function getSite(url, target){
    	myContainer = target;
    	if (window.XMLHttpRequest) { // Mozilla, Safari,...
    		http_request = new XMLHttpRequest();
    		if (http_request.overrideMimeType) {
       			http_request.overrideMimeType('text/xml');
    		}
    	} else if (window.ActiveXObject) { // IE
    		try {
       			http_request = new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e) {
       			try {
       				http_request = new ActiveXObject("Microsoft.XMLHTTP");
       			} catch (e) {}
    		}
    	}
    	if (!http_request) {
    		alert('Ende :( Kann keine XMLHTTP-Instanz erzeugen');
    		return false;
    	}
    	http_request.onreadystatechange = alertInhalt;
    	http_request.open('GET', url, true);
        http_request.send(null);
    }
    
    function alertInhalt() {
    	if ((http_request.readyState == 4) && (myContainer != "" )) {
    		document.getElementById(myContainer).innerHTML = http_request.responseText;
          }
    }
    myContainer ist eine globale Variable, die eigentlich nur das Ziel-Div enthalten soll.

    gruß chuqa

  5. #5
    Forum Guru
    Registriert seit
    28.12.2004
    Ort
    Ringgenberg(bei Interlaken) / Schweiz
    Beiträge
    4.787
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    das kann nicht funktionieren :-pp

    du musst schon dein target komplett durchschleiffen.

    da du es ja beim 3ten aufruf gleich wieder überschreibst.
    den der get aufruf dauert ne ganze weile!

    Code:
    /**
     * instantiates a new xmlhttprequest object
     *
     * @return xmlhttprequest object or false
     */
    function getXMLRequester( )
    {
        var xmlHttp = false;
                
        // try to create a new instance of the xmlhttprequest object        
        try
        {
            // Internet Explorer
            if( window.ActiveXObject )
            {
                for( var i = 5; i; i-- )
                {
                    try
                    {
                        // loading of a newer version of msxml dll (msxml3 - msxml5) failed
                        // use fallback solution
                        // old style msxml version independent, deprecated
                        if( i == 2 )
                        {
                            xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );    
                        }
                        // try to use the latest msxml dll
                        else
                        {
                            
                            xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
                        }
                        break;
                    }
                    catch( excNotLoadable )
                    {                        
                        xmlHttp = false;
                    }
                }
            }
            // Mozilla, Opera und Safari
            else if( window.XMLHttpRequest )
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
        // loading of xmlhttp object failed
        catch( excNotLoadable )
        {
            xmlHttp = false;
        }
        return xmlHttp ;
    }
    
    
    /**
     * sends a http request to server
     * @param strSource, String, datasource on server, e.g. data.php
     * @param strData, String, data to send to server, optionally
     * @param intType, Integer,request type, possible values: REQUEST_GET, REQUEST_POST, REQUEST_XML, REQUEST_HEAD default REQUEST_GET
     * @param strData, Integer, ID of this request, will be given to registered event handler onreadystatechange', optionally
     * @return String, request data or data source
     */
    function sendRequest( strSource, strData, intType, intID )
    {
        if( !strData )
            strData = '';
    
        // default type (0 = GET, 1 = xml, 2 = POST )
        if( isNaN( intType ) )
            intType = 0; // GET
    
        // previous request not finished yet, abort it before sending a new request
        if( xmlHttp && xmlHttp.readyState )
        {
            xmlHttp.abort( );
            xmlHttp = false;
        }
            
        // create a new instance of xmlhttprequest object
        // if it fails, return
        if( !xmlHttp )
        {
            xmlHttp = getXMLRequester( );
            if( !xmlHttp )
                return;
        }
        
        // parse query string
        if( intType != 1 && ( strData && strData.substr( 0, 1 ) == '&' || strData.substr( 0, 1 ) == '?' ) )
            strData = strData.substring( 1, strData.length );
    
        // data to send using POST
        var dataReturn = strData ? strData : strSource;
        
        switch( intType )
        {
            case 1:    // xml
                strData = "xml=" + strData;
            case 2: // POST
                // open the connection 
                xmlHttp.open( "POST", strSource, true );
                xmlHttp.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
                xmlHttp.setRequestHeader( 'Content-length', strData.length );
                break;
            case 3: // HEAD
                // open the connection 
                xmlHttp.open( "HEAD", strSource, true );
                strData = null;
                break;
            default: // GET
                // open the connection 
                var strDataFile = strSource + (strData ? '?' + strData : '' );
                xmlHttp.open( "GET", strDataFile, true );
                strData = null;
        }
        
        // set onload data event-handler
        xmlHttp.onreadystatechange = new Function( "", "processResponse(" + intID + ")" ); ;
    
        // send request to server
        xmlHttp.send( strData );    // param = POST data
        
        return dataReturn;
    }
        
    
    function processResponse( intID )
    {
        // status 0 UNINITIALIZED open() has not been called yet.
        // status 1 LOADING send() has not been called yet.
        // status 2 LOADED send() has been called, headers and status are available.
        // status 3 INTERACTIVE Downloading, responseText holds the partial data.
        // status 4 COMPLETED Finished with all operations.
        switch( xmlHttp.readyState )
        {
            // uninitialized
            case 0:
            // loading
            case 1:
            // loaded
            case 2:
            // interactive
            case 3:
                break;
            // complete
            case 4:    
                // check http status
                if( xmlHttp.status == 200 )    // success
                {
                    processData( xmlHttp, intID );
                }
                // loading not successfull, e.g. page not available
                else
                {
                    if( window.handleAJAXError )
                        handleAJAXError( xmlHttp, intID );
                    else
                        alert( "ERROR\n HTTP status = " + xmlHttp.status + "\n" + xmlHttp.statusText ) ;
                }
        }
    }

  6. #6
    Azubi(ne)
    Themenstarter

    Registriert seit
    22.01.2007
    Beiträge
    74
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Tja, wäre nett wenn du mir mal sagen könntest, was ich bei meinem Code ändern müsste, damit das funktioniert. Ich habe noch den Status von dem XmlHttpRequest-Objekt eingebaut:
    Code:
    function alertInhalt() {
    	if ((http_request.readyState == 4) && (myContainer != "" )) {
    			if (http_request.status == 200){
    				document.getElementById(myContainer).innerHTML = http_request.responseText;
    			}
          }
    }
    Bin recht grün in Ajax-Sachen, wäre deswegen nett, wenn ich ein wenig Hilfe bekommen könnte.

    gruß chuqa

  7. #7
    Forum Guru
    Registriert seit
    28.12.2004
    Ort
    Ringgenberg(bei Interlaken) / Schweiz
    Beiträge
    4.787
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    also man nehme die grund klasse von oben und erweitere sie um die von dir gewünschten Funktionen:

    Code:
       if (window.location.hash == "#results_fce05")
       {
          getSite("results/results.html", "main_fg");
          getSite("results/fanmeisterschaft_fce.html", "resultsContent");
       }
       
    
    var targets = array();
    
    function getSite(site, target)
    {
     var id = targets.length
     targets[id] = target;
    
     sendRequest(site, '', 0 ,id);
    }
       
    function processData(xmlHttp, intID)
    {
     document.getElementById(targets[intID]).innerHTML = xmlHttp.responseText;
    }

  8. #8
    Forum Guru
    Registriert seit
    28.12.2004
    Ort
    Ringgenberg(bei Interlaken) / Schweiz
    Beiträge
    4.787
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    nun aber trotzdem noch Vorsicht...

    den einige browser haben immer noch probs mit der gleichzeitigen abarbeitung von 2 request...

    also kann es sein, das du die staffeln musst.

  9. #9
    Azubi(ne)
    Themenstarter

    Registriert seit
    22.01.2007
    Beiträge
    74
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Herzlichen Dank für deine Mühen,
    es ging danach leider immer noch nicht wirklich. Es wurde gar nix in den div-Bereich geladen, auch nicht mehr die erste Seite. Das passierte allerdings nur bei einem doppelten Aufruf von getSite(). Ein einzelner Aufruf funktionierte nach wie vor. Ich habe nun den zweiten Aufruf ein bisschen verzögert ausgeführt und es wird ordentlich abgearbeitet
    Code:
    if (window.location.hash == "#results_fce06"){
        getSite("results/results.html", "main_fg");
        window.setTimeout('getSite("results/fceCup06.html", "resultsContent")',20);
    }
    Jetzt muss ich nur noch über Stylesheets dafür sorgen, dass der User nur das Endergebnis präsentiert bekommt und nicht schon die ganzen Zwischenschritte
    Danke nochmals

    gruß chuqa

Ähnliche Themen

  1. Frage zu div's / iFrame
    Von infernalshade im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 26.03.2008, 09:47
  2. Vorbelegung eines Auswahlfeldes aus der ZopeODB befüllen
    Von Moerz im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 17.01.2008, 07:44
  3. Einführung Div's
    Von Sojo im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.04.2007, 21:12
  4. Design mit DIV's
    Von Suxxezz im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 13.04.2007, 22:32
  5. div's nebeneinander
    Von im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 11.06.2004, 19:25

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •