• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 673
  • Last Modified:

Loading sequential files into a DIV with time delay using jQuery

I'm not well versed in jQuery but here goes -

Right now I'm using the following script to load the contents of 3 .php files into 3 corresponding DIVs that are reloaded every 20 seconds:

<script>
 $(document).ready(function() {
        $("#electionresults1").load("results.php1");
       $("#electionresults2").load("results.php2");
       $("#electionresults3").load("results.php3");
   var refreshId = setInterval(function() {
      $("#electionresults1").load('results1.php');
      $("#electionresults2").load('results2.php');
      $("#electionresults3").load('results3.php');
   }, 20000);
   $.ajaxSetup({ cache: false });
});
</script>

Is there a way to loop through the php files in a SINGLE DIV so that every 20 seconds the DIV is reloaded with the contents of the next file in the sequence?

ie
results1...results2...results3...results1...results2...etc...
0
JuanLoco
Asked:
JuanLoco
  • 3
  • 2
1 Solution
 
MacAnthonyCommented:
Is it not running every 20 seconds? The only thing I see wrong is the file names. You have results.php1 for the first set and results1.php in the second set. What happens? Do you get an error?
0
 
JuanLocoAuthor Commented:
Yea, sorry typo'd that when transfering - that code does work but it loads each php file into it's own DIV. I'd like them to cycle through the same DIV
0
 
JuanLocoAuthor Commented:
Sorry, here is the correct code that i'm using now

<script>
 $(document).ready(function() {
        $("#electionresults1").load("results1.php");
       $("#electionresults2").load("results2.php");
       $("#electionresults3").load("results3.php");
   var refreshId = setInterval(function() {
      $("#electionresults1").load('results1.php');
      $("#electionresults2").load('results2.php');
      $("#electionresults3").load('results3.php');
   }, 20000);
   $.ajaxSetup({ cache: false });
});
</script>
0
 
MacAnthonyCommented:
Ok, yeah, I misunderstood. You will need to put it into the same div or do some hiding of the other divs though. Easiest would be to use the same div

Try this:
<script>
 $(document).ready(function() {
        $("#electionresults1").load("results1.php");
       $("#electionresults2").load("results2.php");
       $("#electionresults3").load("results3.php");
   var index = 1;
   var refreshId = setInterval(function() {
      $("#electionresults1").load('results'+index+'.php');
      index = (index == 3)? 1 : index+1;
   }, 20000);
   $.ajaxSetup({ cache: false });
});
</script>

Open in new window

0
 
JuanLocoAuthor Commented:
EXACTLY! Works like a charm - Thank you very much :)
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now