zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Ajax Seite laden funktioniert nur in <nav> Tag

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.10.2016, 12:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2016
Beiträge: 4
matze8426 befindet sich auf einem aufstrebenden Ast
Standard Ajax Seite laden funktioniert nur in <nav> Tag

Hallo zusammen,

bin recht neu in der Webentwicklung. Ich habe mich jetzt mal mit Ajax beschäftigt und stehe vor folgendem Problem:
Wenn ich einen Link im <nav> Bereich anklicke, wird der Teil der Seite innerhalb von
HTML-Code:
		<section id="content">
			<div id="container">
 				<?php
 					include('inc/dashboard.php');
 				?>
			</div>
		</section>
neu geladen. Wenn ich jetzt aber innerhalb von dashboard.php einen Link habe und den anklicke, soll wieder nur der Inhalt der Section id "content" ausgetauscht werden. Es wird aber der neu geladene Inhalt auf der kompletten HTML-Seite angezeigt und nicht in die Section eingebettet. Ich hoffe es ist verständlich was ich erreichen will.
Meine Index.php:
HTML-Code:
<?php
    require_once "login.inc.php";
?>
<!DOCTYPE html>
<html>
	<head>
...

		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="js/link_loading.js"></script>
		<style type='text/css'>
        ul.nav li.dropdown:hover ul.dropdown-menu {
            display: block;
        }
    </style>
	</head>
	<body>
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="inc/dashboard.php">Dashboard</a>
				</div>
				<div class="collapse navbar-collapse" id="myNavbar">
					<ul class="nav navbar-nav">
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="inc/seite1.php">Seite 1 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Unterseite 1</a></li>
								<li><a href="#">Unterseite 2</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a class="dropdown-toggle" data-toggle="dropdown" href="#">Seite 2 <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Unterseite 2</a></li>
								<li><a href="#">Unterseite 2</a></li>
							</ul>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<section id="content">
			<div id="container">
 				<?php
 					include('inc/dashboard.php');
 				?>
			</div>
		</section>
		<?php
			include('inc/footer.php');
		?>
		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
		<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
		<script src="js/nav_link_loading.js"></script>
	</body>
</html>
Mein Javascript:
Code:
$('nav a').on('click', function(e) {                 // User clicks nav link
  e.preventDefault();                                // Stop loading new link
  var url = this.href;
	$('nav a.current').removeClass('current');         // Clear current indicator
	$(this).addClass('current');                       // New current indicator
	
	$('#container').remove();                          // Remove old content
	$('#content').load(url + ' #container').hide().fadeIn('slow'); // New content
});
Alle Versuche, ein weiteres Stück Script zu schreiben, dass die normalen a href Links abfängt, schlagen fehl, bzw. ersetzen nicht den Inhalt.
Mein aktueller Versuch ist:
Code:
$('a href').on('click', function(e) {                 // User clicks nav link
  e.preventDefault();                                // Stop loading new link
  var url = link;
  alert('hier sind wir schon mal');
	$('nav a.current').removeClass('current');         // Clear current indicator
	$(this).addClass('current');                       // New current indicator
	
	$('#container').remove();                          // Remove old content
	$('#content').load(url + ' #container').hide().fadeIn('slow'); // New content
})
Um zu prüfen, ob das Skript überhaupt aufgerufen wird, habe ich ein Alert eingefügt. Das wird auch aufgerufen. Aber danach wird der Inhalt nicht in das vorhandene HTML eingebettet, sondern als neue Seite angezeigt. Stehe gerade auf dem Schlauch und was nicht, was ich machen soll.
Vielen Dank im voraus!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.10.2016, 13:05
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.382
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Ein Link zum Problem hilft immer, denn dein zweites JS-Snippet kann so nicht funktionieren. "$('a href')" Sucht nach folgendem Aufbau des Markups:<a><href>

Des Weiteren: was immer hilft ist Debugging. Lass dir ausgeben was in "url" (Protipp: NICHTS) steht, was beim "load()" zurückgegeben wird (Protipp: Wird nicht erreicht).
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.10.2016, 15:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2016
Beiträge: 4
matze8426 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für die schnelle Antwort.
Ich habe mein Skript jetzt mal dahingehend geändert:
Code:
function loadingNewLink(link)
{
	alert(link);
	e.preventDefault();                                // Stop loading new link
  var url = link;
	$('a.current').removeClass('current');         // Clear current indicator
	$(this).addClass('current');                       // New current indicator
	
	$('#container').remove();                          // Remove old content
	$('#content').load(url + ' #container').hide().fadeIn('slow'); // New content
	return false;
}
und rufe auf meiner Seite die Funktion folgendermaßen auf:
HTML-Code:
<a href="create_tplan.php" onClick="return loadingNewLink(this);" >Neuen Trainingsplan erstellen</a>
Ausgegeben wird dann http://localhost/trainingsmanager/create_tplan.php
Die Seite wird dann auch angezeigt, aber eben komplett neugeladen und nicht im vorhandenen DOM-Baum an der entsprechenden Stelle eingefügt.
Mit Zitat antworten
  #4 (permalink)  
Alt 24.10.2016, 12:11
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.676
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Nach einem Blick in die Fehlerkonsole solltest du eigentlich sehen was das Problem ist.

Da du jQuery benutzt solltest du darauf verzichten Events im HTML Code zu deklarieren.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.11.2016, 12:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2016
Beiträge: 4
matze8426 befindet sich auf einem aufstrebenden Ast
Standard

Aufgrund einer Dienstreise konnte bis jetzt nicht dran weiter tüfteln.
Ok, dann setze ich mich mal etwas mehr mit den Entwicklerwerkzeugen im Firefox auseinander. Bisher sehe ich da nämlich keinen Fehler...
Mit Zitat antworten
  #6 (permalink)  
Alt 05.11.2016, 13:02
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.676
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

e exisitert in der Funktion loadingNewLink() nicht und genau das sollte auch in der Konsole stehen.

Das ganze hat auch etwas damit zu tun, dass du inline JS Code schreibst. Daher die Bemerkung zu jQuery.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.11.2016, 13:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2016
Beiträge: 4
matze8426 befindet sich auf einem aufstrebenden Ast
Standard

Ja, schon verstanden.
Bei den Entwicklerwerkzeugen sehe ich:
- Inspektor
- Web-Konsole
- Debugger
- Stilbearbeitung
- Laufzeitanalyse
- Netzwerkanalyse
- JavaScript-Umgebung
etc. aber nichts was Fehlerkonsole heißt.
Wenn ich in die Konsole gehe und mir da alles anzeigen lasse, gibt es da zu JavaScript keine Ausgaben...
Mit Zitat antworten
  #8 (permalink)  
Alt 05.11.2016, 13:24
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.676
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Die Konsole hieß früher Fehlerkonsole. Evtl. musst du aktivieren, dass JS Fehler oder Warnungen angezeigt werden und dann die Seite neu laden.

Ich rede übrigens von deinem letztem Code, im ersten Beispiel treffen meine Aussage nicht zu, da machst du zumindest diese Sache richtig.

Nachtrag: Ich rede vom Firefox
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div im IE zu hoch RancoR CSS 10 09.07.2007 23:11
Bildergalerie: Erstes Bild beim Laden der Seite sichtbar Angares CSS 1 02.02.2007 16:32
Einstieg in Ajax - Seite nachladen dope_dope Javascript & Ajax 3 13.07.2006 17:42
IEMac stürzt beim laden der seite ab?! psycho_dmr CSS 0 25.08.2005 19:27
seite nicht neu laden ohne frames?? schaf (X)HTML 2 04.07.2005 17:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:32 Uhr.