need help can get multiple instances to work!

[jac.kock]

hi all,

 

i'm not very good whit AJAX and i cant seem to get it to work properly

 

i have a ajax script that i use in my website and it works fine for one div to refresh, i want to edit the script so i can use it for more div's to refresh so i need to make it ready to more than 1 instance of the script.

 

now i have edit the script and now the both div's ( more in the future) refresh every second and not at the specified time's

 

i included both the original and edit script! Can some please help me to get it to work?

 

PHP to call the script:

<?php
?>
<style type="text/css">
.head-tr
{ 
border-color: #FF2A2A; 
} 

.head-td
{ 
border-width: 7px; 
border-style: outset;
border-color: #FF2A2A; 
}
</style>
<table width="200">
  <tr>
    <td valign="top" align="top" bgcolor="#BE1F1F">
	  <script type="text/javascript"><!-- // orginal script call
		refreshdiv(); // -->
	  </script>
	  <div id="shownews"></div>
	</td>  	
  </tr>
</table>

<table width="200">
  <tr>
    <td valign="top" align="top" bgcolor="#BE1F1F">
  <script type="text/javascript"><!-- // edited script call
refreshdiv(30,'mynews','table.php'); // -->
  </script>
  <div id="mynews"></div>
</td> 
  </tr>
</table>



Script orginal:

// Customise those settings
var seconds = 30;
var divid = "shownews";
var url = "table.php";

////////////////////////////////
//
// Refreshing the DIV
//
////////////////////////////////

function refreshdiv(){
// The XMLHttpRequest object
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}

// Timestamp for preventing IE caching the GET request
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// Start the refreshing process
var seconds;
window.onload = function startrefresh(){
setTimeout('refreshdiv()',seconds*1000);
}

Script edited:

// Customise those settings
////////////////////////////////
//
// Refreshing the DIV
//
////////////////////////////////

function refreshdiv(mysec,mydiv,myurl){
var seconds = mysec;
var divid = mydiv;
var url = myurl;

// The XMLHttpRequest object
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}

// Timestamp for preventing IE caching the GET request
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout(refreshdiv(mysec,mydiv,myurl),seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// Start the refreshing process
var seconds;
window.onload = function startrefresh(){
setTimeout(refreshdiv(mysec,mydiv,myurl),seconds*1000);
}

PHP witch shows the page:

<?php
if(file_exists("../../support/connect.dat"))    // user,pass and database file 
{ 
                include("../../support/connect.dat");                                   // database connection file 
} 
//################ connect to database ############## 
$link=mysql_connect($host, $user, $pass) or die(mysql_error()); 
mysql_select_db($data); 

$res='';
$res1='';
$sql="Select * from headlights where delete_tab='0' ORDER BY RAND() LIMIT 1"; // get only the none deleted! 
$res1=mysql_query($sql); 
$res=mysql_fetch_array($res1); 
$hltxt=$res["krant_item"];

if($hltxt=='')
{
  $hltxt="Geen nieuws items gevonden.";
}
?> 
<!-- show the selected one --> 
<table width="100%"> 
  <tr> 
    <td class="head-td" valign="top" align="top" bgcolor="#FF2A2A"> 
 	  <font color="white" size="6px">Nieuws:</font>
 	</td>
  </tr>
  <tr>
    <td class="head-td" height="150px" valign="top" align="top"> 
	   <font color="white"><? echo $hltxt; // show the none deleted item?></font> 
	</td>   
  </tr> 
</table>

thnx all!

[gristoi]

It is 2014 , not 2004. use Jquery to create multiple instances of ajax calls

[jac.kock]

It is 2014 , not 2004. use Jquery to create multiple instances of ajax calls

 

hi,

 

so it is 2014 and this solves my problem, this is youre help???

I said i 'm not very good or good with this!

 

so please explain how i gonna solve this with 'Jquery' or how to implement this in the file?

 

all i need is one simple function to call trough out the website formthe div's i want to refresh and set a different refresh rate (seconds) to them!!

 

so please help me if tryed to change it for weeks and i can seem to get i right!

 

thnx

[kicken]

so it is 2014 and this solves my problem, this is youre help???

I said i 'm not very good or good with this!

The point of the comment was that you should be using jQuery as it will simplify your ajax interactions greatly. For instance it has a simply .load method you can use to request a URL and drop it's contents into a div. 

 

You then just create timers for each of your divs that you want to refresh and call the .load function whenever the timer ticks.

 

Note that browsers will limit you to two concurrent requests typically. If you have a bunch of divs trying to refresh at the same time, you'll be better off scripting things so that you get all the data for each div in a single request. Otherwise some will be delayed until the others are finished.

[jac.kock]

The point of the comment was that you should be using jQuery as it will simplify your ajax interactions greatly. For instance it has a simply .load method you can use to request a URL and drop it's contents into a div. 

 

You then just create timers for each of your divs that you want to refresh and call the .load function whenever the timer ticks.

 

Note that browsers will limit you to two concurrent requests typically. If you have a bunch of divs trying to refresh at the same time, you'll be better off scripting things so that you get all the data for each div in a single request. Otherwise some will be delayed until the others are finished.

 

oke that i find logical, however i dont understand ajax and jquery very wel i understand it a bit im a newbee about those languages :| 

 

can you write the proper code for this and i understan wath you mean with the timer problems and thats no issue because the most times a div wil be refreshed is not at the same time's some take 30 sec some 5 min ect.

 

thnx for your fine answer and i'll hope that you will help me with the code!

[kicken]

As a very simple example:

<script type="text/javascript">
//Wait til the document is ready before running our code.
//This is necessary to ensure all the dom elements exist.
//See: http://api.jquery.com/ready/
jQuery(function($){ 
   //Set a recurring timer that will trigger every 30 seconds.
   //See: https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval
   setInterval(function(){
      //Select the DIV we want to change the contents of
      var $target = $('#targetDiv');

      //Ask jQuery to load the given URL into the DIV's content area
      //The URL has to be local to your site, you cannot load something external
      //See: http://api.jquery.com/load/
      //And: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript
      $target.load('yourUrl.php');
   }, 30000);
});
</script>
<div id="targetDiv"></div>

http://jsfiddle.net/jXLK8/1/

[jac.kock]

As a very simple example:

<script type="text/javascript">
//Wait til the document is ready before running our code.
//This is necessary to ensure all the dom elements exist.
//See: http://api.jquery.com/ready/
jQuery(function($){ 
   //Set a recurring timer that will trigger every 30 seconds.
   //See: https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval
   setInterval(function(){
      //Select the DIV we want to change the contents of
      var $target = $('#targetDiv');

      //Ask jQuery to load the given URL into the DIV's content area
      //The URL has to be local to your site, you cannot load something external
      //See: http://api.jquery.com/load/
      //And: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript
      $target.load('yourUrl.php');
   }, 30000);
});
</script>
<div id="targetDiv"></div>

http://jsfiddle.net/jXLK8/1/

 

 

oke thnx i see what you mean now, but how do i call this function and how do i make this function universial to call and set 1. timers 2. file to load 3. div name to refresh?

 

thnx alot already:)

[jac.kock]

oke thnx i see what you mean now, but how do i call this function and how do i make this function universial to call and set 1. timers 2. file to load 3. div name to refresh?

 

thnx alot already:)

 

 

Can some help me with this problem???

 

thnx all