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.

  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:

<c:if test="${param.reqName == 'fin'}" >
    <c:set var="rem" value="${param.rem}" />
    <c:set var="adyr" value="${param.adyr}" />
    <c:set var="adcap" value="${param.adcap}" /> 
    <c:set var="adexp" value="${param.adexp}" />
    <c:set var="nam" value="${sessionScope.name}" />
    <c:set var="desc" value="${param.desc}" />
    <c:set var="reas" value="${param.reas}" />

         <sql:update var = "updateFin" >         
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 <sql:update tags, but in my case, I was limited to that.

You could use whatever server side technology that you want in place of dbFcns.jsp. You just want to make sure that it executes the update/insert statements that you want.

Important: In this case, I did not need to receive any data back. If you do need data back, you should generate the html in the dbFcns.jsp file and you would write a function to copy the data to a div in your page. You would call your function from the place where I wrote "// no function" above.

At first it will all seem very confusing, but once you figure out the architecture, it will be easier to design functionality. Hope this helps a little.

[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!