So far...

$('#container').load(hash + ' #page','', function() { 
    $('#container').fadeIn('fast');
    document.title = $('#title').load(hash + ' #title').text();
    });

...doesn't work. Is there a better/correct way to do this?

FYI: -

• I've added the ID #title the tag (all pages/it's a PHP template).
• The container is .fade(ed)Out beforehand (less important)

Thanks in advance.

So far...

$('#container').load(hash + ' #page','', function() { 
    $('#container').fadeIn('fast');
    document.title = $('#title').load(hash + ' #title').text();
    });

...doesn't work. Is there a better/correct way to do this?

FYI: -

• I've added the ID #title the tag (all pages/it's a PHP template).
• The container is .fade(ed)Out beforehand (less important)

Thanks in advance.

• javascript
• ajax
• jquery

5 Answers 5

The problem is that, at the time you assign to document.title, the $('#title').load(hash + ' #title').text() might not have finished yet. Try setting the new document.title in the callback of that .load.

UPDATE

Try:

$('#container').load(hash + ' #page','', function() { 
    $('#container').fadeIn('fast');
    $('#title').load(hash + ' #title', '', function(data) {
        document.title = $(this).text();
        });
    });

I had the same requirement, to update the title for the page after ajax loads and that's what I used – one request, no need to set special attributes in your HTML:

var contentWrap = $('#content-wrap'),
    contentId = '#content';

$.ajax({
  url: hash.replace(/^#!\//, '') + '.html',
  success: function(text) {
    var oldContent = contentWrap.find(contentId),
        newPage = $(text),
        newContent = newPage.find(contentId);

    oldContent.remove();
    contentWrap.append(newContent);
    // Set New Title
    document.title = newPage.filter('title').text();
  }
});

Do this :

$('#container').load(hash + ' #page','', function(result) { 
  $('#container').fadeIn('fast');
  document.title = $(result).find('#title').text();
});

:)

We wanted to have an effect such that when someone visits our website, one should see the individual page's Title but when you move away, you can see "We'll still miss you... :)" using the below code:

<!-- Active Navigation Script -->
<script>
    var url = window.location;
    $('ul.nav a[href="'+ url +'"]').parent().addClass('active');
    $('ul.nav a').filter(function() {
        return this.href == url;
    }).parent().addClass('active');
</script>

<!-- Tab Title change Script -->
<script>
    $(function() {
    // Get page title
    var pageTitle = $("title").text();

    // Change page title on blur
    $(window).blur(function() {
      $("title").text("We'll still miss you... :)");
    });

    // Change page title back on focus
    $(window).focus(function() {
      $("title").text(pageTitle);
    });
});
</script>

You can see this in action here: http://www.solutelabs.com

Try below code:

.**filter**('title').text()

$('#container').load(hash + ' #page','', function(result) { 
$('#container').fadeIn('fast');
document.title = $(result).filter('title').text();
});