JavaScript Einbau von Ajax in eine bestehende Webseite

LondonMinistry

Cadet 1st Year
Registriert
Mai 2013
Beiträge
15
Hi Leute

Hab mir ein Script durch ein Tutorial geschrieben welches nicht so funktioniert wie ich es dachte.
Ich habe 2 Fragen:
Hab die Links passend gemacht nur sind diese überhaupt richtig?
und
Wo bestimme ich den Bereich welcher nachgeladen werden muss?

Code:
<!DOCTYPE html>
<html>

<head>
	<title>DJ GeneralMinistry</title>
	<link rel="stylesheet" type="text/css" href="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 sollten, sind im gleichen Ordner wie die css und index File.
Wo liegt der Fehler? Wieso funktioniert es nicht?

LG LondonMinistry
 
Hi Hancock

Vielen Dank für die schnelle Antwort.

IE: F12 Drücken und Script-Debugging aktivieren
FF: FireBug installieren und F12 und genau das gleiche
Chrome: müsste das selbe sein.

Hab ich gemacht. Super Add-On! Danke für den Tipp!

Was mir auffällt: $("#m_index") vs. <a href="#!/index"> mach da mal jeweils den gleichen String rein.

Hab ich getestet. Klappt nicht.

(und bei JS mit nem # davor).

Wie meinste das genau? Hab ich nicht ganz verstanden.:confused_alt:

Tut mir Leid dies ist mein erstes Javascript Projekt.

LG LondonMinistry
 
Hi,

deine schließenden Curlybrackets sitzen falsch.
Ergänzung ()

Code:
$("#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  

        )};

    )};

)}

Richtig:

Code:
$("#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  

        });

    });

});


Bei den vielen bis auf die Werte identischen Funktionen solltest du überlegen ob Du nicht eine einzige schreibst und lediglich mit verschiedenen Werten aufrufst.
 
Zuletzt bearbeitet:
Hi omaliesschen

Tut mir wirklich Leid aber ich bin mit meiner Logik zu Javascripts am Ende. Ich seh die Fehler nicht. Könntest du mir ein Beispiel geben?

Danke

Lg LondonMinistry
 
Hab ich doch.

du schließt mit )}. Richtig ist allerdings });

öffnen: ({
schließen: })

nicht:

öffnen: ({
schließen: )}


PS: Als Anregung:

