Bereich Aktualisieren, ohne das die ganze Seite neu Lädt

Tato

Routinier

Dabei seit: 18.02.2010

Beiträge: 398

1

Samstag, 8. Oktober 2011, 20:55

Hallo,

ich würde gerne einen einzelnen Bereich (Div) Aktualisieren, ohne das die ganze Seite neu Lädt. Weil wenn die ganze Seite neu Lädt, gehen die Formulardaten, die man gerade eingibt (ich will nen PHP Chat machen) alle wieder weg...

Wie kann ich das mit JavaScript oder JQuery am besten lösen?

KLICK MICH!

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

2

Sonntag, 9. Oktober 2011, 12:28

Soweit ich weiß kann man das über AJAX realisieren.
Aber da du sicher jetzt nicht ein ganzes Buch über AJAX lesen willst warte mal lieber auf die Antworten der Profis

Oder google mal nach:
"div aktualisieren ajax"

Gibt viele Ergebnisse und ist sicher was dabei.

MFG Simon

stfschaefer

Routinier

Dabei seit: 21.08.2010

Beiträge: 252

3

Montag, 10. Oktober 2011, 04:28

@DeffCon: Du bist schon auf dem richtigen Weg. Allerdings ist AJAX schon eher eine FrameWork, um dies zu bewerkstelligen. JavaScript selbst hat schon die Möglichkeiten, so etwasa zu bewerkstelligen.

Vorraussetzungen für das Aktualisieren von Teilbereichen der Seite ist, dass man die Bereiche oder Segmente, die man aktualisieren will überhaupt adressieren kann.

Man kann nicht nur divs aktualisieren sondern auch zum Beispiel Paragraphs ( .... <p> Paragraphtext </P> .... )

Das bedeutet, dass der erste Schritt zur Aktualisierung eine Namensvergebung der zu aktualisierenden Bereiche ist.

Die Namengebung erfolgt mittels eines Attributes für den Namen und hierfür sind zwei vorgesehen, nämlich "name" und "id".

Es ist übrigens nicht zwingend, dass man die IDs uynd Namen eindeutig vergibt. Innerhalb des JavaScripts werden dann die einzelnen Elemente der gleichen ID oder Name in einem Array gehalten.

Dies wäre der erste Schritt.

der zweite Schritt ist, dass man Ereignisroutinen schreibt, die bei einem bestimmten Ereignis, den Inhalt bestimmter Elemente ändern.

Ist ja auch logisch. Der Inhalt soll ja auf einem bestimmten Ereignis hin geändert werden.

Eine Liste von Ereignissen sind z.B.:

MouseOver = Wenn die Mouse über ein Element läuft.
Change = Wenn der Text eines Eingabefeldes geändert wurde

Auch gibt es Ereignisse wenn man in ein Eingabefeld klickt und wenn man durch Klicken ein Eingabefeld verlässt.

Desweiteren kann man auch Zeitereignisse bestimmen, d.h. z.B. dass nach einer Minute eine Aktualisierung erfolgt oder ähnliches.

Für den Anfang ist die Bibliothek aus selfhtml gut. Sie beschreibt sehr gut das Verfahren und auch eine kleine Bibliothek ist dabei, die die Arbeit mit dynamischen Seiten vereinfacht:

SelhHTML von Stefan Münz

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

4

Montag, 10. Oktober 2011, 10:25

also Ajax ist kein Framework sondern eine art Konzept oder eine Möglichkeit zur Kommunikation zwischen Server und Client. jQuery ist ein Framework das diese Kommunikation vereinfacht. Mit hilfe von jQuery kann man außerdem eine erweiterte "Namensvergebung" verwenden die sich nicht nur auf ID und Name bezieht sondern auch auf bestimmte attribut Tags, klassen namen oder sogar bestimmte numerierte elemente. Ich bin mir auch sicher dass es auch mit reinem JS ohne jQuery(jquery ist ja reines JS nur mit weiteren funktionen) funktioniert nur wird das ganze dann etwas schwieriger.

Hier ein kleines Beispiel wie du den HTML Code anderer Seite in ein bestimmtes div laden kannst

index.html

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul class="navigation">
<li>Home</li>
<li>News</li>
<li>Kontakt</li>
</ul>
<div class="content">
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

main.js

Javascript-Quelltext

var enableNavigation = function(){
loadContent($(this).text()); //beim klicken hole dir den text aus der navigation und übergebe ihn an die funktion loadContent
}
var loadContent = function(content){
$.ajax({
   url: content+".html", //lade datei xyz.html
   success: function(data){
   $('div.content').html(data); //wenn die datei geladen wurde, packe den HTML code aus der Datei in den div .content
   }
 });
}
//Hauptfunktion
$(function(){
$('ul.navigation li').live('click',enableNavigation); //füge jedem li element in der liste ul einen click event hinzu

});

