Обновление заголовка HTML после загрузки страницы AJAX

Question

Когда я загружаю новые страницы через AJAX, мне, конечно, нужно обновить заголовок HTML, чтобы он соответствовал новой странице. Код ниже - это то, что я успешно использовал в прошлых проектах, но по какой-то причине он здесь не работает.

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;
  }

Это только часть javascript, и вы можете просмотреть остальное в контексте, если это необходимо, на живом сайте.

Живой сайт: http://dma.nz/practice/

Нажмите на верхние правые ссылки в главном меню, чтобы перейти на другие страницы. В моем тестировании заголовок иногда обновляется при изменении первой страницы, но затем не работает при последующих изменениях страницы. В большинстве случаев это не работает вообще, и название никогда не обновляется. Все эти страницы верхнего уровня имеют правильный заголовок HTML, определенный в атрибуте data, но некоторая часть функции не работает и не обновляет заголовок, и я не могу найти, где он скрыт.

Может кто-нибудь предложить помощь в том, что я делаю неправильно или предложить лучший способ обновить заголовок на каждой странице загрузки AJAX?

Answer 1

Как вы знаете об ошибке JavaScript в функции initMap

Uncaught TypeError: Невозможно прочитать свойство 'firstChild' из null

Это исключение нарушает весь ваш JavaScript ниже этой строки. Просто исправьте это, и ваш код будет работать, как и ваша главная страница: http://dma.nz/practice/