mit AJAX ein bestimmtes Div neu laden

S

StephanSch

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2006
Beiträge
406
Reaktionspunkte
1
Ich habe folgendes Problem:

Ich hab eine Seite angelegt mit mehreren Divs und in einem Div ist eine Suchfunktion eingebaut. Nun möchte ich, wenn ich eine Suchanfrage abschicke, dass Ergebnis in dem selben Div angezeigt wird, wo die Suchfunktion eingebaut ist. So weit auch kein Problem, das ganze sollte aber funktionieren, OHNE dass die Seite komplett neu lädt.

Das müsste doch mit Ajax gehn? Da ich eine Ajax Anwendung noch nie benutzt habe wäre ein Tutorial vielleicht nicht schlecht...

Danke für eure Antworten!
 
Hallo,

ich habe mal folgendes geschrieben:

Code:
function macheRequest(src) {
http_request = false;
if (window.XMLHttpRequest) {
   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('Das Request Objekt konnte nicht erzeugt werden! Bitte ueberpruefen Sie Ihre JAVA Einstellungen!');
        return false;
    }
   
   http_request.onreadystatechange = show;
   http_request.open('GET', src+'.html', true);
   http_request.send(null);
}


function show() {
if (http_request.readyState == 4) {

      document.getElementById("inhalt").innerHTML = http_request.responseText;

}
}

Aufruf durch:

Code:
<a class="menu-link" href="javascript:macheRequest('meineDatei');" onClick="setzeNullDetail(1)"> TEST</a>

Ich laden den Inhalt einer anderen HTML-Datei in das DIV.
Mußt Du nur noch für Dich anpassen :)

Viele Grüße
 
Vielen lieben Dank, werde es gleich ausprobieren.
 
Funktioniert einwandfrei ;-) Danke nochmal!
 
Zuletzt bearbeitet:
Eine Sache weiß ich dann doch nicht wie ich das zum laufen bekomme...

Momentan sieht mein Test link ja so aus:
<a href="javascript:macheRequest('includes/funktioniert');">TEST</a>

Für meine Nutzung brauche ich aber keinen Link sondern einen Submit Button, der Suche, wie kann ich dem Submit button der Suche sagen, er soll folgendes Script in den Div Layer laden, ohne dabei die komplette Seite neu zu laden?

<input type="search" name="search" value="search" size="20" style="..." /> An dieser Stelle bräuchte ich quasi Javascript, dass aus dem Submit einen Link macht und das JavaScript aufruft....versteht ihr was ich meine?

Ich hatte mir das so in der Art vorgestellt:
<input type="search" name="search" value="search" onclick="document.location.href="javascript:macheRequest('includes/funktioniert')";" size="20" style="..." />

Das geht aber nich...?
 
Zuletzt bearbeitet:
Ich wollte das ganze etwas abändern das ich hier auch die div jeweils auswählen kann:

Code:
<a class="menu-link" href="javascript:macheRequest('meinDiv','meineDatei');" onClick="setzeNullDetail(1)"> TEST</a>

nur versteh ich den Code nicht ganz :(
Welche div verwendet wird steht ja hier:

Code:
function show() {
if (http_request.readyState == 4) {

      document.getElementById("inhalt").innerHTML = http_request.responseText;

}

nur ich weiss nicht wo die Funktion show aufgerufen wird, von dem weiss ich leider auch nicht wie ich das übergeben kann.

Kann mir da wer helfen?
 
Naja sobald du du auf deinen Link klickst wird die macheRequest Funktion aufgerufen, und die beinhaltet auch die Funktion show...bin allerdings ein JS Anfänger und kann dir leider nicht erklären, wie du auch noch den Div Variabel auswählen kannst :-/
 
Ich bin zwar ein Javascript Noob, aber wie wär's mit:
Code:
<div id="1" onclick="show(this.id)"
und
Code:
function show(id)
{
document.getElementById(id).innerHTML = http_request.responseText;
}

Du übergibst beim Klicken die id an die Funktion und beim Aufruf der Funktion wird die id verwendet um das div zu identifizieren.
 
will dieses thema nochmal aufwärmen.
ist es noch zusätzlich möglich ein loading gif animation zu starten und die soll so lange angezeigt werden, bis der inhalt geladen wurde
 
Klar. Pack das loading-gif einfach in das div und sobald der Inhalt ersetzt wird.. naja, dann steht eben der neue Inhalt drin. Der alte Inhalt wird komplett durch den neuen ersetzt.
Code:
<div id="inhalt">
<img src="loading.gif" />
</div>

Du kannst das Ganze natürlich noch formatieren. Align center, min-height, etc., damit das Gif in der Mitte erscheint und auch nach was aussieht.
 
neben prototypejs gibt es auch noch jquery (www.jquery.com). nutze das selbst, macht die arbeit auch bei ajax wirklich einfach...
 
Guten Abend,

ich suche schon seit langem danach und hier bin ich fündig geworden :)

Es geht um folgende Seite: Link

Ich möchte das nach dem klick auf den submitbutton die danke.html in diesem div erscheint - leider geht es nicht...

Hier der Code:

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<link rel="shortcut icon" href="img/icon.ico" type="image/x-icon" />
<title>Hotel - Restaurant - Adler</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Hotel - Restaurant Adler - Ihr traditionsreiches Ambiente in Rudolstadt." />
<meta name="keywords" content="Hotel, Restaurant, Ambiente, Rudolstadt, Pension, Adler" />
<meta name="language" content="de" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Nils Hoffmann" />
<meta name="copyright" content="Nils Hoffmann" />
<meta name="designer" content="Nils Hoffmann" />
<meta name="publisher" content="www.saaltec.de" />
<meta name="revisit-After" content="5 days" />
<meta name="distribution" content="global" />
<style type="text/css">
*			{
		margin:0;
		padding:0;
}
body		{
		background: #660000;
		font-size:100.01%;
		text-align:center;
		font-family:arial, verdana, sans-serif;
		font-style:normal;
}
#wrapper	{
		background: url(img/stripes.png);
		repeat:y-repeat;
		width:1100px;
		min-height:830px;
		margin:0 auto;
}
#head_logo	{
			float:left;
			width:1100px;
			height:116px;
}

