Inhalt dynamisch nachladen mit Direktlink?

~~Cℓoud~~ · 07/04/2013, 03:22

Serv .. ich würde gerne inhalte aus einer Datei dynamisch nachladen, wenn man auf einen Link klickt. Das ganze könnte man so umsetzen:

Code:

onclick="event.preventDefault(); $('.content').load('function/func.downloads.php');

Funktioniert auch .. jedoch möchte ich nun einen Schritt weiter gehen, sodass die dynamischen Inhalte auch via Direktlinks erreichbar sind um das ganze benutzerfreundlicher zu gestalten.

Nun würde ich gerne wissen, wie man das ganze am besten umsetzen kann? Ich habe keine große Erfahrung in Php, Ajax und jQuery ..

tolio · 07/04/2013, 03:47

mit jquery gehts defintiv indem du eine onclick event funktion an einen selector hängst welcher für jeden link gilt, kA obs auch anders geht kenn mich da auch nicht so gut aus.

das nutze ich:

HTML Code:

	<nav>
            <ul id="menu" class="clearfix"> 
                <li><a href="/home">Home</a></li>
                <li><a href="/asdf">asdf</a></li>
            </ul>
	</nav>

Code:

$(function () {
	$('nav a').click(function (e) {
		href = $(this).attr("href");

		loadPage(href);

		e.preventDefault();
	});
});

loadpage ist die funktion welche die seite lädt, entsprechend einfügt etc

~~Cℓoud~~ · 07/04/2013, 04:20

Hmm .. so ganz verstanden habe ich das nicht. Ich habs dennoch selbst versucht und bin ziemlich auf'm Holzweg.

Code:

<head>
	<script type="text/javascript">
	$(function () {
		$('nav a').click(function (e) {
			href = $(this).attr("href");

			loadPage(href);

			e.preventDefault();
		});
	});
	</script>

	<style>
		#content {
			width: 500px;
			height: 200px;
			border: 1px solid black;
		}
	</style>
</head>

Code:

<body>
	<nav>
		<ul id="menu" class="clearfix"> 
			<li><a href="index.php?func=load" onclick="event.preventDefault(); $('#content').loadPage('func/func.load.php');">Irgendwas</a></li>
		</ul>
	</nav>
	
	<div id="content">
		<!-- Inhalt wird hier geladen -->
	</div>	
</body>

tolio · 07/04/2013, 04:51

nimm das mal ganz raus: " onclick="event.preventDefault(); $('#content').loadPage('func/func.load.php');""

außerdem, die funktion loadPage in meinem beispiel ist eine selber geschriebene funktion da ich bei mir noch mehr sachen machen muss als einfach nur den inhalt einzufügen, das musst du nicht machen du könntest an die stelle auch von oben dein "$('.content').load('function/func.downloads.php');" setzen also

Code:

	$(function () {
		$('nav a').click(function (e) {
			href = $(this).attr("href");

			$('.content').load(href);

			e.preventDefault();
		});
	});

~~Cℓoud~~ · 07/04/2013, 10:43

Oke wenn ichs richtig verstanden habe so:

Code:

<li><a href="index.php?func=load" $('.content').load('func/func.load.php');">Irgendwas</a></li>

Der lädt dann auch, nur lädt der mir nicht den Inhalt in die class content. Wenn ich index.php?func=load durch func/func.load.php ersetze, öffnet der mir den inhalt in ner neuen Seite.

telcy · 07/04/2013, 14:05

Du benutzt den falschen Selektor.
Dein DIV enthält nur eine ID, keine Klasse.

sprich du solltest statt .content das hier #content benutzen.

Ist mir nur beim überfliegen aufgefallen.

Wenn du mehr Hilfe brauchst bin ich auch bereit dir zu helfen.
Am besten schreibst du mir eine PM da ich diesen Thread sonst vergesse^^

----------
EDIT:

Ich hab es dir mal fertig gemacht:

~~Cℓoud~~ · 07/04/2013, 17:03

Siehe PN. :) Das Problem war nicht, den Inhalt in den content zu laden, sondern wenn ich im Browser eine Url zu einem Modul angebe, das dieser mir das ebenfalls direkt in den Content lädt. Ich möchte einfache Direktlinks möglich machen ohne das ich für jede Datei das komplette Interface einbauen muss.

Ich habe eine Index.php mit einem content ..

Code:

#content {height: 200px; width: 200px; border: 1px solid black;}

Dann habe ich noch den Ordner "func" in dem sich die datei "func.news.php" befindet, gebe ich nun in den Browser "www.meineseite.de/func" ein, soll sich der Inhalt von "func.news.php" direkt in den von mir angelegten content auf der index.php öffnen .. um das ganze nochmal anders zu formulieren. :)

telcy · 07/04/2013, 17:17

Kannst jetzt GET Parameter anfügen
?func=content1

v2:

~~Cℓoud~~ · 07/04/2013, 17:25

Perfekt, so wollt ichs haben. :)