javascript - IE8 append on $(document).ready() -

javascript - IE8 append on $(document).ready() -

i'm aware there similar questions have looked @ several , none have provided , actual solution.

i have function populates table row when page loads if there items fill with. works fine in browsers except ie8. if refresh page works should, in ie8 if navigate page table unchanged. have set break points in js in developer tools , function called , reached end without error , when examined objects table did contain rows supposed far object concerned rows not rendered in actual table on page.

here code @ bottom of page:

<script type="text/javascript"> $(document).ready(function () { addtotickettable('12345'); }); </script>

any thoughts?

edit

yes using tbody , function works fine when called selecting seat on page or refreshing page. it's when navigating page doesn't work correctly.

as requested here code addtotickettable function.

function addtotickettable(seatid) { var zone = $("#ddlsections").val(); var secttext = $("#ddlsections option:selected").text(); var sectname = secttext.split(":")[0] var sect = secttext.split(" ")[0]; if (secttext.tolowercase().indexof(" box") >= 0) { sect += " " + secttext.split(" ")[1]; } var seat = "best available"; var pricetype = -1; var seatinfo = ""; if ($(".dvseat").length > 0) { var arrinfo = document.getelementbyid(seatid).getelementsbytagname("input")[0].value.split(","); pricetype = arrinfo[4]; sect = arrinfo[3]; if ($("#" + seatid).attr("class").indexof(" box") >= 0) { sect += " box"; } seat = arrinfo[0] + arrinfo[1]; if ($("#" + seatid).attr("class").indexof("restrictedview") > -1) { seatinfo = "restricted view"; } if ($("#" + seatid).attr("class").indexof("standingseat") > -1) { seatinfo = "standing ticket"; } if ($("#" + seatid).attr("class").indexof("wheelchair") > -1) { seatinfo = "wheel chair space"; } if ($("#" + seatid).attr("class").indexof("behindconductor") > -1) { seatinfo = "behind conductor"; } if ($("#" + seatid).attr("class").indexof("nosurtitles") > -1) { seatinfo = "surtitles not visible"; } if ($("#" + seatid).attr("class").indexof("restrictedlegroom") > -1) { seatinfo = "restricted leg room"; } zone = arrinfo[2]; } var tdsect = document.createelement("td"); tdsect.innerhtml = sectname; var tdseat = document.createelement("td"); tdseat.innerhtml = seat; if (seatinfo.length > 0) { tdseat.innerhtml += " (" + seatinfo + ")"; } var hdseat = document.createelement("input"); hdseat.id = "tblhd" + seatid; hdseat.classname = "seathd"; hdseat.type = "hidden"; hdseat.value = seatid; $(tdseat).append(hdseat); var tdticket = document.createelement("td"); var ddl = document.createelement("select"); ddl.id = "ddlticket" + seatid; ddl.classname = "ddlticket"; var ddlstr = ""; if (document.getelementbyid("ddl" + zone) != null) { ddlstr = "ddl" + zone; } else { ddlstr = "ddl" + sect.split(":")[0]; if (ddlstr.indexof(" ") > -1) { ddlstr = ddlstr.split(" ")[0]; } } $("#" + ddlstr + " option").each(function () { var arrval = this.value.split(','); if (arrval[0] == zone) { var selected = false; if (pricetype != null) { if (this.value.split(',')[1] == pricetype) { selected = true; } } if (selected) { $(ddl).append($("<option></option>").attr("value", this.value).text(this.text).attr("selected", "true")); } else { $(ddl).append($("<option></option>").attr("value", this.value).text(this.text)); } } }); $(ddl).change(function () { $("#lblprice" + seatid).html($(this).val().split(',')[2]); updateseatinfo(); }); $(tdticket).append(ddl); var tdprice = document.createelement("td"); var lblprice = document.createelement("span"); lblprice.id = "lblprice" + seatid; $(tdprice).append(lblprice); var tdremove = document.createelement("td"); var btnremove = document.createelement("span"); btnremove.classname = "btnrem"; $(btnremove).click(function () { remseat(seatid); }); $(tdremove).append(btnremove); var tr = document.createelement("tr"); tr.id = "tr" + seatid; $(tr).append(tdsect); $(tr).append(tdseat); $(tr).append(tdticket); $(tr).append(tdprice); $(tr).append(tdremove); $("#tblseats tbody").append(tr); $("#lblprice" + seatid).html($(ddl).val().split(',')[2]); }

so i'm speculating little here since plenty code wasn't provided determine problem, i'll share experience appending rows in ie8.

more likely, have simple table construction this:

<table> <tr> <th>header</th> </tr> <tr> <td>stuff</td> </tr> </table>

and script this:

<script> $("table").append("<tr><td>more stuff</td></tr>"); </script>

well, ie8 doesn't allow append straight <table> element. instead, requires set table construction correctly , append <tbody> element instead. so:

<table> <thead> <tr> <th>header</th> </tr> </thead> <tbody> <tr> <td>stuff</td> </tr> </tbody> </table>

and jquery have alter reflect append <tbody> element:

<script> $("tbody").append("<tr><td>more stuff</td></tr>"); </script>

javascript jquery internet-explorer-8