Member Avatar for jshenn

Second post on this project ... I am working on a bowling scoring system for a non-profit. They would like to be able to enter up to 9 games worth of scores into a form and have the shot results and game scores captured in a database. I have accomplished the scoring part with an html table/form combination. The last row of the table for each column is a Submit button for the user to click and send the shot results to the database using an Ajax call and then return a calculated score. I have worked through how to properly update the first div with this call.

Now I would like to also update a sidebar div that summarizes some data from all the games entered. I thought I could just include a second response statement with a different div id. So I tried:

function postData(url, parameters, divid1, divid2){

var xmlHttp = AJAX();

xmlHttp.onreadystatechange =  function(){
if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
document.getElementById(divid1).innerHTML=loadingmessage;
}
if (xmlHttp.readyState == 4) {

document.getElementById(divid1).innerHTML=xmlHttp.responseText;
document.getElementById(divid2).innerHTML=xmlHttp.responseText;
}
}

xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", parameters.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(parameters);
}

with a response file that looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>

<div>

<div id="resp3">
<?php
echo "divid1 response here";
?>
</div>

<div id="sidebar">
<?php
echo "divid2 response here";
?>
</div>

</div>

I have "resp3" and "sidebar" divs in my html which are passed to the Ajax function as vars divid1, divid2.

This all works except that both responses are returned to both divs.

How do I correctly update only divid1 response into "resp3" and divid2 response into "sidebar"?

Edited by jshenn because: n/a
  • 2 Contributors
  • 2 Replies
  • 2K Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by jshenn
Member Avatar for Taywin

You just need to check merge the whole response back and split them. Then put each content into the right element. An example is below. You could do it in many other ways as well.

if (xmlHttp.readyState == 4) {  // you should check the status 200 as well???
var txt = xmlHttp.responseText
var txtArr = txt.split("use_a_delimiter_created_from_the_return_content")
// i.e. txt.split(":||:")

document.getElementById(divid1).innerHTML=txtArr[0];
document.getElementById(divid2).innerHTML=txtArr[1];
Edited by Taywin because: n/a
Member Avatar for jshenn

Brilliant!! Worked perfectly.

So, now my postData function looks like this:

function postData(url, parameters, divid1, divid2){

var xmlHttp = AJAX();

xmlHttp.onreadystatechange =  function(){
if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
document.getElementById(divid1).innerHTML=loadingmessage;
}
if (xmlHttp.readyState == 4) {

var txt = xmlHttp.responseText
var txtArr = txt.split(":||:")
document.getElementById(divid1).innerHTML=txtArr[0];
document.getElementById(divid2).innerHTML=txtArr[1];

}
}

xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", parameters.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(parameters);
}

And the response file like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>

<div>

<div id="resp3">
<?php
echo "divid1 response here";
echo ":||:";
?>
</div>

<div id="sidebar">
<?php
echo "divid2 response here";
?>
</div>

</div>

I suspect I don't need the div sections in the response file, but it helps me to keep things organized in the actual response. It is quite a bit more complicated than the summary shown here.

I will definately check out what to include for status 200 as suggested.

Thanks for the quick reply!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.