[JavaScript] Ajax jQuery: Content aus html laden

LondonMinistry · 29. April 2013

Ajax jQuery: Content aus html laden

Hi Leute

Ich hab in mein .html Dokument ein Javascript (Ajax) eingebaut, jedoch wie ich vermutet habe funktioniert nichts.

Bitte um Hilfe, da ich den oder die Fehler nicht erkenne.?(

Könnt ihr was sehn was ich falsch gemacht habe?

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>DJ GeneralMinistry</title>
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.address-1.5.min"></script>
<script type="text/javascript">
var object = null
var objectdata = false;

function loadContent(page) {
$.get(page+".txt", function(data) {
if (data) {
Objectdata = data;
$("#content").fadeOut(function(){
$("#content").html(Objectdata).fadeIn();
});
$("title").html(object);
} else {
$("#content").fadeOut(function(){
$(#content").html("<p>Fehler beim Laden</p).fadeIn();
});
$("title").html("Error 404");
}
});
}

$(ducument).ready(function(e) {
$(".menu_button").click(function(e) {
object = e.currentTarget.innerHTML;
Objectdata = false;
loadContent(object);
e.preventDefault();
});
});
</script>

</head>
<body>
<div id="header">
<img src="img/banner.gif" />
</div>
<div id="menu_cut">
<div id="menu">
<a href="#"><div class="menu_button"><p>HOME</p></div></a>
<a href="#"><div class="menu_button"><p>NEWS</p></div></a>
<a href="#"><div class="menu_button"><p>MUSIC</p></div></a>
<a href="#"><div class="menu_button"><p>TECHNIK</p></div></a>
<a href="#"><div class="menu_button"><p>SUPPORT</p></div></a>
<a href="#"><div class="menu_button"><p>KONTAKT</p></div></a>
</div>
</div>
<div id="webseite">
<div id="infobox">
<div id="info_left_bild">

</div>
<div id="info_right_bild"></div>

<div id="info_middle"></div>

</div>
<div id="cut">

</div>
<div id="text">
<div id="main_text">

</div>
<div id="content">
<h2>Home</h2>
<p>Ist nicht ganz einfach</p>
</div>
<div id="side_banner"></div>
<div id="text_cut"></div
></div>

<div id="footer">
<a href="impressum.html style="text-decoration:none;><div id="impressum"></div></a>
<div id="footer_info"><p> Copyright by DJ GeneralMinistry</p>

</div>

</div>
</div>
</body>
</html>

Vielen Dank
LG LondonMinistry

Anzeige

°EraZoR° · 30. April 2013

AW: Ajax jQuery: Content aus html laden

1. Bitte [ CODE ] verwenden, dass versaut die Einrückung afaik nicht..
2. $(ducument) => $(document)

Das ist schonmal das erste was mir beim Überfliegen aufgefallen ist..

LondonMinistry · 1. Mai 2013

AW: Ajax jQuery: Content aus html laden

Hi °EraZoR°

Hab mir eine neues Script durch ein Tutorial geschrieben welches einiges besser "aussieht". Die Links hab ich bearbeitet nur wie teile ich einen Bereich in dem der Text öffnen soll zu? Mach ich das über die CSS File?

Code:

<!DOCTYPE html>
<html>

<head>
 <title>DJ GeneralMinistry</title>
 <link rel="stylesheet" type="text/css" href="../HTML/style.css" />
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $("#m_index").click(function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-0)"), 400, function() {
 $("#main").load("index.html", function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-100)"), 400 
 )};
 )};

 )};
 $("#m_news").click(function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-0)"), 400, function() {
 $("#main").load("news.html", function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-100)"), 400 
 )};
 )};
 )};
 $("#m_music").click(function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-0)"), 400, function() {
 $("#main").load("music.html", function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-100)"), 400 
 )};
 )};
 )};
 $("#m_technic").click(function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-0)"), 400, function() {
 $("#main").load("technic.html", function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-100)"), 400 
 )};
 )};
 )};
 $("#m_links").click(function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-0)"), 400, function() {
 $("#main").load("links.html", function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-100)"), 400 
 )};
 )};
 )};
 $("#m_contact").click(function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-0)"), 400, function() {
 $("#main").load("contact.html", function() {
 $("#main").animate({opacity:"0", filter:"alpha(opacity-100)"), 400 
 )};
 )};
 )};
 )};
 </script>
