How to change page title of root page when loading ajax content?
===

I'm sure this is very simple, but I'm not getting it. 

I'm using the following AJAX script to load content from a particular div of an external page into a div of the same name on my root page. 

        $(function() {
    
        var newHash      = "",
            $mainContent = $("#main-content"),
            $pageWrap    = $("#page-wrap"),
            $el;
    
    
        $(document).delegate(".dyn a", "click", function() {
            window.location.hash = $(this).attr("href");
            return false;
        });	
    	
    	
        $(window).bind('hashchange', function(){
    
            newHash = window.location.hash.substring(1);
    
            if (newHash) {
    			
                $mainContent
                    .find("#guts")
                    .fadeOut(200, function() {
                        $mainContent.hide().load(newHash + " #guts", function() {
                            $mainContent.fadeIn(200, function() {
                                $pageWrap.animate({
    	
                                });
    							
                            });
                            $(".dyn a").removeClass("current");
                            $(".dyn a[href="+newHash+"]").addClass("current");
                        });
                    });
            };
    
        });
        $(window).trigger('hashchange');
    });

Could someone please help me with changing the title of the root page for the title of the page I am loading?

I have tried using:

    var newTitle = $(responseHtml).filter('title').text();
    document.title = newTitle;

As it mentions in [this][1] post, which almost worked but stopped the ajax functioning correctly. I'm not sure, though whether I am placing this in the right place. 

Thanks in advance!


  [1]: http://stackoverflow.com/questions/7599365/get-the-title-of-a-requested-page-using-jquery-ajax