• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

jquery u. ajax: Dynamischer Inhalt von HTML Seite leider ohne History

S

suniboj

Neues Mitglied
Hallöchen,

habe mir eine HTML5 Homepage erstellt und wollte nicht, beim Aufrufen eines Menüpunktes die komplette Seite, sondern nur der Inhalt neu lädt. Das habe ich mithilfe diese TUTs realisiert: http://marco.seaside-graphics.de/pr...it-einem-link-dynamisch-laden-anzeigen-lassen

Das erste Problem, dass ich jetzt habe ist, dass die Seite nun keine History hat. Wenn ich von der Home-Seite(index.html) zu Referenzen wechsel kann ich nicht mithilfe des Zurück-Buttons des Browsers zur Home-Seite wechseln.

Das zweite Problem: Wenn ich auf der Home-Seite(index.html) bin und im Menü auf den Punkt Home klicke, wird im Bereich des Inhalts die Komplette Seite geladen anstatt wieder normal auf die index.html zu wechseln oder nur den Inhalt dieser anzuzeigen.

Habe jetzt schon seit über 2 Std gesucht und leider nichts nützliches gefunden. Hoffe ihr könnt mir weiterhelfen. Am liebsten wären mir Sorcecodes die ich einfach einsetzten muss.

Mfg
 
Werbung:
Bezüglich der History empfehle ich dir Hash Werte zu benutzen. Also zum Beispiel index.html#site=home
Der Wert kann über window.location.hash ausgelesen werden

Für dein zweites Problem habe ich dir mal was geschrieben

Code: 
/**
* User: Gilles
* Date: 02.04.14
* Time: 18:51
*/

function AjaxLinks(config) {

  var options = {
    "ajaxLinkClass" : "ajaxLink",
    "contentContainer" : "#content"
  };

  var __construct = function(_config) {
    if(typeof _config == "undefined") _config = {};
    $.extend(true, options, _config);

    me.init();
  };


  this.init = function() {
    $("."+options.ajaxLinkClass).off("click", loadLink).on("click", loadLink);
  };

  var loadLink = function() {
     var link = $(this).attr("href");
    $.ajax({
      "url" : link,
      "success" : reloadContent
    });
    return false;
  };

  var reloadContent = function(data) {
    var content =  $("<div></div>").append(data).find(options.contentContainer).html();
    $("body").find(options.contentContainer).html(content);

    me.init();

  };



  var me  = this;
  __construct(config);
}

Einsatz:
Code: 
 <script type="text/javascript">
      $(document).ready(function() {
         new AjaxLinks({
             "ajaxLinkClass" : "ajaxLoad",
             "contentContainer" : "#content"
         });
      });
    </script>

Und das Html könnte so aussehen
HTML: 
<body>
   <ul id="nav">
       <li>
           <a class="ajaxLoad" href="index.html">Home</a>
           <a class="ajaxLoad" href="news.html">News</a>
       </li>
   </ul>
   <div id="content">
       <h1>News</h1>
       <p>Das ist News</p>
   </div>
</body>
 
Ich danke dir schon mal für deine Hilfe. Da ich mich erst gerade in HTML5 und CSS3 eingearbeitet habe, würde ich noch gerne wissen wohin ich die AjaxLinks Funktion packen soll. Der 2. Code-Block kommt in den Header wenn ich mich nicht täusche.
 
Werbung:
Den ersten Block packst du am besten in eine eigene Datei und dann ab in den head Block nach jQuery reinladen.
Und danach den zweiten Block einfügen :)
 
Gilles schrieb:
Bezüglich der History empfehle ich dir Hash Werte zu benutzen. Also zum Beispiel index.html#site=home
Der Wert kann über window.location.hash ausgelesen werden
Zum Vergrößern anklicken....

Das möchte ich nochmal aufgreifen. Ich habe das selbe Problem und wollte es mit 'window.location.hash' lösen. Doch es funktioniert einfach nicht.

Code: 
<script>window.location.hash="1234";</script>

Wo ist mein Fehler?
 
Werbung:
Das kann so geschrieben an vielen Dingen liegen. Welchen HTML-Standard nutzt Du? Gibt es einen JavaScript-Fehler? An welcher Stelle im HTML-Code des Dokumentes steht diese Zeile? Kann man sich das online irgendwo ansehen?
 
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
...
...

<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/example.css">

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script>window.location.hash = '1234';</script>

  <script type="text/javascript">
       $(document).ready(function() {
         $(window).scroll(function(){
           $('*[class^="prlx"]').each(function(r){
             var pos = $(this).offset().top;
             var scrolled = $(window).scrollTop();
             $('*[class^="prlx"]').css('top', -(scrolled * 0.5) + 'px');      
          });
         });
       });
     </script>

   <script type="text/javascript">
       $(document).ready(function() {
         $("#m_imp").click(function() {
           $("#main").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
             $("#main").load("impress.php", function() {
               $("#main").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400);
            
             });
           });
         });

       });
     </script>

   <script type="text/javascript">
       $(document).ready(function() {
         $("#m_list").click(function() {
           $("#main").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
             $("#main").load("list.php", function() {
               $("#main").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400);
            
             });
           });
         });

       });
     </script>
   <script type="text/javascript">
       $(document).ready(function() {
         $("#m_che").click(function() {
           $("#main").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
             $("#main").load("cheat.php", function() {
               $("#main").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400);
            
             });
           });
         });

       });
     </script>

  </head>
<body>...</body>
</html>

Ich vermute das der "window.location.hash" an der falschen Stelle sitzt. Er wir in der URL angezeigt, aber eine Verlinkung ist dennoch nicht möglich. Online kannst du es hier sehen.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben