View Full Version : returned ajax data stopping JS functionality.... :(

12-05-2008, 04:10 PM
Hi all,

ok, below is a really cut down code example of a problem im having. this is from a mysql/php project management system im writing.

when the data first loads the line:

<script>document.getElementById('DGL000262').innerHTML = '(7/7 hours)'</script>

basically just inserts some total values into the header rows. this works fine. the problem is when i use ajax to perform some of the functions on the page. for example the copytimesheet() function. this basically goes off, does some php/mysql stuff and should return back the newly added timesheet into the list. this works but then the above innerHTML statement seems to get ignored.

i tried this using firebug and the response is coming back fine (no errors etc) and i can save this as a standard html file and it works fine. any ideas? its almost like if i use document.getElementBy(... and ajax, there is some unknown issue. both IE7 and FF have the issues. (for an IE company system so no testing on ie6, opera etc). BUT i have used doc.getElementBy successfully in other areas of the system.

<div><a href="timesheetlist_byproject.php"><img src="images/tablehead_timesheet-employee.jpg" width="618" height="21" border="0" /></a></div>
<div id='timesheetdetails'>
<div class='layouttable'>
<table class='listtable' cellspacing='0'>
<th style='width:67px'>Approval</th>
<th style='width:60px'>Date</th>
<th style='width:40px; text-align:right'>Hours</th>
<th style='width:2px;'>&nbsp;</th>
<th style='width:120px;'>Employee</th>
<th>Approved by</th>
<th style='width:46px'>&nbsp;</th>
<th style='width:46px'>&nbsp;</th>
<tr class="th2">
<th colspan='8'><span class='hoursWorked' id='DGL000262'></span><a href="javascript:collapseTableRows('DGL000262')">DGL000262-TB test 123</a></th>
<tr class='' onmouseout='this.className=""' onmouseover='this.className="rowRollover"' id='DGL000262-1'>
<td><img src='images/icon_greenStar.gif' alt='Approved' align='absmiddle' /> <img src='images/icon_hardhat.gif' alt='Work' align='absmiddle' /> </td>
<td onClick='document.location.href="timesheet.php?id=77"' style='cursor:hand'>03.12.2008</td>
<td onClick='document.location.href="timesheet.php?id=77"' style='cursor:hand; text-align:right'>7</td>
<td onClick='document.location.href="timesheet.php?id=77"' style='cursor:hand'>&nbsp;</td>
<td onClick='document.location.href="timesheet.php?id=77"' style='cursor:hand'>Chelsea Moore</td>
<td onClick='document.location.href="timesheet.php?id=77"' style='cursor:hand'>Liam Tipler - 05.12.2008</td>
<td style='text-align:right'><a href='javascript:;' onclick="copytimesheet('77','Work' ,'0')"><img src='images/microbutton_copy_0.gif' alt='Copy' name='copy' id='copy' onmouseover="MM_swapImage('copy','','images/microbutton_copy_1.gif',0)" onmouseout="MM_swapImgRestore()" class='noprint' /></a></td>
<td style='text-align:right'><a href='javascript:;' onclick="deletetimesheet('77', 'timesheets', 'Work', '1')"><img src='images/microbutton_delete_0.gif' alt='Delete' name='delete' id='delete' onmouseover="MM_swapImage('delete','','images/microbutton_delete_1.gif',0)" onmouseout="MM_swapImgRestore()" class='noprint' /></a>
<script>document.getElementById('DGL000262').innerHTML = '(7/7 hours)'</script>
</div layouttable>
</div collapse>

thanks all... this is really confusing me :( :confused:

12-08-2008, 10:37 AM
bump ? :(

12-08-2008, 02:51 PM
don't forget that js in a manual dom update won't run unless you eval it. when your ajax call is complete have it call a function that deals with your lil innerHTML stuff.

personally i try to just keep all js out of the updated area when possible.

ie in particular HATES working with manual dom edits from what i've seen.

12-08-2008, 03:28 PM
thanks man! i thought there was something odd going on!

fixed it by writing to a function and then loading the function when a blank image loads at the bottom of the page :) not ideal but works fine