Update multiple DIV:s with XmlHttpRequest (Dynamically)

I'm about to create a livescore service with sport results on our site and I want to update the scores with Ajax in order to avoid reloading the entire page. I got some great information from another thread (http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22820160.html) but my problem is that I need to update many DIV:s with one single script. I also don't know exactly how many DIV:s there is since the number of matches might change from day to day. Therefore I would like to be able to dynamically create DIV:s with different ID:s and update them with one single script. I would prefer to write the code for fetching the results from the database in PHP (I use MySQL as DB).

I read another article (http://www.phpit.net/article/ajax-php-without-xmlhttprequest/) which might do the trick, but I'd prefer to use XmlHttpRequest.

I would greatly appreciate if you could add code examples in your replies! It's also important that the solution works in all major browers (IE, Firefox, Opera, Safari)

Thanks!
merson99Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
I provided a full example with "multi-request" here:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23120810.html

I explained the code in detail.

>>but my problem is that I need to update many DIV's with one single script.
It sounds like you want to send one request and have the updted result for all your divs at once. This is doable but you need to have some markup in place so that when you get back the "fresh" content, you will know which element(s) are associated to which content.
0
merson99Author Commented:
>>It sounds like you want to send one request and have the updted result for all your divs at once. This
>>is doable but you need to have some markup in place so that when you get back the "fresh" content,
>>you will know which element(s) are associated to which content.

Thats correct, I would like to send one request and update serveral divs at once. I can mark the divs with ID:s, but the problem is that I don't know the ID:s until I run my PHP script and retrieve the match-id:s from the database. The backend PHP-script that will get the scores from the database can print the output with the same match-id:s since these will be stored in the database. BUT the match-id:s will differ from day to day wich means that I can't "hardcode" them in the script, it must be dynamic. Will this cause a problem?
Day 1:
<div id="2532"></div>
<div id="2535"></div>
<div id="2538"></div>
 
Day 2:
<div id="2561"></div>
<div id="2572"></div>

Open in new window

0
hieloCommented:
>>Will this cause a problem?
With the markup you show above, yes. The problem is NOT that you are returning html markup with some random divs. The problem is: Where do you put those divs. You need to realize that the body of your initial page may not be empty. It may have a sidemenu and a footer. So when the data comes back, where are you going to "plug it in"? You need some "target" space on the browser document. So, you would need some initial markup that would resemble this:
<div id="day1Data"></data>
<div id="day2Data"></data>

So that when you get the AJAX response, you will "insert" the appropriate data on its corresponding "space". EX:
<div id="day1Data">
   Day 1:
   <div id="2532"></div>
   <div id="2535"></div>
   <div id="2538"></div>
</data>
<div id="day2Data">
   Day 2:
   <div id="2561"></div>
   <div id="2572"></div>
</data>

NOTE: I am NOT saying that for every Day data you MUST have one target element/area. You could put it all in one area:
<div id="requestResult">
  Day 1:
  <div id="2532"></div>
  <div id="2535"></div>
  <div id="2538"></div>
 
  Day 2:
  <div id="2561"></div>
  <div id="2572"></div>
</div>

As a matter of fact, you don't even need a single target element. You could just append it to the body element via the appendChild() DOM method, but this would always be added to the end of the <body> tag. So if you originally had a footer coded at the end of your page, once you append the content, the "fresh" data will most likely appear below the footer (unless you have absolute positioning CSS rules).
So, to summarize, the whole point of having these "target elemetns" if to give you (the almighty programmer) more control and/or predictibility as to what data is going to be placed where on your page.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

merson99Author Commented:
Sorry, I didn't explain it too well...

I do understand how to output the data at a specific location. The target space that I would like to use is <div id="2532"></div>. My page could look something like this:

<html>
<body setInterval('ajax()', '5000')>
<div>Manchester Utd - Arsenal</div>//First match
<div id="2532"></div> //This should output the result between Man Utd and Arsenal.
<div>Liverpool - Blackburn</div>//Second match
<div id="2538"></div> //This should output the result between Liverpool and Blackburn
</body>
</html>

My problem is that I don't know how to generate the output in Javascript/PHP since the id:s in the div-tags will be different depending on which matches are played the current day. It would be ideal if I could have a PHP-script that queries the DB and returns the id:s and corresponding scores. It needs to output something similar to:

document.getElementById("2532").innerHTML=req.responseText;
document.getElementById("2538").innerHTML=req.responseText;

The id:s 2532 and 2538 above cannot be hard coded and must be created dynamically.
0
hieloCommented:
It's becoming difficult to help you without knowing what you have already in place. A URL would help. Just a quick thought, at load time you can filter all the divs that have an id that is entirely numeric and use this info to pass it the server so the server know what info to send back. Refer to the code below.
<script type="text/javascript"><!--
window.onload=getData;
function getData(){
	var divs = document.getElementsByTagName("div");//get list of all the <div>'s on document
	var divList=[];//to save only those with numeric id's
	var re = /^(\d+)$/;//to determine if id is entirely numeric
	for(var i=0,limit=divs.length; i < limit; ++i)
	{
		if( divs[i].match(re) )//check if <div>'s id consists entirely of a number
		{
			divList[divList.length] = RegExp.$1;//save the number
		}
	}
	//at this point divList contains all the div's with the numeric ids
	//you can use it to make one ajax request per id.
}
//--></script>

Open in new window

0
merson99Author Commented:
Hi! Sorry for the late response. I understand that it's difficult without examples but the problem is that I don't have too much in place at the moment. I'll try to solve it without xmlhttprequest (http://www.phpit.net/article/ajax-php-without-xmlhttprequest/) and if that doesn't do it I'll come back with a more detailed example.

Thanks anyway!
0
merson99Author Commented:
I will request the question to be closed...
0
hieloCommented:
@Zone Advisor: I object. I gave a lot of examples and support. If you follow the thread carefully you will realize what I am talking about. Furthermore, if the issue was not resolved it was because the poster practically abandoned the thread (look at the timestamp of my last technical post and look at his response date) and NOT because of lack of support.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
merson99Author Commented:
Well, I'm new at Experts Exchange and I've tried to figure out how it works. I truly appreciate your help even though your proposed solution did not solve my problem, partly because it was hard to explain and I could not provide code samples. I cannot accept the solution since it would be missleading to others, but I would gladly award you points for your effort if that is possible without accepting the solution.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.