[FRAGE] Mit AJAX Sub-Navi einblenden

[Emjay_Lee]

Hallo Zusammen,

ich habe bereits mit einer jQuery Ajax-Funktion eine Webseite realisiert. Auf der Webseite ist es derzeit möglich via Navigation den Content dynamisch auszutauschen (mit AJAX nachladen). Nun soll aber im Content-Bereich eine Subnavigation reingeladen werden. Habe bereits ein <div> um meine Subnavi <ul> gemacht. Dann wird aber wohl nur der Text mit reingeladen. Was wohl an dem Befehl liegt (sub1 = $(html).filter("li.sub1 a").text(). Wie kann ich eine Unternavigation via AJAX reinladen, damit diese auch wieder vollständig als AJAX-Navigation dienen kann?

Dies ist ein Auschnitt der index.html. Hier soll die Unternavigation reingeladen werden.

<div id="subnav">
					<ul id="subnavi">
						<li class="sub1">
							<a href="#"></a>
						</li>
						<li class="sub2">
							<a href="#"></a>
						</li>
						<li class="sub3">
							<a href="#"></a>
							
						</li>
					</ul>
				</div>

Dies ist das HTML-Fragment, welches ausgelesen werden soll. Der Inhalt (Unternavigation) soll nun in die index.html geladen werden.

<div id="subnav">
	<ul id="subnavi">
		<li  class="sub1">
			<a id="presse"  href="#presse">Presse</a>
		</li>
		<li class="sub2">
			<a id="projekte"  href="#projekte">laufende Projekte</a>
		</li>
		<li class="sub3">
			<a id="stellen"  href="#stellen">Stellenausschreibung</a>
		</li>
	</ul>
</div>

Meine AJAX und Klick Funktionen. Diese funktioniert bisher bei der HauptNavigation.

$(document).ready(function() {
	
	// NAVIGATION KLICK

	$("ul#navi li a").click(function() {
		
		var href = $(this).attr("id");
		alert(href + ".html");
		getContent(href);

		$("ul#navi li a").removeClass("active");
		var select = $("#" + href);
		select.addClass("active");

	});
	
	
	// SUBNAVIGATION KLICK
	
	$("ul#subnavi li a").click(function() {

		var href = $(this).attr("id");

		getContent(href);

		$("ul#subnavi li a").removeClass("active");
		var select = $("#" + href);
		select.addClass("active");

	});

	//getContent --- URL aufrufen

	function getContent(href) {

		$.ajax({
			type : "GET",
			//url: "pages/" +  href + ".html",
			url : "http://webuser.hs-furtwangen.de/~lieneman/plusEnergie/pages/" + href + ".html",

			dataType : "html",

			beforeSend : function(xhr) {
				xhr.overrideMimeType("text/html; charset=ISO-8859-1");
			},
			success : parseHTML,

			error : function(xhr, ajaxOptions, thrownError) {
				alert(xhr.status);

				$('#content').html("<h3 style='text-align: center;'>Es ist ein Fehler aufgetreten</h3>");

			}
		});

	}

	function parseHTML(html) {

		sub1 = $(html).filter("li.sub1 a").text();
		sub2 = $(html).filter("li.sub2 a").text();
		sub3 = $(html).filter("li.sub3 a").text();
		content = $(html).filter("#content").text();
		

		$("li.sub1 a").html(sub1);
		$("li.sub2 a").html(sub2);
		$("li.sub3 a").html(sub3);
		$("#content").html(content);
		

	}

});

Danke

 

[mikdoe]

Solange du das Menü als HTML überträgst musst du es ja wieder zurück parsen, um das DOM ordentlich aufzubauen. Ist das extra so? Sonst würde ich das per JSON machen und darin jeweils ein Feld für die Bezeichnung, den Link und die Class.

 

[Emjay_Lee]

Nein das ist nicht extra so Sondern ein Versuch es mit meinen bisherigen Kenntnissen zu realisieren.

Noch kurz zur Information:
Es soll später möglich sein im CMS Joomla neue "projekte" zu erstellen welche dann auf der Unterseite hinzugefügt werden. Auf dieser Unterseite befindet sich auch das SubMenü. Kann ich das dann auch komplett mit JSON realisieren? Und wie würde das dann aussehen? also die JSON-Datei mit meiner Navigation und meinem Inhalt.

 

[kkapsner]

Das sollte auch mit JSON funktionieren. Du überträgst dann hald anstatt dem HTML einen validen JSON-String (JSON). Wie du die Struktur darin aufbaust, ist dir überlassen, aber ich würde ja in etwas sowas vorschlagen:

{
	"content": "Hier der Inhalt",
	"subnavi": [
		{
			"href": "URL",
			"text": "Linktext"
		},
		...
	]
}

dann kannst du beliebig viele Untermenüpunkte einbauen.

 

[Emjay_Lee]

Okay alles klar danke.

Werde ich mal so ausprobieren

 

[kkapsner]

Kannst dich ja melden, wenn du konkrete Probleme damit hast.