</head>
<body>
 <div id="header">
 <img src="img/banner.gif" />
 </div>
 <div id="menu_cut">
 <div id="menu">
 <a href="#!/index"><div class="menu_button"><p>HOME</p></div></a>
 <a href="#!/news"><div class="menu_button"><p>NEWS</p></div></a>
 <a href="#!/music"><div class="menu_button"><p>MUSIC</p></div></a>
 <a href="#!/technic"><div class="menu_button"><p>TECHNIK</p></div></a>
 <a href="#!/support"><div class="menu_button"><p>LINKS</p></div></a>
 <a href="#!/contact"><div class="menu_button"><p>KONTAKT</p></div></a>
 </div>
 </div>
 <div id="webseite">
 <div id="infobox">
 <div id="info_left_bild">
 
 </div>
 <div id="info_right_bild"></div>
 
 <div id="info_middle"></div>
 
 
 </div> 
 <div id="cut">
 
 </div>
 <div id="text">
 <div id="main_text">
 
 </div>
<section id="main">
 <h2>Music</h2>
 <pre class="Stil1"> House
 Electro 
 Reggaeton
 Hip Hop
 Pop</pre>
</section>
</div>
<div id="side_banner"></div> 
 <div id="text_cut"></div
 ></div>
 
 <div id="footer">
 <a href="impressum.html style="text-decoration:none;><div id="impressum"></div></a>
 <div id="footer_info"><p> Copyright by DJ GeneralMinistry</p>
 
 </div>
 
 
 </div>
 </div>
</body>
</html>

Theoretisch sollte der Text sich in der "Section id="main"" öffnen, doch wie gesagt nichts passiert. Die html Files welche sich öffnen sollte sind im gleichen Ordner.
Wo liegt der Fehler? Wieso funktioniert es nicht?

Danke für die Antwort

LG LondonMinistry

Murdoc · 1. Mai 2013

AW: Ajax jQuery: Content aus html laden

Schau dir mal das an:
[Ajax] jQuery Pagetitle übergeben - RR:Board

LondonMinistry · 1. Mai 2013

AW: Ajax jQuery: Content aus html laden

Hi Murdoc

Danke für die Antwort.

Wenn ich das richtig gesehen hab, wird der "main" Container mit CSS zugeteilt ist das richtig? Also dies hab ich in der index.php File gesehen.

2 Fragen hab ich:

Warum wird php und das js miteinander benutzt?
Warum wird am Schluss ein js eingefügt (main.js)?

Wird in "main.js" den Bereich festgellegt??(

Vieleicht hilft dir das weiter:

http://generalministry.tk/

Ich möchte wenn ich auf einen Link, dass sich der Text da öffnet wo jetzt Music und die Musik-Genren stehen.

LG LondonMinistry

°EraZoR° · 1. Mai 2013

AW: Ajax jQuery: Content aus html laden

Ohne das ich mir jetzt das Script von Murdoc angesehen habe:

1. PHP ist Serverseitig, JavaScript ist Clientseitig.
In der Regel willst du ja Daten bereitstellen bzw. verarbeiten lassen.
Und damit du weißt was passiert, machst du das Serverseitig mit PHP, da der Client in der Regel dann keinen großen Einfluß auf das Ergebnis hat (außer über die Parameter, die man ihm zur Verfügung stellt).
Clientseitig rufst du das ganze dann eben nur per JavaScript ab, bzw. weißt den Server (PHP) an deine Daten zu verarbeiten.

2. Es ist in der Regel egal, wann du dein JavaScript in das Dokument lädst.
Du musst bloß sicherstellen, dass die Objekte die du verarbeitest auch schon geladen und von Browser verarbeitet sind, bevor du auf sie zugreifst.
Das machst du mit jQuery zB über die .ready()-Funktion.

MfG
°EraZoR°

LondonMinistry · 1. Mai 2013

AW: Ajax jQuery: Content aus html laden

Hi °EraZoR°

Danke für deine ausführlich Erklärung. So wurde mir die 1. Frage einwandfrei erklärt!

Danke!

Jetzt brauch ich nur noch die Antwort für mein Hauptproblem :

Wo bestimme ich denn Bereich welcher nachgeladen werden muss?

Lg LondonMinistry

Nützliche Suchen

[JavaScript] Ajax jQuery: Content aus html laden

Videos zum Themenbereich