Hallo zusammen,
bin grad am entwickeln einer neuen Homepage und wollte dort mal was testen, bezüglich des nachladens von Inhalten durch klick auf die Navigationsleiste.
Dies funktioniert soweit auch ganz gut, allerdings wenn ich eine Seite im Internetexplorer als Lesezeichen starte bzw. als link eingebe oder die Seite neulade steht in der URL leiste "undefined", die Seit wird richtig geladen und dann quasi mit dem undefined überschrieben.
habe hier noch zu Demonstrationszwecken eine spartanische Testseite erstellt:Test
im Unterordner "seiten" gibt es drei Dateien dort steht jeweils nur eine kurze bemerkung
start.php
test1.php
test2.php
und Hier der Code der index.php:
Ich hoffe Ihr könnt mir helfen und ich danke euch schonmal für Eure Mühen
Mit freundlichen Grüßen
bin grad am entwickeln einer neuen Homepage und wollte dort mal was testen, bezüglich des nachladens von Inhalten durch klick auf die Navigationsleiste.
Dies funktioniert soweit auch ganz gut, allerdings wenn ich eine Seite im Internetexplorer als Lesezeichen starte bzw. als link eingebe oder die Seite neulade steht in der URL leiste "undefined", die Seit wird richtig geladen und dann quasi mit dem undefined überschrieben.
habe hier noch zu Demonstrationszwecken eine spartanische Testseite erstellt:Test
im Unterordner "seiten" gibt es drei Dateien dort steht jeweils nur eine kurze bemerkung
start.php
test1.php
test2.php
und Hier der Code der index.php:
HTML:
<?php
$urlParts = array();
preg_match('/\/([a-z]+)\.php(\?.*)?$/', $_SERVER["REQUEST_URI"], $urlParts);
if($urlParts[1]!="index.php"&&$urlParts[1]!="")
{
$page = $urlParts[1];
} else {
$page = 'start';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- jQuery -->
<script src="jquery-2.1.1.min.js"></script>
<script src="history.js"></script>
<!-- jQuery -->
<script>
$(document).ready(function(){
$.ajax({
type: "POST",
url: "seiten/"+"<?php echo $page;?>"+".php",
success: function(msg)
{
$('#stuff').hide().html(msg).fadeIn(1000);
}
});
function loadContent( href ) {
if(href=="/")
{
href="start.php";
}
$.ajax({
type: "POST",
url: "seiten/"+href,
success: function(msg)
{
$('#stuff').hide().html(msg).fadeIn(1000);
}
});
}
$( window ).bind( 'popstate', function( e ) {
var cLocation = history.location || document.location;
if(cLocation.pathname + cLocation.search + cLocation.hash!="/undefined")
{
loadContent( cLocation.pathname + cLocation.search + cLocation.hash );
}
});
$('#footer.credits').on('click','.link_imprint',function() {
var currentUrl = $( this ).attr( 'href' );
loadContent( currentUrl );
history.pushState( null, null, currentUrl );
});
$(".navigation").on('click',function() {
var a =$(this).attr("href");
$.ajax({
type: "POST",
url: "seiten/"+a,
success: function(msg)
{
$('#stuff').hide().html(msg).fadeIn(1000);
history.pushState( null, null, a );
}
});
return false;
});
});
</script>
</head>
<body>
<div id="menu">
<nav>
<a class="navigation" id="test1" href="test1.php">Test1</a>
<a class="navigation" id="test2" href="test2.php">Test2</a>
</nav>
</div>
<div id="inhalt">
<div id="stuff">
</div>
</div>
</body>
</html>
Mit freundlichen Grüßen
Zuletzt bearbeitet: