Page 1 of 1

Loop and update input boxes

Posted: Thu Aug 23, 2007 11:58 pm
by SidewinderX
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>";
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.

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;
    }
}
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]

Posted: Fri Aug 24, 2007 4:30 pm
by califdon
I'm a newbie at Ajax, too, having only done one for-real application, so far. Nice coding!

I'm a little confused about what you're trying to do. First, you populate a table with rows from the database, and each row has an onMouseUp event that calls your Ajax function. Right, so far? Now, what should the Ajax function do? I presume it's something specific to the particular row that generates the onMouseUp event.

Here's what's confusing me:
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.
What is the input box going to display?

In my one realistic application so far, I needed to extract several different pieces of data (it was fieldnames of a table and the number of rows in the table) in a single AjaxRequest call. What I did in my PHP script was to return a comma delimited string, the first element of which would be the no. of rows, followed by all the field names. Then, in my JS data handler, I could read the first element and assign it to a variable, later to be used in the innerHTML of my destination HTML element, then I could read the remaining elements of the delimited string in a loop to create the HTML for assigning to the innerHTML of the other destination.

Maybe that approach would work for you?