Choosing child div to update with Ajax

[devinodaniel]

Hey folks. Out of necessity (and against web standards, I know) I must have two div with the same ID on one page. I'm trying to dynamically update a database with Ajax and update this div with that info. But when i go to update the second divd (with the same ID) it changes the first. Any way I can target the specific div with some sort of child/parent/this code? Mucho appreciated. Code below:

The div I'm trying to change is called "origassigned".

<script type="text/javascript">
function updateAssigned(str)
{
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="+str,true);
xmlhttp.send();

}
</script>

[nonshatter]

Can you not change the 'ID' attribute to a 'Class' attribute?

[devinodaniel]

Can you not change the 'ID' attribute to a 'Class' attribute?

Again. Due to certain circumstances I cannot. It doesn't matter though. This isn't a commercial site. It's for my own personal using.

Any suggestion as to how to address my issue?

[MrDJK]

According, HTML spec an ID should only ever be used on once on the page, therefore getElementById will only access the first instance of the parameter passed to it.

Your probably only going to be able to do what you need with a class or specific ids.

However you may be able to get away with something like

//So idname would be your parent element
var child = document.getElementById('idname').getElementsByTagName('div');
//Use child as if it's an array(although it's not).

Best of luck.

[devinodaniel]

Thanks - this is a little closer to what I'm looking for. The reason why I can't use a specific ID is because I have many records being returned from a MySQL table with the code below:
..snippet..

"<div class=\"assigned\">" .
				 	"<table><tr><td>ASSIGNED</td></tr>" .
				 	"<tr><td style=\"width: 180px;background-color: #666666;\"><div id=\"origassigned\" style=\"background-color: black\">{$row['assigned']}</div></td><td><form>" .
				 	"<input type=\"hidden\" value=\"{$row['ticket']}\" name=\"assignedticketid\">" .
				 	"<select name=\"newassigned\" id=\"newassigned\" onchange=\"updateAssigned(this.value)\">" .
				 	"<option>Change To..</option>" .
				 	"<option value=\"Unassigned\">Unassigned</option>" .
				//EDIT ---> MEMBERS OF SUPPORT TEAM -- refer to ../inc/storeinfo.php
				  	"print $supportmembers" . 
				 	"</select>" .
				 	"</form></td></tr><table>" .
				 	"</div>" .

Since I'm..

while($row = mysql_fetch_array($result))

All the rows are the same HTML while returning different data inside. Like this:

1st row returned..

<div class="assigned">
<table>
<tr>
<td>ASSIGNED</td>
</tr>
<tr>
<td style="width: 180px;background-color: #666666;">
<div id="origassigned" style="background-color: black">Member Name 1</div>
</td>
<td>
<form><input type="hidden" value="330" name="assignedticketid"><select name="newassigned" id="newassigned" onchange="updateAssigned(this.value)"><option>Change To..</option><option value="Unassigned">Unassigned</option>print <br />
	"<option>Member Name 1</option>"<br />
	"<option>Member Name 2</option>"<br />
	"<option>Member Name 3</option>"<br />
	</select>
</form></td></tr><table>
</div>

2nd row returned.. as so on..

<div class="assigned">
<table>
<tr>
<td>ASSIGNED</td>
</tr>
<tr>
<td style="width: 180px;background-color: #666666;">
<div id="origassigned" style="background-color: black">Member Name 3</div>
</td>
<td>
<form><input type="hidden" value="330" name="assignedticketid"><select name="newassigned" id="newassigned" onchange="updateAssigned(this.value)"><option>Change To..</option><option value="Unassigned">Unassigned</option>print <br />
	"<option>Member Name 1</option>"<br />
	"<option>Member Name 2</option>"<br />
	"<option>Member Name 3</option>"<br />
	</select>
</form></td></tr><table>
</div>

[/code]

I can't seem to get it to work with GetElementByClassName. If anyone knows a solution for that issue as well I'd be happy to try it.

Do this make sense?

According, HTML spec an ID should only ever be used on once on the page, therefore getElementById will only access the first instance of the parameter passed to it.

Your probably only going to be able to do what you need with a class or specific ids.

However you may be able to get away with something like

