JavaScript Verschiedene Inhalte mit Ajax laden

digiTALE · 2. Januar 2009

Hey und gesundes Neues euch allen!

Zurzeit setze ich mit Ajax auseinander und komm damit soweit ganz gut zurecht dank Google und Co. .Aber ein Problem konnte ich noch nicht ganz besitigen, welches mich ein paar Tage beschäftigt.

Bisher habe ich nur Beispiele gefunden wo man den Inhalt nur in einem Container laden kann bzw. keine Option gefunden wie man eine Übergabe organisiert welches mir erlaubt selber zu sagen in welchem Container der Inhalt geladen werden soll.

Zwar hab ich selber probiert Übergaben in der Funktion "loadBox" in "http_request.onreadystatechange = handleContent(x);" zu übergeben aber das wollte nicht so recht klappen.

Wo muss ich die Übergabe organisieren, damit ich selber bestimmen kann welche Box ich anwählen will, wo der Inhalt geladen werden soll?

Mfg digiTALE

Javascript/Ajax Script:

HTML:

var http_request = false;

if (window.XMLHttpRequest)
{
	http_request = new XMLHttpRequest();

	if (http_request.overrideMimeType)
	{
		http_request.overrideMimeType('text/xml');
	}

}
else if (window.ActiveXObject)
{
	try
	{
		http_request = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e)
	{
		try
		{
			http_request = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e)
		{
		}
	}
}

function loadContent(url)
{
	http_request.onreadystatechange = handleContent();
	http_request.open("GET", url, true);
	http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	http_request.send(null);

}

function handleContent()
{
	if (http_request.readyState == 1)
	{
		document.getElementById("imgBox1").style.display = "inline";
	}
	if (http_request.readyState == 4)
	{
		document.getElementById("box1").innerHTML = http_request.responseText
		document.getElementById("imgBox1").style.display = "none";
	}
}

Html Code:

HTML:

<div class="container">

	<a href="javascript:;" onclick="content.php?link1">TestLink1</a> <img id="imgBox1" src="/www/image/loading.gif" style="display:none;" alt="" />
	<div id="box1"></div>

</div>

<div class="container">

	<a href="javascript:;" onclick="content.php?link2">TestLink2</a> <img id="imgBox2" src="/www/image/loading.gif" style="display:none;" alt="" />
	<div id="box2"></div>

</div>

thetroll · 2. Januar 2009

Hallo
irgendwo oben in deinem Javascript-Datein kannst Du sowas reinschreiben:

window.onload=getPage;

function getPage(){
var seite = location.search();// liefert das was dem url angehängt wird

}

und dann unten in der Function handleContent könntest du das so auswerten:

if(http_request.readyState == 4){

switch(seite){
case "?link1": var token = "box1"; break;
case "?link2": var token = "box2"; break;
usw.

}

var a = document.getElementById(token);

a.innerHTML = http_request.responseText;

usw.

}

Hab's nicht ausprobiert, aber so könntest es functionieren.

digiTALE · 2. Januar 2009

Müsste ich mal ausprobieren, würde aber schwierig werden wenn die ID's der Boxen dynamisch generiert werden. Ich hab gedacht das es einfacher geht und hab diese Variante ausprobiert aber ohne Erfolg. Könnte sein das es dennoch ein guter Ansatz ist aber nur noch ein kleiner Fehler vorhanden ist:

Mfg

Javascript/Ajax:

HTML:

function handleContent(id)
{
	if (http_request.readyState == 1)
	{
		document.getElementById("imgBox" + id).style.display = "inline";
	}
	if (http_request.readyState == 4)
	{
		document.getElementById("box" + id).innerHTML = http_request.responseText
		document.getElementById("imgBox" + id).style.display = "none";
	}
}

Html:

HTML:

<div class="container">

	<a href="javascript:;" onclick="javascript:loadContent('content.php?link1');handleContent(1); return false;">TestLink1</a> <img
id="imgBox1" src="/www/image/loading.gif" style="display:none;" alt="" />
	<div id="box1"></div>

</div>

<div class="container">

	<a href="javascript:;" onclick="javascript:loadContent('content.php?link2'); handleContent(2); return false;">TestLink2</a> <img
id="imgBox2" src="/www/image/loading.gif" style="display:none;" alt="" />
	<div id="box2"></div>

</div>

thetroll · 2. Januar 2009

hi wieder,

es kann sein, daß es ein einfaches CSS-Prolem sei. Hast du width und height von box1 und box2 mit css festgelegt?

digiTALE · 2. Januar 2009

Nein, die Boxen sind mit keinem CSS Stil versehen. Das komische ist aber das er mir das Ladebild anzeigt, sobald man draufklickt aber nur der Inhalt wird dazu nicht geladen.

Die Firefoxfehlerkonsole zeigt mir, das die "id" nicht übergebene wird, also null ist!

thetroll · 2. Januar 2009

Frage.
hast du eine content.php datei angelegt?

und onclick bekommt normalerweise eine Funktion zugewiesen.

