Loading pages via Ajax and displaying titles

Question

A small and possibly simple consultation. I'm loading pages via Ajax like this:

jQuery("div.menu a").addClass("ajax");     
var hash = window.location.hash.substr(1);
var href = jQuery('.ajax').each(function(){
    var href = jQuery(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #wrapper';
        jQuery('#wrapper').load(toLoad)
    }                                           
});
jQuery('a.ajax').click(function(){                        
    var toLoad = jQuery(this).attr('href')+' #wrapper';
    jQuery('h2').fadeOut('slow');
    jQuery('#wrapper').animate( {
      top: '300px',
      opacity: 0
    } ).animate({top:'-300px'}).hide('normal',loadContent);

    window.location.hash = jQuery(this).attr('href').substr(0,jQuery(this).attr('href').length-5);

    function loadContent() {
        jQuery('#wrapper').load(toLoad,'',showNewContent())
    }
    function showNewContent() {

        jQuery('#wrapper').show('slow').animate( {
          top: '0px',
          opacity: 1
        } );
        jQuery('h2').fadeIn('slow');
    }
    return false;
});

While doing this I also have the Title of the current page displayed at the header.php via echo get_the_title(); . Obviously this function is not updated and my question is: Is there a way to fetch the title of the page loaded via Ajax?

Answer 1

I assume that you want to set the title of fetched page to h2? How about changing the click handler like below?

jQuery('a.ajax').click(function(){                        
    var toLoad = jQuery(this).attr('href');
    jQuery('h2').fadeOut('slow');
    jQuery('#wrapper').animate( {
      top: '300px',
      opacity: 0
    } ).animate({top:'-300px'}).hide('normal',loadContent);

    window.location.hash = jQuery(this).attr('href').substr(0,jQuery(this).attr('href').length-5);

    function loadContent() {
        jQuery.get(toLoad, function(data) {
            jQuery('#wrapper').html(data.find('#wrapper')).show('slow').animate( {
              top: '0px',
              opacity: 1
            } );
            jQuery('h2').text(data.find('title').text()).fadeIn('slow');
        });
    }

    return false;
});

Answer 2

//data stores the ajax response
var matches = data.match(/<title>(.*?)<\/title>/);
var pageTitle = matches[1];
document.title = pageTitle;