.append causing IE error

Question

I have the following code, which works fine in FF, but the .append() function s cauding an error in IE. Is anyone able to tell me if there is anything wrong with my code, or if this is an IE problem?

The purpose is to add a hidden field to a form (will be different depending on what the user clicks), and I then submit the form.

$(function(){

    $('a.js-make-profile-image').click(function(){
        $('.append-here').append('<input type="hidden" name="action-type" value="profile-image" />');
        document.forms['attachment-action-form'].submit();
    });

});

The IE debugger is giving the error Unexpected call to method or property access, and this text is being hightlighted within jQuery by the debugger - this.nodeType===1&&this.appendChild(a).

Are you supposed to have that extra semicolon after click(function(){; <--- — Nathan Fitzgerald - Fitzgenius, Feb 10 '12 at 15:53
It looks like it should work. I know that IE can have problem if the rest of the DOM is currupt, maybe some other tag is opened? If you just try .append("test") does it work? Which of the lines causing you problem? — Simon Edström, Feb 10 '12 at 15:54
@NathanFitzgerald: That is superflous, but won't cause a problem. — Guffa, Feb 10 '12 at 15:55
@NathanFitzgerald - Well spotterd, but still getting an error. As for a message - Unexpected call to method or property access (and this text is being hightlighted within jQuery by the debugger - `this.nodeType===1&&this.appendChild(a)`). — David Gard, Feb 10 '12 at 16:15
Instead of `document.forms['attachment-action-form'].submit();`, try `document.forms[0].submit();` assuming you have just the one form on the page. — j08691, Feb 10 '12 at 16:32
@j08691 - Thanks, but it's not that line that is causing an issue - even with it removed the error still occurs. — David Gard, Feb 10 '12 at 16:59
do you have a div with class 'append-here'? It looks like the div Id to me. can you try $('#append-here')? — Asdfg, Feb 10 '12 at 17:03
@DavidGard - Just wanted to try something with that suggestion. Can you post the HTML that you're using and any other JavaScript? — j08691, Feb 10 '12 at 17:09
Which version of IE is it failing on? Is "append-here" a div? — WooHoo, Feb 10 '12 at 17:11

Fabrizio Calderan · Accepted Answer · 2012-02-10T19:50:40.473

5

1) you have an extra ;

$('a.js-make-profile-image').click(function(){;

at the end of this line.
if this don't solve your problem please update your question with the error reported by IE

2) I think you could also have a conflict due to the value of your name attribute.

You have both a type attribute and name="type":
since you can usually access to a DOM element also via <element>.<name> what exactly <input>.type should returns? The element type attribute value or a reference to the input element into the DOM?

so try to change the name attribute value

3) if nothing has changed yet just try to change the code

$('.append-here').append('<input type="hidden" name="type" 
                           value="profile-image" />');

in

$('<input />').attr({
    "type"  : "hidden",
    "name"  : "action-type",
    "value" : "profile-image"
}).appendTo($('.append-here'));

and, as you discovered, be sure that the element append-here is not an empty element.

edited Feb 10 '12 at 19:50

answered Feb 10 '12 at 15:53

Fabrizio Calderan

120,726
26
164
177

Good spot, but that sadly is not causing the issue. As for a message - Unexpected call to method or property access (and this text is being hightlighted within jQuery by the debugger - `this.nodeType===1&&this.appendChild(a)`). – David Gard Feb 10 '12 at 16:16
Good thought, I've changed "type" to "action-type", but I'm still getting the same error. – David Gard Feb 10 '12 at 16:55
Well, it was initially a sad face result, but I have now sorted it. It was happening because my class `append-here` was in an , whcih I guess IE doesn't like. Added `
` and all now seems right with the world. Thanks for your help. – David Gard Feb 10 '12 at 17:15
@DavidGard - You were attempting to append an input element _within_ another input element? – j08691 Feb 10 '12 at 17:20
@DavidGard How bizarre... you should get an error everywhere, not only on IE – Fabrizio Calderan Feb 10 '12 at 17:23
@FabrizioCalderan - I guess the other browsers are just better! – David Gard Feb 13 '12 at 10:44
@DavidGard in this specific case I'd prefer to get an error as IE does. – Fabrizio Calderan Feb 13 '12 at 12:26

score 2 · Answer 2 · answered Feb 10 '12 at 17:15

2

The only way i can duplicate this error is using IE8 and appending the hidden field to something daft like an image tag.

Could you check that '.append-here' is a div? If you could paste the html that would help and which version of IE is it failing on?

answered Feb 10 '12 at 17:15

WooHoo

1,912
17
22

It wasn't a div that I was attempting to append, I was unaware that it had to be. The problem is now solved. Thanks. – David Gard Feb 13 '12 at 10:45

.append causing IE error

2 Answers2

Linked