views:

367

answers:

1

This is working, but I'm not being able to set an index.html file on my server root where i can specify the first page to go. It also get very buggy in some situations. Basically it's a common site (menu > content) but the idea is to load the content without refreshing the page, defining the div to load the content, and make each page accessible by the url. One of the biggest problems here it's dealing with all url situations that may occur. The ideal would be to have a rel="divToLoadOn" and then pass it on my loadContent() function... so I would like or ideas/solutions for this please.

Thanks in advance!


//if page comes from URL
 if(window.location.hash != ''){
  var url = window.location.hash;
  url = '..'+url.substr(1, url.length);
  loadContent(url);
 }
 //if page comes from an internal link
 $("a:not([target])").click(function(e){
  e.preventDefault();
  var url = $(this).attr("href");
  if(url != '#'){
   loadContent($(this).attr("href"));
  }
 });


 //LOAD CONTENT
 function loadContent(url){
  var contentContainer = $("#content");
  //set load animation
  $(contentContainer).ajaxStart(function() {
   $(this).html('loading...');
  });
  $.ajax({
   url: url,
   dataType: "html",
   success: function(data){
    //store data globally so it can be used on complete
    window.data = data;
   },
   complete: function(){
    var content = $(data).find("#content").html();
    var contentTitle = $(data).find("title").text();
    //change url
    var parsedUrl = url.substr(2,url.length)
    window.location.hash = parsedUrl;
    //change title
    var titleRegex = /<title>(.*)<\/title>/.exec(data);
    contentTitle = titleRegex[1];
    document.title = contentTitle;
    //renew content
    $(contentContainer).fadeOut(function(){
     $(this).html(content).fadeIn();
                                });
                        });
             }
A: 

highlighted the code and yes ajax is returning an html page which a grab a specific div to show. any ideas to solve this? thanks!

Bruno