Почему я не могу заставить этот пример PJAX работать?

Question

Эта страница показывает, как использовать PJAX в d3 для загрузки внешних файлов HTML: https://gist.github.com/mbostock/1367999

Я сделал точную копию этого: https://dl.dropboxusercontent.com/u/1531353/Misc/Docudocker/trialpjax/trial.html

Однако, моя версия не работает. Я получаю ошибку DOM, когда я нажимаю ссылку (вместо того, чтобы html загружался на страницу). Я попытался использовать консоль Chrome, чтобы выяснить, что именно вызывает ошибку DOM, безрезультатно. Что-то я забыл скопировать?

Answer 1

При загрузке pjax("ul li a", "#main"); переменная content устанавливается в "#main"

Таким образом, в этой функции:

function load(href) { 
    d3.html(href, function(fragment) { 
     var target = d3.select(content).node(); 
     target.parentNode.replaceChild(d3.select(fragment).select(content).node(), target); 
     pjax(links, content); // reapply 
    }); 
    } 

В строке:

target.parentNode.replaceChild(d3.select(fragment).select(content).node(), target); 

Он ищет содержимое #main, в пределах загруженного фрагмента документа.

Однако в вашем случае нет #main, поэтому он получает значение null. Когда вы пытаетесь вызвать replaceChild с нулевым значением, вы получаете ошибку, которую вы испытываете.

Чтобы исправить это, установите другие страницы вверх, как он это сделал, с #main в каждом.