#head	{
		float:left;
		width:1100px;
		height:366px;
}
#content	{
			float:left; 
			width:1098px;
			height:330px;
}
#left	{
		float:left;
		background: url(img/stripes_content.jpg);	
		repeat:x-repeat;
		text-align:left;
		width:274px;
		min-height:330px;
}
#left ul	{
		margin:25px 0 0 75px;
}
li		{
		list-style:none;
		margin-top:4px;
}
#left a	{
		color:#850202;
		text-decoration:none;
}
#left a:hover	{
		color:#aeacac;
}
#left a:active	{
		color:#aeacac;
}
#mid	{
		float:left;
		background: url(img/stripes_content_mid.jpg);
		repeat:x-repeat;
		width:550px;
		min-height:330px;
}
#mid h2	{
		float:left;
		text-align:left;
		font-family:times;
		color:#5b5a5a;
		margin:25px 0 0 15px;
}
#mid p	{
		float:left;
		text-align:left;
		color:#5b5a5a;
		line-height:24px;
		width:520px;
		min-height:30px;
		margin:25px 0 0 15px;
}
#right	{
		float:left;
		background: url(img/stripes_content_right.jpg);
		repeat:x-repeat;
		text-align:left;
		width:274px;
		min-height:330px;
}
#right	form {
		float:left;
		width:250px;
		margin-left:25px;
}
#right h3	{
		color:#5b5a5a;
		margin:25px 0 15px 0;
}
#bot	{
		float:left;
		background: url(img/bot.png);
		repeat:no-repeat;
		width:1100px;
		height:26px;					
}
</style>
<script type="text/javascript">
function macheRequest(src) {
http_request = false;
if (window.XMLHttpRequest) {
   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('Das Request Objekt konnte nicht erzeugt werden! Bitte ueberpruefen Sie Ihre JAVA Einstellungen!');
        return false;
    }
   
   http_request.onreadystatechange = show;
   http_request.open('GET', src+'.html', true);
   http_request.send(null);
}


function show() {
if (http_request.readyState == 4) {

      document.getElementById("right").innerHTML = http_request.responseText;

}
}


