[JS] Nicht komplette Seite neuladen?

Cydia · 28. Mai 2014

Hallo,

ich möchte gerne mit JS etwas erstellen wo ich nicht die komplette Seite neuladen muss, sondern nur einen <div> via Menu Bar.

Hier habe ich eine Menü Punkt wo man drauf klickt und der soll einfach nur einen Div neu laden anstatt die ganze seite.
Hoffe jemand versteht dies

Hier mal mein Menu Bar etc.

HTML

<ul class="sidebar-menu">
	<li class="active">
		<a href="?site=home">
			<i class="fa fa-dashboard"></i> <span>Dashboard</span>
		</a>
	</li>
</ul>

Dieses hier soll er neu laden:

HTML

<section class="content">


</section>

Hoffe mir kann jemand stichweise ein Quellcode geben oder einen Link.

mfg Cydia.

Edgar · 28. Mai 2014

Schau dir meinen Post an:
PHP/Ajax Text als Button verwenden?
Gleiche Methode.

Inkompetent · 28. Mai 2014

http://www.html.de/threads/div-reload-mit-ajax.48133/

Cydia · 28. Mai 2014

Also von dem ersten Link habe ich recht wenig.
Beim Zweiten läuft dies mit einem Timer und auch indirekt wenig mit meiner Sache zu tuen.

Kinimod · 28. Mai 2014

Zitat von Cydia

Also von dem ersten Link habe ich recht wenig.
Beim Zweiten läuft dies mit einem Timer und auch indirekt wenig mit meiner Sache zu tuen.

Du erstellst eine Javascript Funktion, welche als onclick Event im Link aufgerufen wird. In dieser Funktion schreibst Du folgendes rein:

JavaScript

$(".content").load("URLZurSeiteWelcheDenContentEnthält");

Wäre die einfachste Methode.

Edgar · 28. Mai 2014

PHP/Ajax Text als Button verwenden?

Hier habe ich es etwas erklärt.
Man sollte sich natürlich in die Materie einarbeiten.

Schau dir die Doku auf der JQuery Seite an.

Klemmlampe · 28. Mai 2014

Grundsätzlich kannst du dazu einfach Ajax, z.B. durch jQuery, verwenden. Ich denke was dir aber viel mehr hilft ist Pjax (Pushstate + Ajax). Wie der Name schon sagt wird zusätzlich zu Ajax die Pushstate API von HTML5 verwendet um die Adresse entsprechend anzupassen. Kannst ja mal google bemühen.

Cydia · 28. Mai 2014

@dead: Deine antwort fand ich jetzt am Besten, denn damit habe ich denke mal das gefunden was ich gesucht habe.
Hoffe ich mal das ich dies umsetzen kann ansonsten melde ich mich nochmal hier.

mfg Cydia.

ChristianW · 28. Mai 2014

Mit jQuery könntest du einfach machen:

$('#div').load();
$('.class').load();

Allerdings gibs da auch noch die .html('Content'): Methode

Edit:

bei selection menus kannst du mittels jquery die value umsetzen ohne den Content zu reloaden

Cydia · 28. Mai 2014

Es bringt mir nicht wirklich viel, wenn ihr mir die Funktionen sagt aber ich noch nie es benutzt habe

Edgar · 28. Mai 2014

Zitat von Cydia

Es bringt mir nicht wirklich viel, wenn ihr mir die Funktionen sagt aber ich noch nie es benutzt habe

Schon mal meinen Post durchgelesen?

Zitat von Aus einem anderem Thread
Nein, ich habe es falsch verstanden.
Dafür benötigst du Ajax, ich würde dir mal JQuery empfehlen.
http://jquery.com/

Damit kannst du abfragen ob du auf ein Element (auch Text) geklickt hast und mit $.post() kannst
du dann Parameter an die php datei übergeben, mit der function in der post kannst du
dann den Rückgabewert in einen z.B. Divcontainer schreiben.

Folgende Funktionen benötigst du:

click

post

html

und um ein Effekt anzuzeigen fadeIn und fadeOut

So könnte es aussehen:
Code
$( "#IDVomElement" ).click(function() {
$.post( "data.php", { parameter1: "Inhalt", parameter2: "Inhalt" }, function(data) { 
$( "#IDVomContentElement" ).fadeOut(350).html(data).fadeIn(350);
}); // in der php Datei: $_POST['parameter1'];
});
Sollte so funktionieren.
Alles anzeigen

Kinimod · 28. Mai 2014

Zitat von Cydia

Es bringt mir nicht wirklich viel, wenn ihr mir die Funktionen sagt aber ich noch nie es benutzt habe

Dafür wurde doch bereits auf die jQuery Doku hingewiesen:
http://api.jquery.com/load/

Cydia · 28. Mai 2014

Es ging eher darum das hier weiterhin mir Vorschläge gemacht wird, obwohl ich mir das alles erstmal anschauen muss.

breadfish.de 12. März 2022