CODEWITHSUNDEEP
jqueryajax
Jesse Winton
Jesse Winton

Reputation: 696

Getting new page title with .load()

all!

So, I've set up an ajax based site that pulls the new content from a section. Here is my code to accomplish that feat.

$(document).ready(function(event){
  var isAnimating = false,
      firstLoad   = false;

  $(document).on('click', 'a', function(event){
    event.preventDefault();
    var newPage = $(this).attr('href'),
        newTitle = $(document).attr('title');
    document.title = newTitle;
    if( !isAnimating ) changePage(newPage, true);
    firstLoad = true;
  });

  $(window).bind('popstate', function() {
    if(firstLoad) {
      var newPageArray = location.pathname.split('/'),
        newPage = newPageArray[newPageArray.length - 1];
      if( !isAnimating ) changePage(newPage, false);
    }
    firstLoad = true;
  });

  function changePage(url, bool) {
      isAnimating = true;
      $('body').addClass('transition');
      $('.loader').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        loadNewContent(url, bool);
        $('.loader').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
      });
    if(!transitionsSupported()) loadNewContent(url, bool);
  }

  function loadNewContent(url, bool) {
    var section = $('<section class="content-wrap"></section>');
    section.load(url + ' .content-wrap > *', function(responseText){
    document.title = $(responseText).filter("title").text();    
      $('.wrapper').html(section);
      finishLoad();
      var delay = ( transitionsSupported() ) ? 1200 : 0;
      setTimeout(function(){
        $('body').removeClass('transition').addClass('load');
        $('.loader').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
          isAnimating = false;
          $('.loader').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
        });
        if( !transitionsSupported() ) isAnimating = false;
      }, delay);
      if(url!=window.location && bool){
        window.history.pushState({path: url}, '', url);
      }
    });
  }

  window.onkeyup = function(e) {
    if (e.keyCode == 27) window.history.back();
  }

  function transitionsSupported() {
    return $('html').hasClass('csstransitions');
  }

  function finishLoad() {
    $('body').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      $(this).delay(5000).queue(function() { 
        $(this).removeClass('load').dequeue();
      });
    })
  }
});

This works like a charm, but I want to know how to make the .load() function change the page title. The problem I'm running into is that the new content is simply pulled from a section within the new page, so I don't believe that it's able to find the title of the new page. Does anyone have any suggestions for how to make this work and change the page title on complete?

Thanks.

Upvotes: 0

Views: 72

Answers (1)

IlludiumPu36
IlludiumPu36

Reputation: 4304

Try:

var title = document.getElementsByTagName("title")[0].innerHTML;

or for an external page, something like:

$.ajax({
  url: externalURL,
  async: true,
  success: function(data) {
    var matches = data.match(/<title>(.*?)<\/title>/);
    alert(matches[0]);
  }   
});

Upvotes: 1

Related Questions