Search jQuery

jQuery Forum

Using jQuery

davisty

IE8 is not appending to div with jQuery .append

Answered

Need more info
Working on it
Answered

in Using jQuery • 9 years ago

Hello,

Im having a problem with the jquery .append in IE8.

Im displaying a model screen of a div section that has been built with the .append method.

The modal works fine in FF and Chrome, but AS USUAL, IE is not working correctly. The data is not being appended to the div. When I put in in IE in IE8 mode it works fine.

Does anyone have a workaround for this issue? ... Besides praying that MS just goes away ...

Thank You

Replies(12)

Kevin B

Re: IE8 is not appending to div with jQuery .append

9 years ago

what do you mean by this?

When I put in in IE in IE8 mode it works fine

it works in IE 8 standards but not IE8 compat or IE7 mode? this would mean it is an IE7 bug, not IE 8 and it rules out a lot of other possibilities if that is the case.

-- Kevin

davisty

Re: IE8 is not appending to div with jQuery .append

9 years ago

When I run it in IE8 mode it works fine.

When I put it in quirks mode, or IE7 mode that's when I get the problem. What's weird is the IE debugger isnt catching anything.

I have a jQuery book and it specifically mentions this problem, but, it says that jQuery fixes this

Kevin B

Re: IE8 is not appending to div with jQuery .append

9 years ago

i would have to see the code that you are having problems with, is the html that you are appending all valid?

-- Kevin

davisty

Re: IE8 is not appending to div with jQuery .append

9 years ago

$("#modal").empty();
    $("#modal").append('<table width="400">');
    $("#modal").append('<tr><td class="tableHeaderCLS" background="/ship/bgblue1.gif">Locations</td><td class="tableHeaderCLS" background="/ship/bgblue1.gif">Mileage</td></tr>');
    $.each(
    jsonp.route.locations,
    function(i) {
    var optimize = jsonp.route.locations[i].street + ' ' + jsonp.route.locations[i].adminArea5 + ' ' + jsonp.route.locations[i].adminArea3 + ' ';
    $("#modal").append('<tr class="trmodal"><td class="labelCLS tdmodal" width="350">' + optimize + '</td><td class="labelCLS tdmodal" width="50">' +  miles[i] + '</td></tr>');
    optimize = null;
      }
    );
    $("#modal").append('</table>');
    $("#modal").dialog("destroy");

Kevin B

Re: IE8 is not appending to div with jQuery .append

9 years ago

you can't append partial elements to a div. try reorganizing that a bit..

var html = [];
html.push('<table width="400">');
html.push('<tr><td class="tableHeaderCLS" background="/ship/bgblue1.gif">Locations</td>');
html.push('<td class="tableHeaderCLS" background="/ship/bgblue1.gif">Mileage</td></tr>');
$.each( jsonp.route.locations, function(i) {
html.push('<tr class="trmodal"><td class="labelCLS tdmodal" width="350">');
html.push(jsonp.route.locations[i].street);
html.push(' ');
html.push(jsonp.route.locations[i].adminArea5);
html.push(' ');
html.push(jsonp.route.locations[i].adminArea3);
html.push(' ');
html.push('</td><td class="labelCLS tdmodal" width="50">');
html.push(miles[i]);
html.push('</td></tr>');
});
html.push('</table>');
html = html.join("");
$("#modal").dialog("destroy").html(html);

This way of doing it involves creating an array of strings and then joining them in the end, and appending all at once.

-- Kevin

davisty

Re: IE8 is not appending to div with jQuery .append

9 years ago

I dont understand what you mean by partial elements?

Do you mean, for example, var yada = 'part 1' + part1 + 'part2' + part2;

Kevin B

Re: IE8 is not appending to div with jQuery .append

9 years ago

appending "<table>" results in "<table></table>" and appending "</table>" is invalid or may end up appending another "<table></table>"

-- Kevin

davisty

Re: IE8 is not appending to div with jQuery .append

9 years ago

Ok, now Im completely lost.

Ive used this method many times using just regular strings. Error messages and such.

Is there another way of appending to a div, with it only appending the string value Im sending.

How does it know to append a "</table>" with a "<table>" string?

Can I use insertAfter?

Kevin B

Re: IE8 is not appending to div with jQuery .append

9 years ago

no, jquery only appends complete elements, not parts of elements. a complete <table> tag consists of both an opening tag and a closing tag. if the string you pass into append( or insertBefore, insertAfter, appendAfter, after, before, etc...) is only an opening tag and the tag you are opening is only complete if it has both an opening and closing tag, both an opening tag and closing tag will be appended.

this isn't done by jQuery, it is the native behavior of the browser's .innerHTML method.

-- Kevin

davisty