Is this possible?

I have a php Message Board file where the users can post messages. The messages are pulled using a while loop. Would it be possible to update the board without reloading the page? I've seen this on some ajax scripts.

 

Yes it is possible. You send a request via AJAX to a PHP or ASP file and echo out the data you want to use.

 

Thanks. I just spent a few hours learning ajax.

I found this tutorial:

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

This seems to be exactly what I'm looking for. If I could modify the load function to call it automatically every 2 seconds it would be perfect.

But that's not the problem. The problem is that only html seems to work with that function. I typed some php in the load.php file and tried to echo it through ajax, but only html is shown... Php doesn't work. Any ideas?

 

Nevermind, it was a problem with my server. Now I just have to figure out how to make it call it automatically after x seconds.

 

I don't use JQuery, I just use plain javascript, but I hope this helps.


Javascript code:

//call self
t = setTimeout('yourfunction()',500);

Code (markup):

 

That worked, thanks, but I also found a built in jquery function for that. This is the code I use right now:

<script type="text/javascript" src="jquery/jquery.js"></script>
  <script>
  $(document).ready(function()
  {
	//ajaxTime.php is called every second to get time from server
   var refreshId = setInterval(function() 
   {
	 $('#pullphp').load('mailboxinc.php');
   }, 1000);
   //stop the clock when this button is clicked
   $("#stop").click(function() 
   {
   	clearInterval(refreshId);
   });
  });
   </script>
<div align="center" id="pullphp"></div>

Code (markup):

It works. There's one weird thing though. The pulled php file can't access the variables that are in the mother page. Would there be a way around that?

Example:

mailboxinc.php -

<?  // uses functions in config.php to connect to db etc etc

// pulls user messages from the database and echoes them

?>

PHP:

motherpage.php :

<?
include("config.php");

$somevar = 1;

?>

<script type="text/javascript" src="jquery/jquery.js"></script>
  <script>
  $(document).ready(function()
  {
	//ajaxTime.php is called every second to get time from server
   var refreshId = setInterval(function() 
   {
	 $('#pullphp').load('mailboxinc.php');
   }, 1000);
   //stop the clock when this button is clicked
   $("#stop").click(function() 
   {
   	clearInterval(refreshId);
   });
  });
   </script>
<div align="center" id="pullphp"></div>

PHP:

I expect the messages pulled fromt he db to be echoed, but instead I get errors that functions that are defined in config.php are not defined - so I assume it can't access the variables and functions in other files that are in or included in the mother page.

 

I think I have to include all the config files in the mailboxinc.php file again.


Edit: Yup, I can access the config vars and functions now, but not the ones that are in the mother page... I could redefine them there though too, but this is starting to lose it's point. I don't want the included page to get too heavy. I'll wait for your response.

 

Not exactly sure what you want to do but if I am understanding correctly you want to pull some variables from one file to another? If so you could use PHP sessions.

PHP code:

<?PHP
session_start();
$_SESSION['yourvarname'] = $yourvariablename;
?>

Code (markup):

If the function that you want the variables from is run then you can get the variables by simpliy starting the session on your new page and getting your variable name through session backward ($yourvariablename = $_SESSION['yourvarname']; )

 

I see, it seems to work. I have never used sessions before. Is it safe to store the variables to sessions? Can the client view or modify them? If yes, then this option is out for me...

 

Thanks for the help by the way! I can't believe I've managed to make a dynamic mailbox system.

Right now everything is perfect except this - since the reload interval is set to 1000 milliseconds it takes one second to load the page (the included page). Would it be possible to make it load immediately on the first click, but after 1000 milliseconds after that?

Here is the code:

<script type="text/javascript" src="jquery/jquery.js"></script>
  <script>
  $(document).ready(function()
  {
	//ajaxTime.php is called every second to get time from server
   var refreshId = setInterval(function() 
   {
	 $('#pullphp').load('cboardinc.php?rnd=<?=$rnd?>');
   }, 1000);
   //stop the clock when this button is clicked
   $("#stop").click(function() 
   {
   	clearInterval(refreshId);
   });
  });
   </script>
<div align="center" id="pullphp"></div>

Code (markup):

I get what I want when I change the 1000 to 1, but it will continue calling the page that fast after the first click and that's something I don't want... Would there be a way around it?

 

My solution to the problem. I store the unix time stamp to a variable and use javascript to make a new variable for the interval. From here on javascript: If the php time variable equals time (got to find a function to pull unix time using js), then { $interval = 1; } else { $interval = 1000; }

What do you think?


Edit:


var foo = new Date; // Generic JS date object
var unixtime_ms = foo.getTime(); // Returns milliseconds since the epoch
var unixtime = parseInt(unixtime_ms / 1000);

if(unixtime == <?=$time?>){

var ival = 1; }
else{
var ival = 1000;
}


It doesn't seem to work as I expected though. I expected it to call the page every one millisecond for one second and then return to the normal interval (1s), instead it keeps reloading every 1 millisecond.

 

Yes sessions are very hard to hack through so they are secure, much more secure than cookies.

For your second question I'm not 100% sure what you want, but if that last bit of code is in javascript, the variable would not change because once the page is loaded PHP is already finished parsing it. If it is in the AJAX javascript part I would need to see the code because AJAX pulls PHP variables through echo and into .responseText

If I am understanding correctly, you want to run the script first at 1 ms and after that at every 1 s. If this is right I would just create an if statement around the setInterval function with a variable that if it isn't set it runs the 1 ms code and if it is set it runs the 1s code.

Something like this.

Javascript code:

