jquery AppendTo & Append Error in Firefox

Question

Hi,

I am getting a strange error using jQuery 1.3.2 and Firefox. I have created a small popup window for an element and I am using the code

  var popupWindow = $($('#template')[0].innerHTML).css(
            'top', top).css(
            'left', left).css(
            'position', 'absolute').css(
            'opacity', '1');

I then use the Append() and AppendTo() functions to basically provide and I try and determine the height and width but get JS exception errors per below

var right = left + $(popupWindow).width(); // empty width, js exception
var bottom = top + $(popupWindow ).height(); //empty height, js exception

popupWindow is shown for the Append() command but then it is impossible to get width, height, elements as they arent visible inside FF-DOM.

In IE everything works fine but not in Firefox?

Does anyone have any ideas as I been trying for few hours now and getting a brick wall.

Answer 1

I'm not entirely sure why you're using

var popupWindow = $($('#template')[0].innerHTML)

which basically translates to

"get the elements that have an id of template (which will implcitly be only one element for valid HTML), then get the first element's innerHTML, then wrap any elements contained within innerHTML in a jQuery object."

Why not just use

var popupWindow = $('#template').css({
                      top : top,
                      left: left,
                      position: 'absolute',
                      opacity: 1 });

Also, might want to consider using a class instead of inline css. Please post the html layout if you need further help.

Answer 2

var popupWindow = $($('#template')[0].innerHTML)

Yeah, you really don't want to do that.

This gets the HTML of template div and sends it to the $() function, which is a multi-purpose function. Depending on what the content of #template was, it might create some HTML (possibly multiple elements, discarding any immediate text content), or it might treat it as a selector and pick matching elements from the page.

(This is not one of my favourite features of jQuery.)

Further, using innerHTML with jQuery has side-effects, in that jQuery adds its own properties to elements to identify them for adding data and event handlers. If you copy the innerHTML on IE<8 (which has a bug where it thinks attributes and properties are the same thing), you will inadvertently be copying those jQuery internal IDs, making two copies of the same element and confusing the library. You are supposed to use .html() to get the markup with jQuery; this uses a vile broken RegExp to try to remove the internal ID attributes before handing you the markup.

(This is also not one of my favourite features of jQuery.)

If you simply want to set the styles on the template element, say so:

var popupWindow= $('#template');
popupWindow.css({top: '1px', left: '2px', ...});

If you want to make a copy of the template and set the styles on that:

var popupWindow= $('#template').clone();
popupWindow.css(...);

Also there is no need to say:

 $(popupWindow)

as popupWindow is already a jQuery wrapper. You're just making it make another copy of the internal element list.

js exception

What exception? Personally I don't get an exception, but it very much depends on what you put inside #template.