CODEWITHSUNDEEP
phpmysqlajax
user854910
user854910

Reputation: 1

getting ajax to update corresponding div in mySQL row results

I have this AJAX code:

<script type="text/javascript">
function updateAssigned(assigned , ticketid)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
document.getElementByID('origassigned').innerHTML=xmlhttp.responseText;
 }
} 
xmlhttp.open("GET","ajax_php/assigned.php?assigned=" + assigned + "&ticketid=" + ticketid,true);
xmlhttp.send();
}
</script>

And this HTML

<DIV CLASS="assigned">
  <DIV ID="origassigned"></DIV>
  <SELECT onChange="updateAssigned(this.value , {$row['ticket']})">
       <option>OPTION 1</option>
       <option>OPTION 2</option>
  </SELECT>
</DIV>

<DIV CLASS="assigned">
  <DIV ID="origassigned"></DIV>
  <SELECT onChange="updateAssigned(this.value , {$row['ticket']})">
       <option>OPTION 1</option>
       <option>OPTION 2</option>
  </SELECT>
</DIV>

<DIV CLASS="assigned">
  <DIV ID="origassigned"></DIV>
  <SELECT onChange="updateAssigned(this.value , {$row['ticket']})">
       <option>OPTION 1</option>
       <option>OPTION 2</option>
  </SELECT>
</DIV>

I cannot get AJAX to update the corresponding DIV. It works perfectly updating my database but Only changes the 1st DIV named "assigned" even if I'm updating the second DIV.

Any Ideas what I should change my AJAX code to so that it recognizes which DIV to update? Thanks!

UPDATE: Changed divs to not have same IDs to be more web compliant. Still don't know how to tell AJAX which div to update.
Sidenote: These are generated from a mySQL query result. Each grouping is a different row. but they all come from same template. So the NAMEs CLASSes and IDs have to be the same on each group.

<DIV CLASS="assigned">
<DIV CLASS="origassigned" NAME="origassigned"></DIV>
<SELECT onChange="updateAssigned(this.value , {$row['ticket']})">
   <option>OPTION 1</option>
   <option>OPTION 2</option>
</SELECT>
</DIV>

<DIV CLASS="assigned">
<DIV CLASS="origassigned" NAME="origassigned"></DIV>
<SELECT onChange="updateAssigned(this.value , {$row['ticket']})">
   <option>OPTION 1</option>
   <option>OPTION 2</option>
</SELECT>
</DIV>

<DIV CLASS="assigned">
<DIV CLASS="origassigned" NAME="origassigned"></DIV>
<SELECT onChange="updateAssigned(this.value , {$row['ticket']})">
   <option>OPTION 1</option>
   <option>OPTION 2</option>
</SELECT>
</DIV>

Upvotes: 0

Views: 499

Answers (2)

thanedar
thanedar

Reputation: 51

You need to have separate names and ids for the three selects. That way your ajax code can handle which element is being updated.

Upvotes: 0

xkeshav
xkeshav

Reputation: 54022

your HTML is wrong..

One page should have unique ID and you assign similar id origassigned to each div , because of that it always capture first div with ID=origassigned and update that div again & again.. instead of that use class.. or assign different id to each div..

Thanks

Upvotes: 1

Related Questions