Ergebnis 1 bis 6 von 6
  1. #1
    Emjay_Lee ist offline Jungspund
    registriert
    09-10-2012
    Beiträge
    12

    Mit AJAX Sub-Navi einblenden

    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.

    HTML-Code:
    <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.

    HTML-Code:
    <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.

    PHP-Code:
    $(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(xhrajaxOptionsthrownError) {
                    
    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

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: Mit AJAX Sub-Navi einblenden

    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.

  3. #3
    Emjay_Lee ist offline Jungspund
    registriert
    09-10-2012
    Beiträge
    12

    AW: Mit AJAX Sub-Navi einblenden

    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.

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.706

    AW: Mit AJAX Sub-Navi einblenden

    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:
    Code:
    {
    	"content": "Hier der Inhalt",
    	"subnavi": [
    		{
    			"href": "URL",
    			"text": "Linktext"
    		},
    		...
    	]
    }
    dann kannst du beliebig viele Untermenüpunkte einbauen.

  5. #5
    Emjay_Lee ist offline Jungspund
    registriert
    09-10-2012
    Beiträge
    12

    AW: Mit AJAX Sub-Navi einblenden

    Okay alles klar danke.

    Werde ich mal so ausprobieren

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.706

    AW: Mit AJAX Sub-Navi einblenden

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

Ähnliche Themen

  1. Navi
    Von MaHzeL im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 18-11-2009, 16:28
  2. AJAX Top Navi
    Von atimaster im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 13-08-2009, 01:01
  3. Navi
    Von Adrian92 im Forum JavaScript
    Antworten: 24
    Letzter Beitrag: 05-07-2009, 01:11
  4. navi
    Von neubau-city im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 18-03-2006, 16:38
  5. [js] navi
    Von .marc im Forum Script-Check
    Antworten: 4
    Letzter Beitrag: 31-12-2003, 16:55

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •