Question about populating multiple DIVs

Member_Zero · May 20, 2008

Hi guys, I'm an AJAX/JS dummy so I'm ready with my flame-retardant suit.

I have written a PHP cart checkout page that uses AJAX and a cute JS collapsible box to allow the shopper to change shipping methods at checkout. I have it working fine updating a single DIV, but I need to update a second DIV element from the same request. All the data I need is pulled down with the original AJAX request...I just can't figure out how to duplicate that data to update more than one DIV.

I've seen others write about this but the answers were a bit confusing and I haven't found a workable solution yet. I had this same issue a while ago and did a workaround by restructuring my html so that both DIVs that needed updating were *inside* the Ajax target DIV, but the structure of this page isn't such that I can do that realistically.

Here's a couple snapshots of the cart checkout screen to give you a visual of what it looks like so far (I'm actually pleased with how it came out):

In the first one, I'm changing the shipping from Parcel Post to Priority. The 2nd pic shows the end result -- the top section (my original DIV called 'ajaxDiv') is updated with the new shipping & pricing, but the highlighted section (2nd div) needs to be updated also.

I'm thinking there must be a simple solution that I'm just overlooking - maybe even a few lines of JS to simply duplicate the Ajax data and use it elsewhere on the page?

Here's the code I'm using:

Ajax script: (some of this is being PHP echo'd, but I tried to clean it up as much as possible here)

<!--

function ajaxFunction$key()

{

var ajaxRequest;

try

{

// Opera 8.0+, Firefox, Safari

ajaxRequest = new XMLHttpRequest();

}

catch (e)

{

try

{

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e)

{

alert("Your browser broke!");

return false;

}

ajaxRequest.onreadystatechange = function()

{

if(ajaxRequest.readyState == 4)

{

var ajaxDisplay = document.getElementById('ajaxDiv');

ajaxDisplay.innerHTML = ajaxRequest.responseText;

}

var shipinfo = document.getElementById('shipinfo').value;

var queryString = "?si=" + shipinfo + "&seller=$value&subtotal={$subtotal[$key]}&itemcount={$itemcount[$key]}&tax={$taxtotal[$key]}&sellername=$sellername";

ajaxRequest.open("GET", "cs.php" + queryString, true);

ajaxRequest.send(null);

}

//-->

</script>

target DIV for Ajax data:

<b><font size=4>$sellername</font></b><br>

Item Count: $itemcount[$key]<br>

Cart Total: <b><font color=green>\$$carttotal[$key]</font></b>

</div> \n";

echo "

<div id=\"alr\" style=\"width:296px;height:13px;left:0px;top:-7px;border: 1px solid rgb(230,230,230);padding:2px\" class=\"t11reg\"> \n";

if (strlen($shiptype[$key]) < 26)

echo "Shipping: ";

echo "

$shiptype[$key] <b><font color=green>\$$shiptotal[$key]</font></b>

Tax: <b><font color=green>\$$taxtotal[$key]</font></b>

</div> \n

</div>";

Later section of HTML which also needs updating:

///////

$shiptype[$key] Shipping:

</td>

\${$subtotal[$key]}<br>

\${$taxtotal[$key]}<br>

\${$shiptotal[$key]}

</td>

</tr>

<tr>

</td>

Cart Total:

</td>

\${$carttotal[$key]}

////////

Hope that's not too confusing, and I apologize if this post is a bit lengthy. Anyway, any tips or suggestions are most welcome and appreciated.

RichardRotterdam · May 20, 2008

///////

Later section of HTML which also needs updating:
                  $shiptype[$key] Shipping:
                  </td>
                  <td align=right>
                  \${$subtotal[$key]}

                  \${$taxtotal[$key]}

                  \${$shiptotal[$key]}
                  </td>
                  </tr>
                  <tr>
                  <td colspan=4>
                  <img src=\"i/1.gif\" width=300 height=4>

                  </td>
                  <tr class=\"t10reg\" style=\"background-color:#e9f4e9\">
                  <td colspan=3 align=right>
                  Cart Total:
                  </td>
                  <td align=right>
                  \${$carttotal[$key]}
////////

for javascript to update an element you need plain html this is php post the browser source instead because javascript cant read php since it is clientside

Member_Zero · May 20, 2008

Sorry, here's the browser source for the section you quoted, containing the old data:

--------

USPS Parcel Post Shipping:

</td>

$83.40<br>

$0.00<br>

$19.93

</td>

</tr>

<tr>

</td>

Cart Total:

</td>

$103.33

--------

Here's the section which is being updated by the Ajax call:

--------

<b><font size=4>Atomic Surplus</font></b><br>

Item Count: 5<br>

Cart Total: <b><font color=green>$117.26</font></b>

</div>

Shipping:

USPS Priority Mail <b><font color=green>$33.86</font></b>

Tax: <b><font color=green>$0.00</font></b>

</div>

--------

And here's the form that submits the Ajax request:

--------

<option value="reg|USPS Parcel Post|19.93" >USPS Parcel Post: $19.93

</option>

<option value="exp|USPS Priority Mail|33.86" selected="yes">USPS Priority Mail: $33.86

</option>

<option value="int|USPS International Airmail|60.12" >USPS International Airmail: $60.12

</option>

</select>

</td>

</tr>

</table>

</form>

--------

Any idea how I would use Ajax to populate both sections of html?

RichardRotterdam · May 20, 2008

here is basicly what the ajax request does

everthing inside the following tag

<div id='ajaxDiv1'>
</div>

gets replaced by what gets retrieved that is what the document.getElementById() function does

so in order to update something just add a id attrubute to it like so

<div id="secondElementToBeUpdated"></div>

then you could change the function like so

<script>
ajaxRequest.onreadystatechange = function()
{
   if(ajaxRequest.readyState == 4)
   {
   var ajaxDisplay = document.getElementById('ajaxDiv');
   ajaxDisplay.innerHTML = ajaxRequest.responseText;
   
   ///////////////////////////////////////////////////
   //OK here goes the second update 
   var secondElementToBeUpdated = document.getElementById('secondElementToBeUpdated);
   secondElementToBeUpdated.innerHTML = ajaxRequest.responseText;
   ///////////////////////////////////////////////////
   }
   }
   var shipinfo = document.getElementById('shipinfo').value;

   var queryString = "?si=" + shipinfo + "&seller=$value&subtotal={$subtotal[$key]}&itemcount={$itemcount[$key]}&tax={$taxtotal[$key]}&sellername=$sellername";
   ajaxRequest.open("GET", "cs.php" + queryString, true);
   ajaxRequest.send(null);
}
</script>

Member_Zero · May 20, 2008

Very cool. But how does my PHP app know to send one batch of output to the first div, and another to the second?

Here's the portion of the application (cs.php) that outputs data to the current DIV:

--------

echo "

<b><font size=4>$sellername</font></b><br>

Item Count: $itemcount<br>

Cart Total: <b><font color=green>\$$carttotal</font></b>

</div>

<div id=\"alr\" style=\"width:296px;height:13px;left:0px;top:-7px;border: 1px solid rgb(230,230,230);padding:2px\" class=\"t11reg\"> \n";

if (strlen($shipmethod) < 27)

echo "Shipping: ";

echo "

$shipmethod <b><font color=green>\$$shiptotal</font></b>

Tax: <b><font color=green>\$$tax</font></b>

</div> \n

";

--------

RichardRotterdam · May 20, 2008

do you mean the elements need to be updated with different data? because your php doesnt know what to update and it wont know that either. the php file is just told what kinda of data to fetch from the database and what the output should be. not where it should be that is the javascript part

Member_Zero · May 20, 2008

Right, I probably didn't explain it well.

The raw data is the same for both sections, i.e. shipping price, ship method, etc. The HTML that surrounds the data is different of course, since that part of the page is formatted differently.

So I'm still trying to figure out how to populate both sections of my page with the one Ajax request. I know it's possible because others have written about doing it, but I can't understand their methods or how to implement them.

dungareez · May 21, 2008

Here is an onFinish function I used to process multiple divs from one responseText. I am sure pro coders will cringe at this but it worked for me. I am sure you could also use json or XML responses to do it as well...

function onFinish(req)

{

var result = req.responseText;

var resultArray = result.split("_____"); //splits the response text into an array. Using _____ as a delimiter you alternate div ID and DIV content. " _____ " is just a unique character sequence, you can use anything unique.

var max_i = resultArray.length;

//this loop cycles through the array and to grab each div ID and update the content associated with it

for (var i=0; i<=max_i; i = i+2) {

var h = i+1 ; //used to set array position for data to fill selected div

var div = resultArray; //the div to be updated

var displayResult = resultArray[h]; // takes the second part of the response that will be displayed in the desired div

document.getElementById(div).innerHTML= displayResult; //display result in the selected div

}

What this does is takes a text response say for example, "div1_____junk to put in div1_____div2_____junk to put in div2" and will split it into an array in javascript by separating at the "_____". Then it loops through the array taking two array locations at a time, var h and var i. these will be the div name and div value respectively. It then uses these values to update the divs and increments up by two to get the next two values in the array if there are more. This can update as many divs as you want as long as your php spits out the response text as described above..

Hope this helps. Like I said I am a beginner myself, so I am sure there are many better ways of accomplishing this, but for now, it works.

Good luck.

Member_Zero · May 21, 2008

Thanks for the input. I solved it by creating another PHP app, and using two separate Ajax functions within my page, then calling both functions from the same dropdown selection form:

Clunky I know, but I'm pressed for time and had to come up with something that works. I'll definitely try that when my more pressing coding issues are behind me and I have more time to experiment.

RichardRotterdam · May 21, 2008

if its the same data but it should be displayed in a different manner i would use json instead. Using two different calls does work but it makes the server work harder then really required.

the difference between Json and ajax is. that ajax gives you a plain text or html while json can send structured php arrays as javascript arrays. just in case you want to do it the clean way try looking it up for future purposes

Sign In

Question about populating multiple DIVs

Recommended Posts

Member_Zero

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

Member_Zero

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

Member_Zero

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

Member_Zero

Link to comment

Share on other sites

dungareez

Link to comment

Share on other sites

Member_Zero

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information