</script>
</head>
<body>
	<div id="wrapper">
		<div id="head_logo">
			<a href="">
				<img src="img/logo.jpg" width="250" border="0" height="116" alt="Hotel Adler" title="Hotel Adler" />
			</a>
		</div>
		<div id="head">
			<img src="img/head.jpg" width="1100" height="366" alt="Hotel Adler" title="Hotel Adler" />
		</div>
		<div id="content">
			<div id="left">
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">Unser Hotel</a></li>
					<li><a href="">Service</a></li>
					<li><a href="">Wintergarten</a></li>
					<li><a href="">Restaurant</a></li>
					<li><a href="">Eiscafe</a></li>
					<li><a href="">Reservierung/Angebote</a></li>
					<li><a href="">Anfahrt</a></li>
					<li><a href="">Kontakt</a></li>
				</ul>
			</div>
			<div id="mid">
			<h2>Hotel Adler</h2>
			<p>
			Herzlich willkommen im traditionsreichen "Adler", unserem 400 Jahre alten Hotel
			im Zentrum der Rudolstädter Altstadt. Harmonisch eingebunden im Ensemble
			des alten Marktes, erstrahlt es im alten Glanz, der es, trotz
			wechselvoller Geschichte, seit 1601 weit über die Grenzen der
			alten Residenzstadt hinaus bekannt machte.
			</p>
			<p>
			Bei uns schlafen Sie wie ein König in stilvollem Ambiente.
			Die Tradition des Hauses spiegelt sich schon im
			Eingangsbereich wieder. Handwerklich gefertigte Möbel
			prägen den ersten Eindruck und laden zu einem Rundgang ein.
			</p>
			</div>
			<div id="right">
				<form action="" method="post">
				<h3>Reservierungsanfrage</h3>
				<div class="fieldbox_select">
				<label>Zimmer:</label>
					<select name="zm">
						<option value="Einzelzimmer">Einzelzimmer</option>
						<option value="Doppelzimmer">Doppelzimmer</option>
					</select>
					<br /><br />
				<label>von:</label>
						<select name="tag">
							<option value="1">01</option>
							<option value="2">02</option>
							<option value="3">03</option>
							<option value="4">04</option>
							<option value="5">05</option>
							<option value="6">06</option>
						</select>
						<select name="monat">
							<option value="Januar">Januar</option>
							<option value="Februar">Februar</option>
							<option value="März">März</option>
							<option value="April">April</option>
						</select>
						<select name="jahr">
							<option value="2011">2011</option>
							<option value="2012">2012</option>
						</select>
						<br />
						<br />
						<label>bis:</label>
						<select name="tag_end">
							<option value="1">01</option>
							<option value="2">02</option>
							<option value="3">03</option>
							<option value="4">04</option>

						</select>
						<select name="monat_end">
							<option value="Januar">Januar</option>
							<option value="Februar">Februar</option>
							<option value="März">März</option>
						</select>
						<select name="jahr_end">
							<option value="2011">2011</option>
							<option value="2012">2012</option>
						</select>
						<br /><br />
						<label style="color:#5b5a5a;">Bemerkung</label>
						<textarea name="txt" id="text" rows="5" cols="22" style="<?php echo $txt ?>" ></textarea>
						<input type="submit" href="javascript:macheRequest('danke.html');" onClick="setzeNullDetail(1)" value="Abschicken" id="abs" name="abs" />
					</div>
				</form>	
			</div>
		</div>
		<div id="bot"></div>
	</div>
</body>
</html>

Leider habe ich in JS zu wenig Erfahrung.

Vielen Dank schon mal.

Liebe Grüße
 
Du kannst kein href auf ein input setzten ;-)
Einfach so machen:
<input type="submit" onClick="setzeNullDetail(1); macheRequest('danke.html');" value="Abschicken" id="abs" name="abs" />


Übrigens kannst du auch einfach statt AJAX ein iframe nehmen

<iframe src="pfad/zu/danke" frameborder="0">

Oder liege ich da falsch ?
 
Hallo,

ja das mit dem input war keine gute Idee :)

Jedenfalls geht es jetzt trotzdem nicht...

an was könnte es noch liegen ?

grüße Nils
 
EDIT: Sorry zu spät gesehen :D
 
Simple:
http_request.open('GET', src+'.html', true);

also musst du
macheRequest('danke')
schreiben ;)
 
Du solltest außerdem den http Status abfragen. Wenn der nämlich nicht 200 (ready) ist, dann gibt es komische Ergebnisse.

Code:
if (httpRequest.readyState == 4 && httpRequest.status == 200)

Im Übrigen würde ich für Ajax jquery verwenden. Damit wird die ganze Sache wesentlich einfacher und weniger fehleranfällig.

Code:
$.ajax({
  url: "danke.html",
  cache: false,
  success: function(html){
    $("#inhalt").html(html);
  }
});

http://api.jquery.com/jQuery.ajax/
 
Zuletzt bearbeitet:
Guten Morgen,

habe jetzt den Code verändert:

Link

Leider geht es noch immer nicht ?!? :(

Liegt es vlt daran, dass das form ja noch gar nicht geht ? bzw es noch keinen php formmailer gibt ?
Wobei ich mir das aber nicht vorstellen kann.

Woran könnte es noch liegen ?

P.S. möchte erst mal diese Variante probieren - weiß auch nicht wie der submit bei der jquery aussehen muss ?!?

Vielen Dank schon mal !!!
 
Das kann auch nicht funktionieren. Du rufst die Seite mit einem GET auf.

Code:
http_request.open('GET', src+'.html', true);

Wenn du Daten übermitteln willst, musst du schon ein POST nehmen.

Ich hab grad keinen Code für die umständliche Variante parat, aber mit jquery geht das so:

Code:
$.ajax({
		type: 'POST',
  		url: "reservierung.php",
		//data: "zm=" + zm.val() + "&tag=" + tag.val() + "&monat=" + monat.val(),
		async: false,
  		success: function(html){
    	        $(#"right").html(html);
  		}
	});
	}

Du solltest dir auch bei Safari die Entwickler Tools einschalten. Da gibt es eine Fehlerkonsole, die dir anzeigt wenn du einen logischen Fehler eingebaut hast. Falls du Firefox verwendest, installier dir Firebug. So kannst du zumindest ausschließen, dass du nicht irgendwo einen Schreibfehler o.ä. drin hast.
 
Zurück
Oben Unten