Jump to content

AJAX/PHP/Javascript looping problem

Darkmatter5

By Darkmatter5
in JavaScript

Recommended Posts

Darkmatter5 Newbie

Darkmatter5

Posted
Posted

I have a dropdown menu which when changed calls a Javascript function, that function gets specific data from MySQL and displays the query at a specified DIV. I'm wanting it to change the specified data at a number of DIVs, basically fill out an HTML table from a database table.If I run the following code I get no result, nothing changes at the DIVs.

// JavaScript Documentvar xmlHttpvar fields=new Array("ClientID","FirstName","LastName","CompanyName","ContactTitle","Address","City","State","ZipCode","HomePhone","WorkPhone","WorkPhoneExtension","FaxPhone","Email");var i=0;for (i=0;i<=13;i++) {	function showClientLST(str) {		xmlHttp=GetXmlHttpObject()		if (xmlHttp==null) {			alert ("Browser does not support HTTP Request")			return		}		var url="http://byrndb01/byrndb/library/getClient.php"		url=url+"?r1="+str		url=url+"&r2="+fields[i]		url=url+"&sid="+Math.random()		xmlHttp.onreadystatechange=stateChanged		xmlHttp.open("GET",url,true)		xmlHttp.send(null)	}}		function stateChanged() {	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {		document.getElementById(fields[i]).innerHTML=xmlHttp.responseText	}}			function GetXmlHttpObject() {	var xmlHttp=null;	try {		// Firefox, Opera 8.0+, Safari		xmlHttp=new XMLHttpRequest();	}	catch (e) {		//Internet Explorer		try {			xmlHttp=new ActiveXObject("Msxml12.XMLHTTP");		}		catch (e) {			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");		}	}	return xmlHttp;}

Now if I do this to the showclientLST(str) function it'll change only the first DIV.

//for (i=0;i<=13;i++) {	function showClientLST(str) {		xmlHttp=GetXmlHttpObject()		if (xmlHttp==null) {			alert ("Browser does not support HTTP Request")			return		}		var url="http://byrndb01/byrndb/library/getClient.php"		url=url+"?r1="+str		url=url+"&r2="+fields[i]		url=url+"&sid="+Math.random()		xmlHttp.onreadystatechange=stateChanged		xmlHttp.open("GET",url,true)		xmlHttp.send(null)	}//}

Also here is the getClient.php file the showClientLST(str) function calls and then the page with the DIVs I wish to have changed.getClient.php

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body><?php$clientid=$_GET["r1"];$field=$_GET["r2"];include 'dbconfig.php';include 'opendb.php';$query="SELECT $field		FROM byrnjobdb.clients		WHERE ClientID=$clientid";$result=mysql_query($query) OR die (mysql_error());while($row=mysql_fetch_array($result)){echo $row[$field];}include 'closedb.php';?></body></html>

