Loop and update input boxes
Posted: Thu Aug 23, 2007 11:58 pm
feyd | Please use
The ajaxOrder function sends a comma delemeted string to another file [update.php] and updates the database order. And that works perfect. However the value of the input box does not get updated. The file update.php accepts two requests, the comma delemeted string to re-order the database, and a single id which returns in plain text, the `ordering` value of that table element. The JS I've come up with makes sense [to me], but I need a way to pass the ID variable to the stateChanged function so it can update the correct input box.
updateOrder [which is called at the end of ajaxUpdate], sends a getorder request to update.php and update.php will respond with the order number in plain text. Since I want to do that for all input boxes, I made a loop to loop through each input box. However, when the readyState == 4, the document does not get updated because there is no element with the id "orderid." The elements are labeled "orderid1," "orderid2", ect... which I assume has to be done because if each input box didn't have a unique name, they would be updated with the same value. So my question is, how can I pass in the id [ idNodes.getAttribute('id') ] so the stateChanged function updates the correct input box? Other methods are welcome.
Thanks.
feyd | Please use
Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Well today is pretty much my first day working with AJAX - JavaScript for that matter. I managed to get 95% of what I set out to accomplish done.
I have a simple php loop which displays data from a table ORDER BY `ordering`Code: Select all
while($row = mysql_fetch_array($result)) {
echo "<tr id='".$row['id']."' onmouseup='ajaxOrder()'><td>".$row['id']."</td><td>".$row['name']."</td>
<td><input type='text' id='orderid".$row['id']."' value='".$row['ordering']."' /></td></tr>";
}
echo "</table>";Code: Select all
function updateOrder() {
idNodes = document.getElementById("dndtable").getElementsByTagName("tr");
for (var i=0;i < idNodes.length;i++) {
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
alert ("Your browser does not support AJAX!");
return;
}
var url="update.php";
url=url+"?getorder="+idNodes[i].getAttribute('id');
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
}
function stateChanged() {
if (xmlHttp.readyState==4) {
document.getElementById("orderid").value=xmlHttp.responseText;
}
}Thanks.
feyd | Please use
Code: Select all
,Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]