//So idname would be your parent element
var child = document.getElementById('idname').getElementsByTagName('div');
//Use child as if it's an array(although it's not).

Best of luck.

[Airshow]

Devinodaniel,

I haven't got time to post code but the principle you need is to work relative to the select element when its onchange event fires.

To achieve that, pass this rather than this.value to the onchange handler.

You can then read the value inside the handler. Use .parentNode().parentNode() etc, (or .closest() in jQuery) to find the div container.

It's a sort of "inside-out" approach as opposed to "outside-in". No need to use document.getelementById() .

Airshow

[devinodaniel]

Thanks AirShow,

This provides a lot of insight! I'll work with this and see what I can come up with. Thank you very much for your time!

Devin

Devinodaniel,

I haven't got time to post code but the principle you need is to work relative to the select element when its onchange event fires.

To achieve that, pass this rather than this.value to the onchange handler.

You can then read the value inside the handler. Use .parentNode().parentNode() etc, (or .closest() in jQuery) to find the div container.

It's a sort of "inside-out" approach as opposed to "outside-in". No need to use document.getelementById() .

Airshow

[devinodaniel]

Hey friends,
I'm still struggling with this :( I tried messing around with AirShow's previous suggestion and still am having no luck so I reverted back to the closest thing I could get working. I'm probably formatting it wrong tho.

My 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();

}

My 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>

Just to clarify - This work perfectly. EXCEPT I can't get it to update anything but the very 1st DIV with ID="origassigned". The update still happens on the database it just isn't reflected in the corresponding DIV. I know that I should have multiple DIVs with the same ID but I just cannot seem to get it to work with a CLASS. Grrr. Sorry to repost, I just can't seem to get this!

[Airshow]

dd,

Demo (without ajax):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.assigned {
	width: 180px;
	background-color: #666666;
	color: #FFF;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type='text/javascript'>
onload = function(){
	function updateAssigned(){
		var tr=this.parentNode.parentNode, node=null;
		for(var j=0; j<tr.childNodes.length; j++){
			if(tr.childNodes[j].className && tr.childNodes[j].className === 'origassigned'){
				node = tr.childNodes[j];
			}
		}
		if(node){
			node.innerHTML = this[this.selectedIndex].value;
		}
	}
	var selects = document.getElementsByTagName("select");
	for(var i=0; i<selects.length; i++){
		if(selects[i].className = "newassigned"){
			selects[i].onchange = updateAssigned;
		}
	}
};
</script>
</head>

<body>

<form>
<table>
<tr><td>ASSIGNED</td></tr>
<tr>
<td class="assigned"></td>
<td>
<input type="hidden" value="330" name="assignedticketid"/>
<select name="newassigned" class="newassigned"><!-- note this line changed to pass 'this' to onchange handler -->
	<option value="">Change To..</option>
	<option value="U">Unassigned</option>
	<option value="Member Name 1">Member Name 1</option>
	<option value="Member Name 2">Member Name 2</option>
	<option value="Member Name 3">Member Name 3</option>
</select>
</td></tr><table>
</form>

<form>
<table>
<tr><td>ASSIGNED</td></tr>
<tr>
<td class="assigned"></td>
<td>
<input type="hidden" value="330" name="assignedticketid"/>
<select name="newassigned" class="newassigned">
	<option value="">Change To..</option>
	<option value="U">Unassigned</option>
	<option value="Member Name 1">Member Name 1</option>
	<option value="Member Name 2">Member Name 2</option>
	<option value="Member Name 3">Member Name 3</option>
</select>
</td></tr><table>
</form>

</body>
</html>

If you are prepared to use jQuery, then the code gets much simpler.

For exactly the same demo (still without ajax), replace the whole onload = function(){...} block with:

$(document).ready(function(){
	$(".newassigned").change(function(){
		$(this).closest("tr").find(".assigned").html($(this).val());
	});
});

Your final code, complete with ajax, will be something like this:

$(document).ready(function(){
	$(".newassigned").change(function(){
		var $m = $(this);//the changed select menu
		$.ajax({
			url: "ajax_php/assigned.php",
			type: "GET",
			data: {assigned: $m.val()},
			success: function(response){
				$m.closest("tr").find(".assigned").html(response);
			}
		});
	});
});

Airshow