Div Inhalt ändern

NoXiD · 14 Oktober 2011

Hallo!
Ich würde gerne den Inhalt meines DIV durch einen anderen austauschen, wenn bei meinem Menü auf "HSP Doku" geklickt wird. (das Menü hab ich von einer Seite übernommen)
Jedoch funktioniert das leider nicht :/ Weis jemand wieso?

Code:

$(document).ready(function()
{
   $("#sdt_menu.std_box a, #l a").live("click",function()
   {
	var pageToLoad = $(this).attr("href");
	var pageContent;
	$.get(pageToLoad, function(data)
	{
	   pageContent=data;
	    $("#l").fadeOut("slow", function()
	   {
		$("#l").html(pageContent).fadeIn("slow");
	   });
	});
	return false;
});
});

HTML:

<div id="strike"><div class="home">		<ul id="sdt_menu" class="sdt_menu" style="padding-left: 30%; padding-top: 1%">		<li><a href="#"> <img src="../images/2.jpg" alt="" /> <span				class="sdt_active"></span> <span class="sdt_wrap"> <span					class="sdt_link">Home</span> <span class="sdt_descr">News						&uumlber HRM...</span> </span> </a></li>		<li><a href="#"> <img src="../images/1.jpg" alt="" /> <span				class="sdt_active"></span> <span class="sdt_wrap"> <span					class="sdt_link">Services</span> <span class="sdt_descr">Services						bestellen...</span> </span> </a>			<div class="sdt_box">				<a href="http://www.google.at">Services suchen</a> <a					href="http://www.google.at">Services bestellen</a> <a					href="http://www.google.at">Service&uumlbersicht</a>			</div></li>		<li><a href="#"> <img src="../images/3.jpg" alt="" /> <span				class="sdt_active"></span> <span class="sdt_wrap"> <span					class="sdt_link">Kontakt</span> <span class="sdt_descr">Kontakt						mit Admin...</span> </span> </a>			<div class="sdt_box">				<a href="http://www.google.at">Kontakt Admin</a> <a					href="http://www.google.at">Kontakt Entwicklung</a>			</div></li>		<li><a href="#"> <img src="../images/4.jpg" alt="" /> <span				class="sdt_active"></span> <span class="sdt_wrap"> <span					class="sdt_link">Hilfe</span> <span class="sdt_descr">Hilfe						zu HRM...</span> </span> </a>			<div class="sdt_box">				<a href="../pages/hspdoku.html" id="linkdoku">HSP Doku</a> 				<a href="http://www.google.at">FAQ's</a>			</div></li>	</ul>	</div></div>

LG

Gilles · 14 Oktober 2011

Ich würde glatt behaupten das Element mit der Id l fehlt. Du sagst er soll den Inhalt in das Element mit der Id l schreiben. Da dieses nicht existiert, kann auhc nicht passieren ;)
Hier ist übrigens das HTML in schöner Form :)

HTML:

<div id="strike">
  <div class="home">
    <ul id="sdt_menu" class="sdt_menu"
      style="padding-left: 30%; padding-top: 1%">
      <li><a href="#"> <img src="../images/2.jpg" alt="" /> <span
          class="sdt_active"></span> <span class="sdt_wrap"> <span
            class="sdt_link">Home</span> <span class="sdt_descr">News
              &uumlber HRM...</span> </span> </a>
      </li>
      <li><a href="#"> <img src="../images/1.jpg" alt="" /> <span
          class="sdt_active"></span> <span class="sdt_wrap"> <span
            class="sdt_link">Services</span> <span class="sdt_descr">Services
              bestellen...</span> </span> </a>
        <div class="sdt_box">
          <a href="http://www.google.at">Services suchen</a> <a
            href="http://www.google.at">Services bestellen</a> <a
            href="http://www.google.at">Service&uumlbersicht</a>
        </div>
      </li>
      <li><a href="#"> <img src="../images/3.jpg" alt="" /> <span
          class="sdt_active"></span> <span class="sdt_wrap"> <span
            class="sdt_link">Kontakt</span> <span class="sdt_descr">Kontakt
              mit Admin...</span> </span> </a>
        <div class="sdt_box">
          <a href="http://www.google.at">Kontakt Admin</a> <a
            href="http://www.google.at">Kontakt Entwicklung</a>
        </div>
      </li>
      <li><a href="#"> <img src="../images/4.jpg" alt="" /> <span
          class="sdt_active"></span> <span class="sdt_wrap"> <span
            class="sdt_link">Hilfe</span> <span class="sdt_descr">Hilfe
              zu HRM...</span> </span> </a>
        <div class="sdt_box">
          <a href="../pages/hspdoku.html" id="linkdoku">HSP Doku</a> <a
            href="http://www.google.at">FAQ's</a>
        </div>
      </li>
    </ul>
  </div>
</div>

NoXiD · 14 Oktober 2011

Hallo!
Danke für die schnelle Antwort, das Element mit der ID "l" ist direkt unter dem Menü...

HTML:

<div id="l">
<p> Hier steht der 1. Text </p>
</div>

lg

mermshaus · 15 Oktober 2011

Probier es mal ohne fadeOut/fadeIn, also per direkter Übergabe an html(). Geht es dann?

NoXiD · 16 Oktober 2011

Hallo!
nein, auch dann geht es nicht. Es leitet mich immer direkt zu der nächsten Seite...

Lg

mermshaus · 17 Oktober 2011

