Hashchange-Problemchen

  • Hashchange-Problemchen

    Hallo,
    ich habe folgendes Problem, wobei ich denke/hoffe das @Maddin: mir da ganz gut helfen kann. ;)

    Ich denke das ist kein großes Problem - hab nur das Gefühl der will nicht mit der .js-Datei arbeiten. Mein head-Bereich:

    HTML-Quellcode

    1. <head>
    2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    4. <title><? echo $Seitentitel; ?></title>
    5. <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700italic' rel='stylesheet' type='text/css'>
    6. <link href='http://fonts.googleapis.com/css?family=Francois+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    7. <link rel="stylesheet" href="style.php" type="text/css">
    9. <script src="http:jquery.ba-hashchange.min.js"></script>
    11. <script src="jquery.js"></script>
    12. <script type="text/javascript">
    13. $(document).ready(function() {
    14. $('#Loginfenster').hide('fast');
    15. $('#statsContainer').hide('fast');
    16. $('#correct').hide('fast');
    18. $('#loginMenue').click(function() {
    19. $('#Loginfenster').hide('slow');
    20. $('#correct').show('slow');
    21. $('#Loginfenster').show('slow');
    22. })
    24. $('#newsMenue').click(function() {
    25. $('#statsContainer').hide('slow');
    26. $('#newsContainer').show('slow');
    27. })
    29. $('#statsMenue').click(function() {
    30. $('#newsContainer').hide('slow');
    31. $('#statsContainer').show('slow');
    32. })
    33. });
    34. function get() {
    35. $.post('login.php', { Name: loginForm.Name.value, Passwort: loginForm.Passwort.value },
    36. function(output) {
    37. $('#loginForm').hide('slow');
    38. $('#correct').show('slow');
    39. $('#correct').html(output).show();
    40. $('#correct').hide('slow');
    41. location.reload();
    42. });
    43. }
    44. function loadContent() {
    45. alert("Test1");
    46. $(window).hashchange( function(){ //das hashchange event, welches aufgerufen wird wenn sich der hash ändert.
    47. alert("Test2");
    48. var hash = (location.hash).replace('#', ''); //normal wäre der hash z.b "#startseite", aber wir wollen die raute nicht, weshalb wir sie durch replace entfernen, bzw. durch ncihts ersetzen.
    50. if(hash == '') { //Wenn der hash leer ist
    51. hash = '#news'; //übergeben wir "#startseite" an die variable
    52. location.hash = '#news'; //und ändern die URL
    53. }
    55. hash = hash.toLowerCase(); //den hash in kleinbustaben umwandeln
    57. $('#smallContainer').hide(); //main verstecken
    58. /*
    59. natürlich kann man anstatt hide() (dem einfachen ausblenden) auch
    60. $('#main').slideUp() / $('#main').slideDown() benutzen wenn die Seite hoch/runter scrollen soll, oder
    61. $('#main').fadeOut() um sie langsam verblassen zu lassen.
    62. */
    64. $('#smallContainer').load(hash + '.html', function(response, status, xhr) { //versuche pages/XYZ.html zu laden
    65. if (status == "error") { //Seite wurde nicht gefunden
    66. $('#smallContainer').load(hash + '.php', function(response, status, xhr) { //versuche pages/XYZ.php zu laden
    67. if (status == "error") { //Seite wurde nicht gefunden
    68. $('#smallContainer').load('404.php'); //404 Seite laden
    69. }
    70. });
    71. }
    72. });
    73. $('#smallContainer').show(); //main anzeigen
    74. });
    75. $(window).hashchange(); //Wir rufen das hashchange event beim ersetn seiten besuch auf
    76. }
    77. </script>
    78. </head>
    Alles anzeigen


    So. Er arbeitet soweit ganz gut, aber er geht nicht zu alert("Test2"); - ich vermute weil er wie gesagt diese "hashchange"-Datei nicht erkennen will.

    Oder gibt's 'n anderes Problem? Die URL sieht z.B. so aus:

    Quellcode

    1. http://localhost/Projekte/UCP/index.php#stats

    Kommt weder die "stats.php" in den Container noch die 404.php. :-x

  • Ah, klappt, hab's so gemacht:

    HTML-Quellcode

    1. <head>
    2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    4. <title><? echo $Seitentitel; ?></title>
    5. <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700italic' rel='stylesheet' type='text/css'>
    6. <link href='http://fonts.googleapis.com/css?family=Francois+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    7. <link rel="stylesheet" href="style.php" type="text/css">
    9. <script src="http:jquery.ba-hashchange.min.js"></script>
    10. <script src="jquery.js"></script>
    11. <script type="text/javascript">
    12. $(document).ready(function() {
    13. $('#Loginfenster').hide('fast');
    14. $('#statsContainer').hide('fast');
    15. $('#correct').hide('fast');
    17. $('#loginMenue').click(function() {
    18. $('#Loginfenster').hide('slow');
    19. $('#correct').show('slow');
    20. $('#Loginfenster').show('slow');
    21. })
    23. $('#newsMenue').click(function() {
    24. $('#statsContainer').hide('slow');
    25. $('#newsContainer').show('slow');
    26. })
    28. $('#statsMenue').click(function() {
    29. $('#newsContainer').hide('slow');
    30. $('#statsContainer').show('slow');
    31. })
    32. });
    33. function get() {
    34. $.post('login.php', { Name: loginForm.Name.value, Passwort: loginForm.Passwort.value },
    35. function(output) {
    36. $('#loginForm').hide('slow');
    37. $('#correct').show('slow');
    38. $('#correct').html(output).show();
    39. $('#correct').hide('slow');
    40. location.reload();
    41. });
    42. }
    43. </script>
    44. <script src="http:jquery.ba-hashchange.min.js"></script>
    45. <script type="text/javascript">
    46. function loadContent() {
    47. $(window).hashchange( function(){ //das hashchange event, welches aufgerufen wird wenn sich der hash ändert.
    48. var hash = (location.hash).replace('#', ''); //normal wäre der hash z.b "#startseite", aber wir wollen die raute nicht, weshalb wir sie durch replace entfernen, bzw. durch ncihts ersetzen.
    50. if(hash == '') { //Wenn der hash leer ist
    51. hash = '#news'; //übergeben wir "#startseite" an die variable
    52. location.hash = '#news'; //und ändern die URL
    53. }
    55. hash = hash.toLowerCase(); //den hash in kleinbustaben umwandeln
    57. $('#smallContainer').hide(); //main verstecken
    58. /*
    59. natürlich kann man anstatt hide() (dem einfachen ausblenden) auch
    60. $('#main').slideUp() / $('#main').slideDown() benutzen wenn die Seite hoch/runter scrollen soll, oder
    61. $('#main').fadeOut() um sie langsam verblassen zu lassen.
    62. */
    64. $('#smallContainer').load(hash + '.html', function(response, status, xhr) { //versuche pages/XYZ.html zu laden
    65. if (status == "error") { //Seite wurde nicht gefunden
    66. $('#smallContainer').load(hash + '.php', function(response, status, xhr) { //versuche pages/XYZ.php zu laden
    67. if (status == "error") { //Seite wurde nicht gefunden
    68. $('#smallContainer').load('404.php'); //404 Seite laden
    69. }
    70. });
    71. }
    72. });
    73. $('#smallContainer').show(); //main anzeigen
    74. });
    75. $(window).hashchange(); //Wir rufen das hashchange event beim ersetn seiten besuch auf
    76. }
    77. </script>
    78. </head>
    Alles anzeigen