CODEWITHSUNDEEP
javascriptjqueryajaxhtml-title
Benek Lisefski
Benek Lisefski

Reputation: 159

Updating HTML title after AJAX page load

When I load new pages via AJAX I need to of course update the HTML title to match the new page. The code below is something I have used successfully in past projects but for some reason it's not working here.

ajaxLoad = function(html) {
    init();
    // init google map
    initMap();
    // change html title
    var HTMLtitle = $(".content > section:first-of-type").attr("data-title");
    $(document).prop('title', HTMLtitle);
    document.title = HTMLtitle;
    // Used for popState event (back/forward browser buttons)
    changedPage = true;
  }

This is just a part of the javascript and you can view the rest in context if needed on the live site.

Live site: http://dma.nz/practice/

Click the top right links in the main nav to go to other pages. In my testing the title seems to update sometimes on the first page change but then never works on subsequent page changes. Most times it doesn't work at all and the title never updates. All of those top level pages have the proper HTML title defined in the data attribute, but some part of the function is failing and not updating the title and I cannot find where it's borked.

Can anyone please offer help on what I'm doing wrong or propose a better way to update the title on each AJAX page load?

Upvotes: 0

Views: 829

Answers (1)

Dinh Tran
Dinh Tran

Reputation: 614

As you're aware of the javascript error in initMap function

Uncaught TypeError: Cannot read property 'firstChild' of null

That exception breaks all your javascript below that line. Just fix it and your code will work, just like your main page: http://dma.nz/practice/

Upvotes: 1

Related Questions