einsiedler: den fehler nicht vor lauter js und html sehen können..... ajax-onepage-inhalt-per-ajax-nachladen

leute, ich seh einfach den fehler nicht, normalerweise sollte per a href - KLICK die entsprechende seite per js nachgeladen werden...... macht es aber nicht und ich sehe den fehler nicht.... beispiel

bei arbeiten / neuigkeiten , news und impressum wird der inhalt nicht in des entsprechende div "modul_main" nachgeladen ..... warum???? GRRRRRRRRRRRRRR.......

hier main.js liegt korrekt im order js GRRRRRRRRRRRRR.........

var baseUrl = '/testseite8/';
function bindLinks(links) {
	links.click(function() {
		var page = $(this).attr('href').substr(baseUrl.length);
		if(page.substr(page.length - 1) == '/') {
		    page = page.substr(0, page.length - 1);
		}
		if(page == '') {
		    page = 'index';
		}
		
		changePage(page, true);
		
		return false;
	});
}
function changePage(page, forward) {
	$.ajax(baseUrl + page + '.page.php', {
		success: function(data) {
			$('title').text(titles[page] + ' - Ajax-OnePage');
			$('#modul_main').html(data);
			bindLinks($('#modul_main a.onPage'));
			
			if(forward) {
				if(page == 'index') {
					history.pushState('', titles[page] + ' - Ajax-OnePage', 'http://localhost' + baseUrl);
				} else {
					history.pushState('', titles[page] + ' - Ajax-OnePage', 'http://localhost' + baseUrl + page + '/');
				}
			}
		}
	});
}
$(document).ready(function() {
	bindLinks($('a.onPage'));
	
	$(window).bind('popstate', function(event) {
		var rawFileName = window.location.href.match(/\/([a-z]+)\/?$/);
		
		changePage(rawFileName[1], false);
	});
});

hier das html

<?php
	
	$baseUrl = '/testseite8/';
	
	$titles = array(
		'index' => 'Startseite',
		'works' => 'Arbeitent',
		'news' => 'Neuigkeiten',
		'contact' => 'Kontakt',
		'impressum' => 'Impressum'
	);
	
	$urlParts = array();
	preg_match('/\/([a-z]+)\/?$/', $_SERVER["REQUEST_URI"], $urlParts);
	if(isset($urlParts[1]) && isset($titles[$urlParts[1]])) {
		$page = $urlParts[1];
	} else {
		$page = 'index';
	}
	
	echo '<?xml version="1.0" encoding="UTF-8" ?>'; 
?>


<!DOCTYPE html>
<html lang="de">
	
<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>webseite</title>
		<style>
html {font: normal 1em/1.5 Georgia, serif; padding: 0 2em;}
body {padding: 0; margin: auto; max-width: 60em;}
a {color: hsl(0, 50%, 50%); text-decoration: none;}
main {margin: 3em 0;}
h1 {font: bold 1.5em/1 Georgia, serif; margin: 2em 0 1em; color: hsl(0, 0%, 30%);}
h2 {font: bold 1em/1.5 Helvetica, sans-serif; margin: 0; color: hsl(0, 50%, 50%);}

#modul_main {padding: 0; margin: auto; max-width: 40em; border: 3px dotted grey;}
	

		</style>
		
		
		<title><?php echo $titles[$page]; ?> - Ajax-OnePage</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
		<script type="text/javascript" src="<?php echo $baseUrl; ?>js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
		/* <![CDATA[ */
			var titles = <?php echo json_encode($titles); ?>;
		/* ]> */
		</script>
		<script type="text/javascript" src="<?php echo $baseUrl; ?>js/main.js"></script>

</head>

<body>
	<header>
		Meine allerneueste Website ...
	</header>
	<nav>
		<ul>
			<?php
				foreach($titles as $key => $title) {
					echo '
			<li>
				<a href="' . $baseUrl . ($key != 'index' ? $key . '/' : '') . '" class="onPage" rel="nofollow">' . $title . '</a>
			</li>';
				}
			?>
		</ul>
	</nav>
	<div id="modul_main"><?php include($_SERVER["DOCUMENT_ROOT"] . $baseUrl . $page . '.page.php'); ?></div>
	<footer>
		Hallo, ich bin der Footer. FOOOTER FOOOTER   Ich bleibe immer hier, egal wie du durch die Seite navigierst...
	</footer>
</body>
</html>

seufZ

achso die htaccess datei sieht so aus:

liegt als .htaccess im wurzelmenue (also ./testseite8)

<IfModule mod_rewrite.c>
# Enable URL rewriting
RewriteEngine On
#RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
# Main URL rewriting.
RewriteRule .* index.php [L]
</IfModule>

DANKE!

seufZ

  1. Lieber einsiedler,

    normalerweise sollte per a href - KLICK die entsprechende seite per js nachgeladen werden......

    warum? Das macht die Navigationsmöglichkeiten der Vor- und Zurück-Buttons kaputt, sodass diese Frage schon erlaubt sein muss.

    Liebe Grüße,

    Felix Riesterer.

    1. @@Felix Riesterer

      warum? Das macht die Navigationsmöglichkeiten der Vor- und Zurück-Buttons kaputt

      Nicht, wenn man’s richtig macht, d.h. mit History-API.

      sodass diese Frage schon erlaubt sein muss.

      Aber die Frage, ob das gegenüber serverseitg fertiggestellter Seiten von Vorteil ist, muss schon erlaubt sein.

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      1. nabend,

        .... achso ja, das sind unterschiedliche projekte, das eine hat mit dem anderen nichts zu tun.

        eigentlich wollte ich recht schnell eine seite schaffen das bestimmte leute einen überblick von meinen arbeiten bekommen. ich habe da eine idee zu etwas "recht einfachem", und dazu benötige ich das "nachladen von inhalten per ajax".

        wo steckt also der fehler? nach tausendmaligem auseinandernehmen und neu tippen, ich verstehe einfach nicht warum der inhalt nicht in den div "modul_main" angezeigt wird, sondern irgendwie als neue seite.

        lasst mich nicht dumm sterben, bitte....... :o)

        grüsse der siedler

        1. Hallo,

          eigentlich wollte ich recht schnell eine seite schaffen das bestimmte leute einen überblick von meinen arbeiten bekommen. ich habe da eine idee zu etwas "recht einfachem", und dazu benötige ich das "nachladen von inhalten per ajax".

          als absoluter Javascript-Fan würde ich nie auf die Idee komen, die Seitennavigation per JS/Ajax zu realisieren. Musterseite erstellen (hast du ja schon), vervielfältigen, Inhalte reinkopieren und fertig.

          wo steckt also der fehler? nach tausendmaligem auseinandernehmen und neu tippen, ich verstehe einfach nicht warum der inhalt nicht in den div "modul_main" angezeigt wird, sondern irgendwie als neue seite.

          die Seite wirft einen Javascript-Fehler:

          SyntaxError: expected expression, got '<'    jquery-1.7.2.min.js:2:0
          

          und einen (vermutlichen) Folgefehler:

          ReferenceError: $ is not defined             main.js:35:0
          

          Da deine Links dadurch keine Click-Handler bekommen haben, wird der Inhalt einfach in eine neue Seite geladen.

          Da ich von jquery keine Ahnung habe, kann ich dir hier auch nicht mehr weiterhelfen.

          Gruß Jürgen