Skip to main content

Bug Tracker

Side navigation

#5328 closed bug (invalid)

Opened October 06, 2009 04:43PM UTC

Closed December 02, 2010 08:07AM UTC

Last modified March 10, 2012 11:17AM UTC

replaceWith - "node cannot be inserted ..."

Reported by: Ghodmode Owned by: Ghodmode
Priority: major Milestone: 1.4
Component: core Version: 1.3.2
Keywords: Cc: ghodmode@ghodmode.com
Blocked by: Blocking:
Description

I'm trying to do image replacement on a click event using the replaceWith function and a list of images. When I click the image disappears entirely and I get the error (in Firebug console window):

'Node cannot be inserted at the specified point in the hierarchy" code: "3

http://home/dev/planeticeland/js/jquery-1.3.2.min.js

Line 12'

Here's some code:

HTML:

<div id="sidebar-form">

<div class="img-wrapper">

<img alt="iceland" src="images/Iceland_map_main.png" usemap="#map"/>

</div>

<map name="map">

<area shape="circle" coords="50,93,7"

alt="Reykjavík Area" title="Reykjavík Area" nohref="nohref" />

JavaScript:

var maps = [];

maps['main'] = new Image();

...

maps['Reykjavík_Area'] = new Image();

...

for ( i in maps ) {

var map_name;

map_name = 'images/Iceland_map_'+i+'.png';

maps[i].src = map_name;

maps[i].useMap = '#map';

}

$(document).ready(function(){

var areas = $('area');

for ( var i=0; i<areas.length; i++ ) {

$(areas[i]).bind('mouseenter mouseleave click', mapHilight);

};

});

function mapHilight(event){

$('#sidebar-form .img-wrapper img:first').replaceWith( maps[place.replace(/ /, '_')] );

}

It works fine on the mouseenter and mouseleave events. The error message only occurs on the click event.

The following code works, but doesn't use jQuery functions:

var sidebar_form = document.getElementById('sidebar-form');

var img_wrapper;

var sidebar_divs = sidebar_form.getElementsByTagName('DIV');

for ( var i=0; i<sidebar_divs.length; i++ ) {

if (sidebar_divs[i].className == 'img-wrapper') {

img_wrapper = sidebar_divs[i];

break;

}

}

var mapImage = img_wrapper.getElementsByTagName('IMG')[0];

img_wrapper.removeChild(mapImage);

img_wrapper.appendChild( maps[place.replace(/ /, '_')] );

It identifies the containing element and the image, removes the image, than appends the replacement image. Isn't that pretty much what the replaceWith function is supposed to do?

Attachments (0)
Change History (2)

Changed November 08, 2010 09:33PM UTC by rwaldron comment:1

owner: → Ghodmode
status: newpending

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, test against the jQuery 0 GIT version to ensure the issue still exists. Be Excellent to eachother!

Changed December 02, 2010 08:07AM UTC by trac-o-bot comment:2

resolution: → invalid
status: pendingclosed

Automatically closed due to 14 days of inactivity.