Also, erst mal ist dein Selektor verkehrt. Außerdem bekommst du beim Laden externer Seiten gerne Probleme mit der Same origin policy.

HTML:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            /*<![CDATA[*/
            
$(document).ready(function()
{
   $("#sdt_menu .sdt_box a, #l a").live("click",function()
   {
	var pageToLoad = $(this).attr("href");
    
    $.get(pageToLoad, function() {
        alert("success");
    })
    .success(function(data) {
	    $("#l").fadeOut("slow", function()
        {
            $("#l").html(data).fadeIn("slow");
        });
    })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });
    
	return false;
});
});
            
            /*]]>*/
        </script>
    </head>

    <body>
        
<div id="strike">
  <div class="home">
    <ul id="sdt_menu" class="sdt_menu"
      style="padding-left: 30%; padding-top: 1%">
      <li><a href="#"> <img src="http://www.html.de/images/2.jpg" alt="" /> <span
          class="sdt_active"></span> <span class="sdt_wrap"> <span
            class="sdt_link">Home</span> <span class="sdt_descr">News
              &uumlber HRM...</span> </span> </a>
      </li>
      <li><a href="#"> <img src="http://www.html.de/images/1.jpg" alt="" /> <span
          class="sdt_active"></span> <span class="sdt_wrap"> <span
            class="sdt_link">Services</span> <span class="sdt_descr">Services
              bestellen...</span> </span> </a>
        <div class="sdt_box">
          <a href="http://www.google.at">Services suchen</a> <a
            href="http://www.google.at">Services bestellen</a> <a
            href="http://www.google.at">Service&uumlbersicht</a>
        </div>
      </li>
      <li><a href="#"> <img src="http://www.html.de/images/3.jpg" alt="" /> <span
          class="sdt_active"></span> <span class="sdt_wrap"> <span
            class="sdt_link">Kontakt</span> <span class="sdt_descr">Kontakt
              mit Admin...</span> </span> </a>
        <div class="sdt_box">
          <a href="http://www.google.at">Kontakt Admin</a> <a
            href="http://www.google.at">Kontakt Entwicklung</a>
        </div>
      </li>
      <li><a href="#"> <img src="http://www.html.de/images/4.jpg" alt="" /> <span
          class="sdt_active"></span> <span class="sdt_wrap"> <span
            class="sdt_link">Hilfe</span> <span class="sdt_descr">Hilfe
              zu HRM...</span> </span> </a>
        <div class="sdt_box">
          <a href="http://example.org/" id="linkdoku">[TEST SOP]</a> <a
            href="t.php">[TEST lokal]</a>
        </div>
      </li>
    </ul>
  </div>
</div>
        
<div id="l">
<p> Hier steht der 1. Text </p>
</div>        
        
    </body>

</html>

Interessant im Beispiel sind die letzten beiden Links. Den zweiten davon zum Test auf eine lokal existierende Ressource ändern.

NoXiD · 17 Oktober 2011

@mermshaus: Danke für diene Rückmeldung. Wenn ich auf den Externen Link drücke, werde ich auf die Seite weitergeleitet.

Code:

[COLOR=#000080]<div class=[COLOR=#0000FF]"sdt_box"[/COLOR]>[/COLOR] 
[COLOR=#008000]<a href=[COLOR=#0000FF]"http://example.org/"[/COLOR] id=[COLOR=#0000FF]"linkdoku"[/COLOR]>[/COLOR][TEST SOP][COLOR=#008000]</a>[/COLOR] 
[COLOR=#000080]<a href=[COLOR=#0000FF]"../pages/hspdoku.html"[/COLOR]>[/COLOR][TEST lokal][COLOR=#008000]</a>
[/COLOR][COLOR=#000080]</div>

[/COLOR]
Bei der lokalen Seite werde ich auch auf die Lokale weitergeleitet. Gewünscht wäre aber der content von "hspdoku.html" (im code) im div mit der id "l"... Schön langsam verzweifle ich :O

LG

mermshaus · 17 Oktober 2011

Wie gesagt:

Außerdem bekommst du beim Laden externer Seiten gerne Probleme mit der Same origin policy.

Siehe dazu auch die jQuery-Doku unter „Additional Notes“.

- jQuery.get() – jQuery API

Der Aufruf von Seiten auf der gleichen (Sub-)Domain sollte aber eigentlich möglich sein. (Ist vielleicht Einstellungssache im Browser.)

Ein einfacher Workaround wäre es, nicht direkt den nachgefragten URL abzurufen, sondern ein Script auf der Domain, dem der URL als Parameter übergeben wird, als Proxy zu nutzen, also es die nachgefragte Seite auslesen und zurückliefern zu lassen.

Eventuell geht es auch irgendwie mit JSONP - Wikipedia, the free encyclopedia.

Mehr fällt mir spontan nicht ein.

Zu deinem Edit:

Gewünscht wäre aber der content von "hspdoku.html" (im code) im div mit der id "l"...

Bei mir im Test funktionierte das so. Eventuell reicht das return false; nicht unter allen Umständen.

- hyperlink - jQuery disable a link - Stack Overflow

event.preventDefault() könntest du mal probieren.

Div Inhalt ändern

NoXiD

Neues Mitglied

Gilles

Blogger

NoXiD

Neues Mitglied

mermshaus

Senior HTML'ler

NoXiD

Neues Mitglied

mermshaus

Senior HTML'ler

NoXiD

Neues Mitglied

mermshaus

Senior HTML'ler

Neueste Beiträge