Code:
function selector(page) {

    $("#main").animate({opacity:"0", filter:"alpha(opacity-0)"), 400, function() {
        $("#main").load(page+".html", function() {
            $("#main").animate({opacity:"0", filter:"alpha(opacity-100)"), 400
        });
    });
}



jQuery('ul#navi > li').each(function(index) {

    $(this).click(function(){

        var page_to_load = $(this).attr('id'); 
        selector(page_to_load);

    });

});


Code:
<ul id="navi">
          <li id="links">Links</li>
          <li id="news">News</li>
          <li id="music">Musik</li>
</ul>


PS: Kann wie immer sein das man etwas anpassen muss und nicht alles auf Anhieb läuft.

Mit prevendefault(); verhinderst du das defaultbehaviour von Elementen wie z.b. links. Sprich mit deaktiviertem JS folgt man dem Link mit JS läuft das skript. Einfach mal googlen.
 
Zuletzt bearbeitet:
Ja, hab dein geänderter Post nicht gesehen als die Antwort schrieb.

Ich hab die Curlybrackets geändert - passiert nichts.

Wahrscheindlich stimmt mein "#main" Bereich nicht daher passiert nichts oder wie siehst du das?

Danke für deine schnellen Antworten!
 
Ich schaus mir mal an. Dauert paar Minuten.
Ergänzung ()

PS: Du hast auch divs in a elementen. Ist nicht erlaubt.
 
Danke schön hab in 2 andern Foren das gleiche Problem beschrieben und niemand hat mir eine richtige Antwort geben können.

Ein ganz grosses Lob, bin froh entlich jemanden gefunden zuhaben!

Ganz dickes Dankeschön an dich und Hancock!

Hilft evtl. weiter:
generalministry.tk

Test Seite ist im Web.
 
habs gleich.^^
Ergänzung ()

Hier der Code. ich hab jquery.ui includiert.

In die selector funktion kannst du deine animation packen. Die id der li Elemente wird genutzt um den Seitennamen zu finden. Ist die id 'test_seite' wird test_seite.html geladen.

PS: Habs auch auf das minimum reduziert. Sry.



Code:
<!DOCTYPE html>
<html>
<head>
<title>DJ GeneralMinistry</title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></script>



<script type="text/javascript">

function selector(page) {

    $('#main_wrapper').html('<div id="dynload" style="width:575px;min-height:460px;color:#4f4f4f;display:none;"></div>');
    $('#dynload').show('slide', {direction: 'right'}, 800).load(page+".html");

}


$(document).ready(function(){
    jQuery('ul#navi > li').each(function(index) {
        $(this).click(function(){
            var pageload = $(this).attr('id');
            selector(pageload);
        });
    }) 
});

</script>

</head>

<body>

<div id="menu">
<ul id="navi">
<li id="test"><a>Links</a></li>
<li id="news"><a>News</a></li>
<li id="music"><a>Musik</a></li>
</ul>
</div>

<div id="main_wrapper">
<h2>Music</h2>
<pre class="Stil1">HouseElectroReggaetonHip HopPop</pre>
</div>

</body>
</html>

Einfach eine Seite Namens test.html in das selbe Verzeichnis in der auch die Index Datei liegt geben und mit etwas Text füllen.

Wenn du keine Slideanimation möchtest sags einfach und ich setz deine Opacity animation rein. Finde Slide nur eleganter.
 
Zuletzt bearbeitet:
omaliesschen schrieb:
PS: Du hast auch divs in a elementen. Ist nicht erlaubt.
In HTML5 schon.

Da du die Inhalte per AJAX nachladen und beim Klick auf einen der Links keinen Reload erzeugen möchtest, musst du in der Event Funktion .click(function() {}) das Default Event (neuer Seitenaufruf) unterbinden. Die Funktion bekommt bereits das Click-Event als Parameter mitübergeben, wo die Standardausführung dann mit jQuery preventDefault() verhindert werden kann.
Code:
.click(function(e) {
    // e = event data
    e.preventDefault();
    // Code ...
}
 
Nochmals vielen Dank! Seit 6 Tagen war ich auf der Suche nach einer Lösung - und dann kamst du! 30min und fertig!
Unglaublich. Würde gerne eine Bewertung abgeben jedoch darf ich das noch nicht.

In die selector funktion kannst du deine animation packen.

Hier kommt die CSS Datei rein?

function selector(page)

Danke Danke Danke!
 
Das mit der preventDefaul() Funktion wurde erwähnt. Sollte kein Problem sein das reinzusetzen.

Zum Rest, wie erwähnt muss der TE das von mir eingestellte Skript an seine Seite anpassen. CSS includieren etc.


Block Elemente in Inline Elementen... Sauber find ich das nicht.

PS: Du kannst die selector Funktion auch direkt aufrufen:
Code:
<a onclick="selector('news')">News</a>


In die selector Funktion kommt lediglich die Animation rein. $('#main-wrapper').animate() etc.

Alles was passieren soll wenn die Funktion aufgerufen wird.

Derzeit macht die Funktion folgendes. Sie ersetzt den aktuellen Content mit einem div (dynload) dessen display attribut auf none; steht also erstmal nicht angezeigt wird. Danach wird die gewünschte Seite geladen .load() und das dynload.div per slide eingeschoben und angezeigt.


Hier der "click listener" noch mit preventDefault():

Code:
$(document).ready(function(){
jQuery('ul#navi > li').each(function(index) {
$(this).click(function(e){
e.preventDefault();
var pageload = $(this).attr('id');
selector(pageload);
});
})


});
 
Zuletzt bearbeitet:
Okay hab mir das ganze Script kopiert eingefügt, wie du gesagt hast eine test.html im gleichen Ordner einsetzen - doch die Links werden nicht als Links angezeigt- hab ich was vergessen?
 
HTML musst du selbst umsetzen. Wenn du Links möchtest muss das href Attribut gesetzt werden.

<a></a> #kein Link
<a href="#"></a> #Link

Und den Codeblock mit preventDefault() aus dem vorrigen Beitrag nutzen.

Hierbei kann auf den click listener verzichtet werden:
Code:
<li><a onclick="selector('test')" href="test.html>Test</a></li>

oder eben mit dem listener:

Code:
<li id="test"><a href="test.html">Test</a></li>

oder

Code:
    $(document).ready(function(){
    jQuery('ul#navi > li a').each(function(index) {
    $(this).click(function(e){
    e.preventDefault();
    var pageload = $(this).attr('id');
    selector(pageload);
    });
    })

und dann die id dem Link zuordnen und nicht dem Listeneintrag <li>:

Code:
<li><a id="test" href="test.html">Test</a></li>
 
Zuletzt bearbeitet:
Jungs ich begreif das nicht... :confused_alt:

Ich hab mir da definitiv zu viel vorgenommen...

Wenn ich dir meine Dateien senden kann könntest du mir dies so bereitstellen, dass ich nur die CSS File und die Files welche nachgeladen berbeiten kann?
 
Zuletzt bearbeitet:
BroFist hin oder her, aber das wird mir dann zu umfangreich.^^ Wo hängts den?

Ich investier noch 30min und versuch es so zusammenzustellen dass du die Seite nicht nochmal schreiben musst.
 
sry das ich dir hier so auf den leim gehe ;)

Hab das mit den Links probiert - Link wird blau markiert öffnet aber in einem neuen Tab...
Was habe ich schon wieder nicht gemacht?:mad:
 
Hier. Das HTML hatte ein </div< zuviel. Validier dein html mit einem html validator. W3C html validator googlen.

Bei Mir funktioniert es.

Beim nächsten mal bitte den ganzen Whitespace entfernen, bzw. das ganze aufräumen...

Code:
<!DOCTYPE html>
<html>
     
<head>
<title>DJ GeneralMinistry</title>
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <script type="text/javascript">
    function selector(page) {
    var main = $('#main');
    main.hide("slide", {}, 1000, function(){
    main.load(page+".html");
    main.show("slide", {}, 1000)
    });
    }

    </script>
</head>

<body>
<div id="header">
<img src="img/banner.gif" />
</div>

<div id="menu_cut">
    <div id="menu">

    <a onclick="selector('test')" href="#!/index">
        <div class="menu_button"><p>HOME</p></div>
    </a>

    <a onclick="selector('news')"    href="#!/news">
        <div class="menu_button"><p>NEWS</p></div>
    </a>

    <a onclick="selector('music')"  href="#!/music">
        <div class="menu_button"><p>MUSIC</p></div>
    </a>

    <a onclick="selector('technic')" href="#!/technic">
        <div class="menu_button"><p>TECHNIK</p></div>
    </a>

    <a onclick="selector('support')"   href="#!/support">
        <div class="menu_button"><p>LINKS</p></div>
    </a>

    <a onclick="selector('contact')" 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>

</body>
</html>
Ergänzung ()

PS: Hier findest du ein paar ui Animationen für die hide() Funktion:
http://docs.jquery.com/UI/Effects


EDIT: Habs nochmal verkürzt. Nimm die aktuelle Version.
 
Zuletzt bearbeitet:
W3c Ergebnisse:
File Upload: 5 Errors ; 4 Warnings
Direct Upload: 4 Errors ; 4 Warnings

Warum klappts bei dir und bei mir nicht?
Hab denn Code kopiert eingefügt - passiert nicht...
Was ist blos los mit mir?
 
Zuletzt bearbeitet:
Zurück
Oben