Using Ajax to implement php inside of javascript loop

[ctaylo21]

Hey Guys,

I have a theoretical question, I can't really post my code. But I have four results from reads to a database using php. I then read from an xml file using javascript using a loop. I am basically creating a chart of four variables with several different values for each variable. Some of the values for each variables come from the database using php, and some come straight off the XML file parsing done by the javascript. I initially had the php fetch/extract inside of the javascript loop, but it only assigned the first variables values to all the other variables. I discovered (after hours of googling) the difference between client side and server side code. So, after all this typing, my question is where should I look for tutorials on using Ajax to be able to use php code inside of a javascript loop? (If at all possible) Thanks!

[ddempsey96]

Yes - it is not easy finding an example that helps to integrate all technologies. I can't help you with the tutorials, but I can give you an example:

function addFinancials(itn) 
{
    if(roFinancials) return;
	var finTable = document.getElementById("financialsTab");
		var finBody = finTable.getElementsByTagName("tbody")[0];
		var finTRs = finBody.getElementsByTagName('tr');
		
		for (i=0;i<finTRs.length;i++)
		{		
		var finYear = finTRs[i].cells(0).innerText;
			if (finYear != null)
			{
				var finCosts = finTRs[i].getElementsByTagName("input");
				var finCap = finCosts[0].value;
				var finExp = finCosts[1].value;

				var currentTime = new Date();
				var target = document.getElementById("fin");
				var file = "ajax/dbFcns.jsp?reqName=fin&currentTime=" + currentTime;
			
				dataToPost = "&itemNo=" + itn + "&adyr=" + finYear + "&adcap=" + finCap + "&adexp=" + finExp;
			
				loadXmlData(file,target,dataToPost,"fin");

					
			}	
		}

	
}

The loadXML() function, just calls the dbFcns file and tells it to execute the code in the 'fin' section.[CODE] function loadXmlData(url, object, dataToPost, requestName)
{

// create the object, careful to the MSFT/Other method
if (window.XMLHttpRequest)
{
requestName = new XMLHttpRequest();

}
else if (window.ActiveXObject)
{
requestName = new ActiveXObject("Microsoft.XMLHTTP");
}

// executing the request, passing the target object

// strTemp = url;
// strTemp = encodeURIComponent(strTemp);
// url = strTemp;

strTemp = url;
strTemp = trimSingleQuote(strTemp);
url = strTemp;

// requestName.open("GET", url, true);
// requestName.onreadystatechange = function () {processRequestChange(object, requestName)};
// requestName.send(null);
requestName.open("POST", url, true);
requestName.onreadystatechange = function () {processRequestChange(object, requestName)};
requestName.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
requestName.send(dataToPost);
}

/**
* Handle the events of the XMLHttpRequest Object
*/
function processRequestChange(object, requestName)
{
if (requestName.readyState == 4)
{
if(requestName.status == 200)
{

// Check if No session is returned from dbFunctions.jsp. If yes then no session exists and we need to send to login page
if (requestName.responseText.match("No Session"))
{
window.location.href = "/logout.jsp";
}
else
{

if (object.id == "fin" )
{
// no function;
}
...................
....................

Here is the code that is eventually called:

dbFcns.jsp file:

             UPDATE tblForecast
								SET  Capital_Amount = '${adcap}',
                    Operations_Amount = '${adexp}'
                WHERE Item_No = ${itemNo}
                AND Year = '${adyr}' 
          </sql:update>   
          
					<c:if test="${updateFin == 0}" >
	          <sql:update var = "insertFin" >         
	                INSERT INTO tblForecast
	                (
	                    Item_No,
	                    Year,	
	                    Capital_Amount,
	                    Operations_Amount	
	        
	                ) values
	                (
	                    '${itemNo}',
	                    '${adyr}',
	                    '${adcap}',
	                    '${adexp}'
	                )
	           </sql:update>   
					</c:if>

		
					<strong>Inserted ${insertFin} rows</strong>
        

</c:if> <!-- end fin --->

Note: Many people have warned against using the JSTL

[ctaylo21]

Thanks a bunch for the reply, I appreciate the example and the effort you put in. I haven't had a chance to look at the code in-depth, but I will as soon as I get the chance (other programming projects :P). Talking with some of the more experienced guys I work with ( I just started interning as a web programmer) they suggested using php to read from the database and update an XML file, and then just use js to read the XML file. Thus our data is kept somewhat recent, and there's no need to mix and mash php and js. But I will most certainly check your post carefully, thanks again for the help!