onclick="loadContent('content.php?link1')"

digiTALE · 2. Januar 2009

Hey, also die besagte "content.php" existiert. Bei dem "onclick" ist mir beim posten ein kleiner Fehler unterlaufen. Habe es aber im 2ten Post von mir richtig geschrieben

Aktueller Stand:

Javascript/Ajax:

HTML:

function loadContent(url)
{
	http_request.onreadystatechange = handleContent;
	http_request.open("GET", url, true);
	http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	http_request.send(null);

}

function handleContent(id)
{
	if (http_request.readyState == 1)
	{
		document.getElementById("imgBox" + id).style.display = "inline";
	}
	if (http_request.readyState == 4)
	{
		document.getElementById("box" + id).innerHTML = http_request.responseText
		document.getElementById("imgBox" + id).style.display = "none";
	}
}

Html index.php:

HTML:

<div class="container">

	<a href="javascript:;" onclick="loadContent('content.php?link1');
handleContent(1); return false;">TestLink1</a> <img id="imgBox1"
src="/www/image/loading.gif" style="display:none;" alt="" />
	<div id="box1"></div>

</div>

<div class="container">

	<a href="javascript:;" onclick="loadContent('content.php?link2');
handleContent(2); return false;">TestLink2</a> <img id="imgBox2"
src="/www/image/loading.gif" style="display:none;" alt="" />
	<div id="box2"></div>

</div>

content.php:

PHP:

<?php

	if ( isset( $_GET["link1"] ) )
	{
		echo "Inhalt zu Link 1";
	}

	if ( isset( $_GET["link2"] ) )
	{
		echo "Inhalt zu Link 2";
	}

?>

thetroll · 2. Januar 2009

Hi,
probier mal diese kleine Modifikation aus :

<a href="#" onclick="loadContent('content.php?link1=gesetzt');">

anstelle von:

<a href="javascript:;" onclick="loadContent('content.php?link1');
handleContent(1); return false;">

digiTALE · 2. Januar 2009

Das liegt glaub ich nicht an der GET-Übergabe, weil wenn ich in der Ajax Funktion "handleContent" eine von beiden ID's fest reinschreibe dann funktioniert das auch, nur hat er ein Problem wenn ich aber verschiedene ID's übermitteln will. Das klappt nicht so recht.

Aber der muss ja irgendwie die ID übermittelt haben, sonst würde nicht mein eingebautes Ladebild erscheinen.

Kantholy · 8. Januar 2009

warum eigentlich asynchron? warum benutzt du hierfür nicht einfach nen synchronen request und schon hast das problem nicht...

Code:

function loadContent(url, id)
{
	http_request.onreadystatechange = handleContent;
	http_request.open("GET", url, false);
	http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
	http_request.send(null);
	document.getElementById("box" + id).innerHTML = http_request.responseText
	document.getElementById("imgBox" + id).style.display = "none";
}

bei dem http.open einfach den async parameter von true auf false umstellen schon musste dich nicht mit dem ganzen onreadystatechange gelöht rumärgern...

dann nennt sich das ganze übrigens SJAX anstatt AJAX :ugly:

digiTALE · 8. Januar 2009

Kant-holz schrieb:
warum eigentlich asynchron? warum benutzt du hierfür nicht einfach nen synchronen request und schon hast das problem nicht...

Was spricht dagegen wenn es asynchron abläuft?

Ich habe auch eine vielversprechende und funktionierende Lösung gefunden.

Code:

function loadContent(url, id, x)
{
	http_request.open("get", url, true);
	http_request.onreadystatechange = function() { handleContent(id, x); };
	http_request.send(null);

}
function handleContent(id, x)
{

	if (http_request.readyState == 1)
	{
		if (x)
		{
		  document.getElementById("imgBox" + id).style.display = "inline";
		}
		else
		{
		  document.getElementById("imgBox" + id).style.display = "none";
		}
	}
	if (http_request.readyState == 4)
	{
		document.getElementById("box" + id).innerHTML = http_request.responseText
		document.getElementById("imgBox" + id).style.display = "none";
		if (x)
		{
		  document.getElementById("box" + id).style.display = "block";
		}
		else
		{
		  document.getElementById("box" + id).style.display = "none";
		}
		
	}
}

HTML:

<div class="container">

	<a href="#" onclick="loadContent('content.php?link=box1', '1', true); return false;">TestLink1</a>
	<img id="imgBox1" src="loading.gif" style="display:none;" alt="" />
	<div id="box1"></div>

</div>

Suche

JavaScript Verschiedene Inhalte mit Ajax laden

digiTALE

Lt. Junior Grade

thetroll

Ensign

digiTALE

Lt. Junior Grade

thetroll

Ensign

digiTALE

Lt. Junior Grade

thetroll

Ensign

digiTALE

Lt. Junior Grade

thetroll

Ensign

digiTALE

Lt. Junior Grade

Kantholy

Lt. Junior Grade

digiTALE

Lt. Junior Grade

Ähnliche Themen