Home.html

	HTML
1 2	<h1>Willkommen auf meiner seite</h1> <p>Lorem Ipsum und so weiter..</p>

damit das funktioniert, muss man sich natürlich jQuery vorher runterladen

Mein kleines Projekt
-Cruel Online-

Tato

Routinier

Dabei seit: 18.02.2010

Beiträge: 398

5

Montag, 10. Oktober 2011, 19:12

Hallo,

Danke für den Code..Funktioniert, aber nicht so ganz wie ich das eigentlich wollte.

Wie mach ich das, dass er das Div nicht durch einen Click, sondern von alleine Jede 10 Sekunden erneuert
(So wie header.location nur das eben nicht die ganze Seite erneuert wird).

KLICK MICH!

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

6

Montag, 10. Oktober 2011, 19:34

	HTML
1	window.setInterval("loadContent('Home')",606010);

aber hier auf WMW ist es nicht erlaubt

Mein kleines Projekt
-Cruel Online-

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cccpmik« (10. Oktober 2011, 19:34)

Tato

Routinier

Dabei seit: 18.02.2010

Beiträge: 398

7

Montag, 10. Oktober 2011, 20:42

Also auf hier auf WMW will ich das nur kurz testen, und es dann woanders hochladen. (Bplaced)

Aber sry wenn ich jetzt Frage: Wo muss ich das denn jetzt einfügen? bei .live oder wo? Sry, aber JQuery hatte ich noch nicht so viel gelernt...

KLICK MICH!

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

8

Montag, 10. Oktober 2011, 22:01

	Javascript-Quelltext
1 2 3	$(function(){ //<-- das hier ist die Haupt funktion, diese wird sofort aufgerufen sobald der HTML Code geladen wurde window.setInterval("loadContent('Home')",606010); });

Mein kleines Projekt
-Cruel Online-

Feechen

Grünschnabel

Dabei seit: 12.10.2011

Beiträge: 4

9

Mittwoch, 12. Oktober 2011, 19:09

Hallo,

ich bin neu hier und auf der Suche nach genau dem, was hier gepostet wurde glandet. Leider funktioniert bei mir das Ganze nicht. Ich habe die Dokumente wie in Post Nr. 4 angegeben erstellt (Inhalt kopiert und als Datei mit entsprechender Endung abgespeichert). Weiterhin habe ich jquery heruntergeladen und in dasselbe Verzeichnis gelegt. Wenn ich nun die Seite aufrufe, erscheint nur der Inhalt der index.html, jedoch kann ich nichts anklicken. Was kann denn hierfür die Ursache sein?

Ich wäre für eine Hilfestellung sehr dankbar!

Gruß

Feechen

Deffcon

König

Dabei seit: 11.11.2010

Beiträge: 897

10

Mittwoch, 12. Oktober 2011, 19:26

Du musst Zeile 6 in der main.js beachten.
Da muss ja eine Datei angegeben werden.

Ich denke, dass das dein Fehler ist.

Feechen

Grünschnabel

Dabei seit: 12.10.2011

Beiträge: 4

11

Mittwoch, 12. Oktober 2011, 20:20

Hallo,

ich habe eine Datei angegeben. Trotzdem funktioniert es nicht.

Woran könnte es denn noch liegen?

Viele Grüße

Feechen

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

12

Mittwoch, 12. Oktober 2011, 20:55

wir besitzen auch keine glaskugel die uns antworten auf alles gibt

was hällste von folgenden vorschlag? du lädst deine seite hoch und schickst uns den link und wir sagen dir dann was da falsch ist

Mein kleines Projekt
-Cruel Online-

Feechen

Grünschnabel

Dabei seit: 12.10.2011

Beiträge: 4

13

Mittwoch, 12. Oktober 2011, 23:05

Guter Vorschlag :-)

Hier der Link:

http://www.wegbegleiter.de/

Gruß
Feechen

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Feechen« (12. Oktober 2011, 23:05)

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

14

Mittwoch, 12. Oktober 2011, 23:15

oh man...

	Javascript-Quelltext
1	url: content+"xyz.html", //lade datei xyz.html

kein wunder dass es nicht geht , wenn du Firebug(Firefox plugin) installierst und dort die konsole aktivierst, erhälste folgende fehlermeldung "NetworkError: 404 Not Found - http://www.wegbegleiter.de/Homexyz.html"

Mein kleines Projekt
-Cruel Online-

Feechen

Grünschnabel

Dabei seit: 12.10.2011

Beiträge: 4

15

Mittwoch, 12. Oktober 2011, 23:46

Hey, vielen, vielen DANK! Jetzt habe ich verstanden, warum es so ist. Ich hatte ewig gesucht, bis ich so etwas gefunden habe. Du, bzw. Ihr seid klasse!

Gruß
Feechen

Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von »Feechen« (12. Oktober 2011, 23:46)