//outside of the function write var1 = 0;
//inside write this around your setInterval function
if(var1 === 0)
{
// run 1 ms code
var1 = 1;
}
else
{
// run 1 s code
}

Code (markup):

 

Yes, I want to run the script at 1 ms first (so when the user visits the page, the included page is displayed immediately, not after one second), and after that at every 1 s.

My code was just js. I thought that by storing the unix time stamp to a variable and then comparing it to the unix time stamp is created with js, it would work since the php variable only changes when the page is reloaded and the js variable keeps updating. At least that's how I thought js works.

I like the logic in your code, but I couldn't get it to work correctly. It just keeps going at 1 ms.

I tried this:

var var1 = 0;
if(var1 == 0){

var1 = 1;
var ival = 1; }
else {

var ival = 1000; }

  $(document).ready(function()
  {
	//ajaxTime.php is called every second to get time from server
   var refreshId = setInterval(function() 
   {
	 $('#pullphp').load('cboardinc.php?rnd=<?=$rnd?>');
   }, ival);
   //stop the clock when this button is clicked
   $("#stop").click(function() 
   {
   	clearInterval(refreshId);
   });
  });
   </script>

PHP:

And I tried this:

var var1 = 0;
if(var1 == 0){
	
	
	 $(document).ready(function()
  {
	//ajaxTime.php is called every second to get time from server
   var refreshId = setInterval(function() 
   {
	   
	 $('#pullphp').load('cboardinc.php?rnd=<?=$rnd?>');
   }, 1);
   //stop the clock when this button is clicked
   $("#stop").click(function() 
   {
   	clearInterval(refreshId);
   });
  });
	 
	 

var var1 = 1;

}else {

 $(document).ready(function()
  {
	//ajaxTime.php is called every second to get time from server
   var refreshId = setInterval(function() 
   {
	   
	 $('#pullphp').load('cboardinc.php?rnd=<?=$rnd?>');
   }, 1000);
   //stop the clock when this button is clicked
   $("#stop").click(function() 
   {
   	clearInterval(refreshId);
   });
  });
 
}

PHP:

I don't understand why doesn't it work. Isn't javascript dynamical? It's like the var1 is only checked once and it doesn't matter if it changes.

 

I also tried to do it exactly how you explained:

var1 = 0;

  $(document).ready(function()
  {

	
  if(var1 === 0){
   var refreshId = setInterval(function() 
   {
	   $('#pullphp').load('cboardinc.php?rnd=<?=$rnd?>');
   }, 1);
   var1 = 1;
  } else {
	  var refreshId = setInterval(function() 
   {
	   $('#pullphp').load('cboardinc.php?rnd=<?=$rnd?>');
   }, 1000);
  }
 
  });

Code (markup):

Still the same. Hmm.

 

Okay. Let's see. If this code:

$(document).ready(function()
  {

	
  if(var1 === 0){
   var refreshId = setInterval(function() 
   {
	   $('#pullphp').load('cboardinc.php?rnd=<?=$rnd?>');
   }, 1);
   var1 = 1;
  } else {
	  var refreshId = setInterval(function() 
   {
	   $('#pullphp').load('cboardinc.php?rnd=<?=$rnd?>');
   }, 1000);
  }
 
  });

Code (markup):

is not in a function then it will only be run once which means that it'll only run the var1 = 0; code. Another point that might be the problem is that once you use the setInterval function it has been used and you have to stop it to use it again. I think you have to use something like a clearInterval function. Google it and see if that is the function you need. One of those might be your problem.

~imozeb

 

Yup, that seemed to be the problem. I managed to get it to work using this:

 $(document).ready(function()
  {

   var refreshId = setInterval(function() 
   {
	   $('#pullphp').load('cboardinc.php?rnd=<?=$rnd?>');
   });
   
      var refreshId = setInterval(function() 
   {
	   $('#pullphp').load('cboardinc.php?rnd=<?=$rnd?>');
   },1000);
  
  });

Code (markup):

There is one thing that's worrying me a bit. If someone was to leave that window open for a day it would do 3600 requests per hour. I'm going to try to create something that only lets the client hold the window open for 15 minutes before they have to refresh or visit the page again. Again, if you have any suggestions, I'd love to hear them.

I figure I should use the php time() function to store the unix time to a variable and then use a javascript or php piece in the included file to check if the difference between two times is 15 minutes or not, if it is then an error would be displayed.

Edit, seems that it can easily be done in js:


clearInterval(refreshId); // the function to stop it

setTimeout("alert('15 minutes has passed.');",900000); // 15 minutes

Would it be possible to connect those two? So when the timeout reaches 15 minutes it calls the clearInterval(refreshId); function?

setTimeout("clearInterval(refreshId);",900000); did not seem to work

 

Try this: setTimeout('clearInterval(refreshId)',900000);

 

clearInterval(refreshId); works by itself, but not when the setTimeout function calls it. Weird.

setTimeout('clearInterval(refreshId)',900000); even calls it, I noticed that when the time ran out it stopped for half a second or so and then rushed back in.

 

Mabye you could use:

function1()
{
clearInterval(refreshId);
}
setTimeout('function1()',900000);

 

I can only get it to work without the timeout function which is odd... or not. It seems to stop for a second and then starts loading again.

I think it must be done in jquery.

This is the code that was with the script I use (to stop it from calling the php file when the button is pressed). Perhaps it can be modified to stop calling the file when the time runs up?

   //stop the clock when this button is clicked
   $("#stop").click(function() 
   {
   	clearInterval(refreshId);
   });

Code (markup):

I don't quite understand the $.. part.