editclient.php

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Byrn & Associates, Inc. online Job database</title><style type="text/css"><!--.style1 {	font-family: Geneva, Arial, Helvetica, sans-serif;	font-size: 12px;	font-weight: bold;}body {	background-color: #006699;}.style3 {	font-family: Geneva, Arial, Helvetica, sans-serif;	font-size: 12px;}.style7 {font-family: Verdana, Arial, Helvetica, sans-serif}.style4 {	font-family: Geneva, Arial, Helvetica, sans-serif;	font-weight: bold;}--></style><script src="library/selectClient.js"></script></head><body><table width="720" border="0">  <tr>	<td colspan="4"><span class="style4">Edit a client record - <span class="style3">Search by selecting from the list</span> </span><span class="style1">below</span></td>  </tr>  <tr>	<td colspan="4"><div align="left"><span class="style7">	  <?php		include 'library/dbconfig.php';		include 'library/opendb.php';				$query="SELECT ClientID, FullName				FROM byrnjobdb.clients				ORDER BY FullName ASC";		$result=mysql_query($query);		echo "<select name='Client' method='get' onChange='showClientLST(this.value)'>";		echo "<option>---Select---</option>";		while ($row=mysql_fetch_array($result))			{			$r1=$row['ClientID'];			$r2=$row['FullName'];			echo "<option value='$r1'>$r2</option>";			}		echo "</select>";				include 'library/closedb.php';		?>	</span></div></td>  </tr>  <tr>	<td width="120"> </td>	<td width="250"><div align="center">Current record data</div></td>	<td width="150"><div align="center">Data to update</div></td>	<td width="200"><div align="center">Function status</div></td>  </tr>  <tr>	<td>ClientID:</td>	<td><div id="ClientID"></div></td>	<td> </td>	<td rowspan="14"><div id="results"></div></td>  </tr>  <tr>	<td>First name:</td>	<td><div id="FirstName"></div></td>	<td><div align="center"><input name='FirstName' type='text' id='FirstName'/></div></td>  </tr>  <tr>	<td>Last name:</td>	<td><div id="LastName"></div></td>	<td><div align="center"><input name='LastName' type='text' id='LastName'/></div></td>  </tr>  <tr>	<td>Company name:</td>	<td><div id="CompanyName"></div></td>	<td><div align="center"><input name='CompanyName' type='text' id='CompanyName'/></div></td>  </tr>  <tr>	<td>Contact Title:</td>	<td><div id="ContactTitle"></div></td>	<td><div align="center"><input name='ContactTitle' type='text' id='ContactTitle'/></div></td>  </tr>  <tr>	<td>Address:</td>	<td><div id="Address"></div></td>	<td><div align="center"><input name='Address' type='text' id='Address'/></div></td>  </tr>  <tr>	<td>City:</td>	<td><div id="City"></div></td>	<td><div align="center"><input name='City' type='text' id='City'/></div></td>  </tr>  <tr>	<td>State:</td>	<td><div id="State"></div></td>	<td><div align="center"><input name='State' type='text' id='State'/></div></td>  </tr>  <tr>	<td>Zip code:</td>	<td><div id="ZipCode"></div></td>	<td><div align="center"><input name='ZipCode' type='text' id='ZipCode'/></div></td>  </tr>  <tr>	<td>Home phone:</td>	<td><div id="HomePhone"></div></td>	<td><div align="center"><input name='HomePhone' type='text' id='HomePhone'/></div></td>  </tr>  <tr>	<td>Work phone:</td>	<td><div id="WorkPhone"></div></td>	<td><div align="center"><input name='WorkPhone' type='text' id='WorkPhone'/></div></td>  </tr>  <tr>	<td>Extension:</td>	<td><div id="Extension"></div></td>	<td><div align="center"><input name='Extension' type='text' id='Extension'/></div></td>  </tr>  <tr>	<td>Fax phone:</td>	<td><div id="FaxPhone"></div></td>	<td><div align="center"><input name='FaxPhone' type='text' id='FaxPhone'/></div></td>  </tr>  <tr>	<td>Email:</td>	<td><div id="Email"></div></td>	<td><div align="center"><input name='Email' type='text' id='Email'/></div></td>  </tr>  <tr>	<td colspan="3"><div align='center'><input name='editclient' type='submit' id='editclient' value='Store new client data' /></div></td>	<td> </td>  </tr></table></body></html>

Thanks in advance!

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Have you tried something like this, just so you can be certain what's coming back?

function stateChanged() {	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {		alert(xmlHttp.responseText);	}}

Unrelated, but best practice: the A in AJAX stands for asynchronous. Yet you're treating your connection as if you have a guarantee that the data that returns will come back in the order you request it. And who knows, maybe most of the time it will. But the net is hinky. Each call to your php script will create a unique socket, and any socket can get slowed behind the others. (Like a page with 14 pictures might load #9 before #2.) I would rewrite your php response script so that the responseText tells your javascript the index of the variable it's supplying a value for. It could be a JSON string that you run through an eval statement, for instance.

Link to comment
Share on other sites
Darkmatter5 Newbie

Darkmatter5

Posted
  • Author
Posted

I tried what you suggested and it returned.

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body>2766</body></html>

I just can't get it loop to run the same function until all DIVs from ClientID to Email are all updated. I can only get it to run once, if I implement the for loop I get no output. Now I also tried your suggestion with the for statement and I get the same output as above except nothing is in between the <body></body> tags.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Okay, I'm thinking a little more. Seems to me the http object is designed to receive one response, but your for loop is recycling it, as if it could receive 14. This would work, if say the routine ran 14 times with time in between, maybe in response to user clicking a button or something. But a for loop asks for 14 responses right on top of each other. I don't see that working in the context of network latencies.Maybe you could have an array of 14 http objects. That would take care of the other problem, too, since the index of the object would be the index of the field.----Now, I haven't really studied what you're up to, so what I wrote above is in response to what you're asking. But do you really need to get that data in 14 chunks? Could you ask for it once and have it sent down as a single JSON object? Just asking.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...