Вставка элементов HTML DOM, загруженных из файла XML, с помощью jQuery

Question

Если есть более простой / лучший способ сделать это, скажите, пожалуйста (я только начинаю изучать JS, первый язык), но вот что я пытаюсь сделать:

У меня есть XML-файл, содержащий набор маркеров для карт Google, то есть:

<?xml version="1.0" encoding="UTF-8"?>
<markers>
  <marker name="Our Venue" lat="32.735873" lng="-117.255323" icon="wedding">
    &lt;div id="info"&gt; &lt;h2&gt;Title&lt;/h2&gt; &lt;a href="http://site.com/link.html"&gt;Official web site&lt;/a&gt; &lt;p&gt;Blah blah blah!&lt;/p&gt; &lt;/div&gt;
  </marker>
...

Я могу заставить jQuery загрузить всю информацию и проанализировать ее в google.maps.Marker (s):

    jQuery.get("map_data.xml", {}, function(data) {
        jQuery(data).find("marker").each(function() {
            var marker = jQuery(this);
            var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng")));
            var title = marker.attr("name");
            var icon = marker.attr("icon");
            var markerContent = marker.contents();
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: crIconRegistry[icon],
                title: title
            });

Теперь я хотел бы, чтобы я щелкнул маркер карты, чтобы он вставил содержимое HTML из файла XML в DIV на странице, что-то вроде этого:

jQuery.jcps.insertFromMap = function (speed, target, markerContent) {
    if (speed == 0) {
    $(target).html(markerContent);
}
else {  
    $(target).fadeToggle(speed, function(){$(this).html(markerContent);}).fadeToggle(speed);
    }
}

google.maps.event.addListener(marker, "click", function() {
    jQuery.jcps.insertFromMap(crFaderSpeed, crDefaultPanel, markerContent);
});

Однако, когда я пытаюсь это сделать (в safari, я еще не тестировал другие) я получаю следующую ошибку: «WRONG_DOCUMENT_ERR: DOM Exception 4: Узел использовался в документе, отличном от того, который его создал»

TIA за любую помощь!

Answer 1

ваш исходный код потерпел неудачу, потому что вы пытались объединить dom-узлы из одного документа в другой - сафари с этим не согласен (Firefox 7, Chrome 15 этого не делают, хотя, вероятно, должны).Как указал Ритеш, вы можете вызвать функцию dom importNode.

, однако, чтобы избежать глубокой копии импортируемого узла dom, используйте adoptNode.

, это поддерживаетсявсеми основными браузерами, включая, например, 9 (лично проверено на Safari 5, Chrome 15, Firefox 7).

надеюсь, это полезная дополнительная информация,

с уважением, carsten

Answer 2

Для получения более подробной информации, пожалуйста, смотрите отличное объяснение на Кросс-браузерные сценарии с importNode ()

Вы должны проверить, поддерживается ли importNode, прежде чем добавлять markerContent в target.

Если вы используете jQuery 1.5, см. parseXML () , который, похоже, решил эту проблему (хотя я сам не проверял).

Answer 3

Решено, хотя я не уверен, почему это имело значение. В моем предыдущем коде дважды использовалось имя переменной «marker»: сначала для хранения объекта XML jQuery, а затем для определения объекта google.maps.Marker. Должен быть конфликт, о котором я не знал, потому что изменение имени переменной решило проблему. Пересмотренный код:

jQuery.get("map_data.xml", {}, function(data) {
        jQuery(data).find("marker").each(function() {
            var node = jQuery(this);
            var latlng = new google.maps.LatLng(parseFloat(node.attr("lat")), parseFloat(node.attr("lng")));
            var title = node.attr("name");
            var icon = node.attr("icon");
            var markerContent = node.contents().text();
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: crIconRegistry[icon],
                title: title
            });
            google.maps.event.addListener(marker, "click", function() {
                jQuery.jcps.insertFromMap(crFaderSpeed, crDefaultPanel, markerContent);
            });
        });
    });

Спасибо за помощь!

Answer 4

Может ли быть так, что вы используете markerContent более одного раза? Это может привести к чудесным вещам: пример . Обходной путь - использовать .clone : пример