Ajax Request mit JQuery - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Ajax Request mit JQuery

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Ajax Request mit JQuery

Pages: [1]

geschrieben von Danny am 21.12.2006 - 17:34

Hallo,
die Seite an der ich gerade bastel soll sowohl mit AJAX als auch ohne angeschaltetes Javascript laufen. Nach langer Suche und vielen Tests von Ajax Framework bin ich auf JQuery ( http://www.jquery.com ) gestoßen und bin begeistert. Die Entscheidung fiel hauptsächlichst wegen der vielen Plugins, aber darum geht es nicht.

Ich möchte beim Klick auf ein Link ein Request an die entsprechende Seite senden und ein Div Container updaten. Soweit kein Problem, mit JQuery sähe das so in der Art aus.

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
            	<script type="text/javascript" src="/public/_files/coande/gui/jquery/jquery.js"></script>

            	<script type="text/javascript">
		<!--
			$(document).ready(function() {
				$('a.menu').click(function() {
					$("#con").load("seite.html");
				});
			})
		-->
		</script>
	</head>
	<body>
		<div id="con"></div>
		<a class="menu">update!</a>
	</body>
</html>

Ok, natürlich ist es nur ein vereinfachtes Beispiel. Die URL soll natürlich nicht statisch sein, sondern im Link mitgegeben werden. Ich hab mir einfach gedacht, nutz ich doch das href Attribut.
Damit hätt ich gleich zwei Fliegen geschlagen, denn wenn JS nicht aktiviert ist existiert ja nur der normale Link. Wenn dagegen JS, wie bei allen ausser Matneu

, aktiviert wurde mach ich das über AJAX und sende einfach ein Parameter mit um nur den Inhalt und nicht die gesamte Seite zu erhalten.

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
            	<script type="text/javascript" src="/public/_files/coande/gui/jquery/jquery.js"></script>

            	<script type="text/javascript">
		<!--
			$(document).ready(function() {
				$('a.menu').click(function() {
					$("#con").load(this.href, {ajax: true});
				});
			})
		-->
		</script>
	</head>
	<body>
		<div id="con"></div>
		<a href="seite.html" class="menu">update!</a>
	</body>
</html>

Ansich funktioniert es. Es gibt nur ein Problem, was diese Lösung zunichte macht, denn das Div wird zwar durch die JS Funktion aktualisiert, aber danach leitet er die gesamte Seite durch das href noch weiter. Damit ist die AJAX Funktion natürlich nutzlos.

Nun zu meiner Frage: Gibt es eine Möglichkeit das Weiterleiten, nachdem die AJAX Funktion aufgerufen wurde zu unterbinden? Oder eine ganz andere Herangehensweise?

Wäre euch dankbar für jeden Vorschlag.

Bye Danny

geschrieben von René am 21.12.2006 - 18:55

... probier mal?

	HTML-Quelltext
1:	<a href="seite1.html" class="menu" onclick="return false;">update!</a>

geschrieben von Danny am 21.12.2006 - 19:14

Hallo René,
funktioniert wunderbar...

Danke dir für die schnelle Hilfe

Bye Danny