2 Ajax divs conflicting
I use this code and the other td's have the same showDetails code
echo '<td width=25 onclick="toggleSlijtd('.$row['id'].')"><img title="'.htmlentities($lang['slijtdeel_minus']).'" src="images/icon/arrow_minus.png"></td>
<td width=25 align="right" onclick="setHighlighted(this),showDetails('.$row['id'].');">'.$row['aantal_huidig'].'</td>';
showDetails makes the panel come down with some more information, the toggleSlijtd makes the number decrease by one. They are working but:
- the new number is shown in the wrong place;
- the new number is only shown when showDetails is used once;
What is wrong with my code? Or should I use an other code completely. I hope not because time is running out.
My Ajax script:
var xmlhttp;
var hold_rowid="";
function toggleSlijtd(str)
{
hold_rowid=str;
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="inc开发者_C百科ludes/js/ajax_toggle_slijtdeel.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("row"+hold_rowid).innerHTML=xmlhttp.responseText; //this now identifies which cell to target and change.
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
php file:
mysql_select_db($database, $con);
$id = $_GET["q"];
$sql = "SELECT aantal_huidig FROM slijtdelen WHERE id = '".$id."' ";
$query = mysql_query($sql, $con) or die(mysql_error());
// Verminder hoeveelheid
while($myrow = mysql_fetch_assoc($query))
{
$hoeveelheid = ($myrow['aantal_huidig'] - 1);
}
$sql="UPDATE slijtdelen SET aantal_huidig = '".$hoeveelheid."' WHERE id = '".$id."' ";
$query = mysql_query($sql, $con) or die(mysql_error());
// Stuur wel of geen icoon terug
if($hoeveelheid > 0)
{
echo '<td width=25 onclick="toggleSlijtd('.$row['id'].')"><img title="'.htmlentities($lang['slijtdeel_minus']).'" src="images/icon/arrow_minus.png"></td>
<td width=25 align="right">'.$hoeveelheid.'</td>';
}
else
{
echo '';
}
?>
Rendered page:
</table><table id="top_header" cellspacing="0" cellpadding="0" width="100%">
<tr class="top_table floating header">
<td width=10 class="top_table_start"></td>
<td width=100>Bestelnr. <a href="/slijtdelen.php?sort_name=slt.bestelnummer&sort=asc" title="Sorteer oplopend"><img src="images/icon/asc.png" ></a> <a href="/slijtdelen.php?sort_name=slt.bestelnummer&sort=desc" title="Sorteer aflopend"><img src="images/icon/desc.png" ></a></td>
<td width=350>Omschrijving <a href="/slijtdelen.php?sort_name=slt.omschrijving&sort=asc" title="Sorteer oplopend"><img src="images/icon/asc.png" ></a> <a href="/slijtdelen.php?sort_name=slt.omschrijving&sort=desc" title="Sorteer aflopend"><img src="images/icon/desc.png" ></a></td>
<td width=100 colspan="3">Voorraad <a href="/slijtdelen.php?sort_name=slt.aantal_huidig&sort=asc" title="Sorteer oplopend"><img src="images/icon/asc.png" ></a> <a href="/slijtdelen.php?sort_name=slt.aantal_huidig&sort=desc" title="Sorteer aflopend"><img src="images/icon/desc.png" ></a></td>
<td width=100 colspan="2">In bestelling <a href="/slijtdelen.php?sort_name=slt.in_bestelling&sort=asc" title="Sorteer oplopend"><img src="images/icon/asc.png" ></a> <a href="/slijtdelen.php?sort_name=slt.in_bestelling&sort=desc" title="Sorteer aflopend"><img src="images/icon/desc.png" ></a></td>
<td width=125 colspan="2">Prijs per stuk <a href="/slijtdelen.php?sort_name=slt.prijs &sort=asc" title="Sorteer oplopend"><img src="images/icon/asc.png" ></a> <a href="/slijtdelen.php?sort_name=slt.prijs &sort=desc" title="Sorteer aflopend"><img src="images/icon/desc.png" ></a></td>
<td width=150>Catagorie <a href="/slijtdelen.php?sort_name=cat.catagorie&sort=asc" title="Sorteer oplopend"><img src="images/icon/asc.png" ></a> <a href="/slijtdelen.php?sort_name=cat.catagorie&sort=desc" title="Sorteer aflopend"><img src="images/icon/desc.png" ></a></td>
<td width=150>Leverancier <a href="/slijtdelen.php?sort_name=adr.klantnaam&sort=asc" title="Sorteer oplopend"><img src="images/icon/asc.png" ></a> <a href="/slijtdelen.php?sort_name=adr.klantnaam&sort=desc" title="Sorteer aflopend"><img src="images/icon/desc.png" ></a></td>
<td width=10 class="top_table_end"></td>
</tr><tr onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);">
<td onclick="setHighlighted(this),showDetails(106);"></td>
<td onclick="setHighlighted(this),showDetails(106);">980SUTA12</td>
<td onclick="setHighlighted(this),showDetails(106);">Boor HSSE PV10 980SUTA Ø12</td><td width=25 onclick="toggleSlijtd(106)"><img title="Haal één uit voorraad" src="images/icon/arrow_minus.png" /></td>
<td width=25 align="right" onclick="setHighlighted(this),showDetails(106);">12</td><td width=50 onclick="setHighlighted(this),showDetails(106);"></td><td width=65 onclick="setHighlighted(this),showDetails(106);"></td><td width=35 onclick="setHighlighted(this),showDetails(106);"></td><td width=75 align="right">€ 21.02</td><td width=50 onclick="setHighlighted(this),showDetails(106);"></td>
<td onclick="setHighlighted(this),showDetails(106);"></td>
<td onclick="setHighlighted(this),showDetails(106);">Heku Tools</td>
<td onclick="setHighlighted(this),showDetails(106);"></td>
</tr>
<tr>
<td colspan="13"> <div id="details106"></div> </td>
</tr><tr onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);">
<td onclick="setHighlighted(this),showDetails(104);"></td>
<td onclick="setHighlighted(this),showDetails(104);">980SUTA121</td>
<td onclick="setHighlighted(this),showDetails(104);">Boor HSSE PV10 980SUTA Ø12,1</td><td width=25 onclick="toggleSlijtd(104)"><img title="Haal één uit voorraad" src="images/icon/arrow_minus.png" /></td>
<td width=25 align="right" onclick="setHighlighted(this),showDetails(104);">4</td><td width=50 onclick="setHighlighted(this),showDetails(104);"></td><td width=65 onclick="setHighlighted(this),showDetails(104);"></td><td width=35 onclick="setHighlighted(this),showDetails(104);"></td><td width=75 align="right">€ 39.32</td><td width=50 onclick="setHighlighted(this),showDetails(104);"></td>
<td onclick="setHighlighted(this),showDetails(104);"></td>
<td onclick="setHighlighted(this),showDetails(104);">Heku Tools</td>
<td onclick="setHighlighted(this),showDetails(104);"></td>
</tr>
<tr>
<td colspan="13"> <div id="details104"></div> </td>
</tr><tr onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);">
<td onclick="setHighlighted(this),showDetails(105);"></td>
<td onclick="setHighlighted(this),showDetails(105);">980SUTA61</td>
<td onclick="setHighlighted(this),showDetails(105);">Boor HSSE PV10 980SUTA Ø6,1</td><td width=25 onclick="toggleSlijtd(105)"><img title="Haal één uit voorraad" src="images/icon/arrow_minus.png" /></td>
<td width=25 align="right" onclick="setHighlighted(this),showDetails(105);">5</td><td width=50 onclick="setHighlighted(this),showDetails(105);"></td><td width=65 onclick="setHighlighted(this),showDetails(105);"></td><td width=35 onclick="setHighlighted(this),showDetails(105);"></td><td width=75 align="right">€ 16.09</td><td width=50 onclick="setHighlighted(this),showDetails(105);"></td>
<td onclick="setHighlighted(this),showDetails(105);"></td>
<td onclick="setHighlighted(this),showDetails(105);">Heku Tools</td>
<td onclick="setHighlighted(this),showDetails(105);"></td>
</tr>
<tr>
<td colspan="13"> <div id="details105"></div> </td>
</tr></table>
</tr><tr onMouseOver="addHighlight(this);" onMouseOut="removeHighlight(this);"></td>
The above line has </td>
without any <td>
. This may cause the alignment issue. Your server side code doesn't show this. It could be an erroneous tag. Take it out as the first step.
精彩评论