I would like one DIV on my page to automatically refresh after 10 minutes. I don't want to reload the entire page, just the one part.
This is the PHP that I am using:
function fblikes() {
$pageID = $_GET['id'];
$pagename = json_decode(file_get_contents('http://graph.facebook.com/' . $pageID));
echo $pagelikes->likes;
}
And this is what I want to be refreshed automatically:
<div>
<span><?php fblikes(); ?></span>
</div>
Can somebody help me with this please?
Quoting myself:
You cannot 'reload a div'. A div is just a single element on an
entire webpage, and on its own it has no URL it was loaded from, so it
cannot be reloaded. You can set/replace the contents of a div with an
Ajax call, but that's definitely not 'reloading' - you'd need to
explicitly define the URL to load its new content from.
You need to write some Javascript, use setTimeout to schedule a function for execution in 10 minutes, and then use an Ajax call to retrieve JSON or HTML data that is then either parsed or placed in the relevant span element.
In your very specific situation you can make your own life easier by using the Facebook clientside Javascript API, and just issue a FB.api(...) call every 10 minutes since that appears to be what you want.
use JQuery/Ajax for that.
Example:
function reloadDiv() {
$.ajax({
url: URL_TO_YOUR_PHP_SCRIPT,
type: 'get',
success: function(result) {
if (result) {
$('#YOUR_DIV').html('<span>' + result + '</span>');
}
}
});
}
and use setTimeout to reload this div every 10 minutes like:
setInterval("reloadDiv()", 600000); // 60 * 1000 * 10
Related
I would like to auto refresh a specific div (with the class 'autotest') every 3 seconds and I use this script to do so:
<div class="autotest">some variable</div>
setInterval(function() {
$('.autotest').load(window.location.href + ' .autotest');
}, 3000);
and it kinda works but it includes the tag upon refreshing so it look like this:
<div class="autotest">
<div class="autotest">some variable</div>
<div class="autotest">some variable</div>
</div>
The first time it refreshes it ends up like above. The next time it refreshes it doesn't add more divs. On each refresh it updates the variable which is good.
What is wrong here?
You need to add a query parameter like "isajax=true" to your request to inform your php code that this is an ajax call and it does not need to include the surrounding div to the output.
In your php file you can simply add an if clause to send different outputs based on the query param:
if (!empty($_GET['isajax']) && $_GET['isajax'] == 'true') {
// response without html tag
} else {
// normal html response
}
Thank you for your help #Alimo. I couldn't get it to work but it was probably me. I decided to put my variable in another page and then simply load that one.
setInterval(function() {
$('.autotest').load('autotest.php');
}, 3000);
i use a ajax refresh like this:
<script language="JavaScript">
$(document).ready(function() {
var refreshId = setInterval(function() {
$("#refresh_technik").load('refresh/technik.php');
}, 1000);
});
</script>
I have a dashboard, in my Dashboard i include the top_navigation.php and the div "refresh_id" is within the top_navigation.php.
The refresh/technik.php looks like:
$db_3s = new Database("3s");
$anzahl_stoerungen = $db_3s->executeQuery("SELECT * FROM 3s_stoerungen WHERE status = 'open' ");
$stoerungen_gesamt_aktuell = $anzahl_stoerungen->getRowCount();
echo $stoerungen_gesamt_aktuell;
In my top_navigation.php i can see on the right top the value from $stoerungen_gesamt_aktuell. It works fine.
But now i will do some other php stuff with the $stoerungen_gesamt_aktuell on the dashboard.php. But it's not possible! The $stoerungen_gesamt_aktuell is empty! It's also not possible to use the variable within the top_navigation.php.
Greetings
Dennis
It sounds like you are trying to use the value of $stoerungen_gesamt_aktuell after it is loaded via your ajax request, other locations of the page, not just the "#refresh_technik" div. You cannot continue to use a PHP variable, that you loaded through ajax, on the dashboard.php page, as if it were part of the page itself. However, you can load the value into a JavaScript variable, and then use javacript to reuse it on the page. I recommend that instead of using the .load() function of jQuery, you actually do a full ajax request with $.get(). Then store the result of that value in a javascript variable, then, use the javascript variable elsewhere on the page, after it is loaded. Something like this looks about right:
function reuse_my_value(val) {
$('#refresh_technik').text(val);
$('#some-other-location').text(val);
// do stuff with val variable
}
// shortcut for $(document).ready(function() {
$(function() {
$.get('refresh/technik.php', function(r) {
reuse_my_value(r);
}, 'text');
});
Hopefully this will get you what you need. Let me know if I misunderstood the question.
thanks for your help. You understand it right. But i think i made a mistake with your code or i misunderstood it.
Now i take your code and combine it with mine, i think there is my mistake, or?
My main problem was, i try to write a little ajax, that inform the user about a new malfunction. Another user write a new malfunction into the database.
I found a code and it works for me:
var old_count = <?php echo $_SESSION["anzahl_technische_stoerungen"] ?>;
setInterval(function(){
$.ajax({
type : "POST",
url : "refresh/technik.php",
success : function(data){
if (data > old_count) {
$.notification(
{
title: "Error notification",
content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s.",
error: true,
showTime: true,
border: true
}
);
old_count = data;
}
}
});
},1000);
My basic idea was:
1) The user log in to the system, a session will be start with the actual number of malfunctions.
2) The update function checks all new malfunctions and if there is a new one, the div will be reload and on the mainsite a php script compare the to variables.
3) The session variable will be unset every 5 minutes and make a new variable.
It was not possible to use the variable from the ajax request to comapre it with the session variable.
BUT NOW!!!!
I found the code above. It works for me and it solves my main problem.
But the Session variable (var old_count) only renew when the user reload the page. I think there will help your script.
The old_count renew all 5 minutes, and the refresh/technik.php renew all minute.
I am stuck again with a problem, let me explain it to you.
Inside the div I have fetched data with HTML SIMPLE DOM from other site. Like
<div id="data">.....</div>
It will refresh each and every time user will refresh the page. But I want something extra. What I wanna do is, refresh the div (inside which external data is fetched and added) periodically after 5 seconds.
Both the PHP SIMPLE HTML DOM script and this div is on same page.
Now I only need, any jquery or javascript code to refresh the div with data id after each 5 seconds with new data fron other site and all this without refreshing the whole page.
UPDATE:
I have used this code
$(document).ready( function() {
function getTheTime(){
$.get('http://your-domain/file.php',function(data,status){
$('#data').html(data);
});
}
var refresh = setInterval(
"getTheTime()",
5000
);
});
But the problem is very very strange, why it is not refreshing the div? Infact I have set alert for the interval but it also didn't worked. What the real problem is? Why it is not getting data from file.php and why actually it is not refreshing the div??
I am using latest jquery CDN. http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
$(function() {
setInterval(function(){
$('#data').load('site.php');
}, 5000);
});
Definitely a job for AJAX...
Since you say you're already using jQuery, I'll walk you through the steps quickly to get an AJAX function set up and run it on an interval.
Step 1: Create a PHP file which gets the data you want to put in the DIV...
Just make a PHP file and put the code in to get the data:
<?php echo "The time is " . date('Y-m-d H:i:s');
Step 2: Set up an AJAX function to get the data from that file...
function getTheTime(){
$.get('http://yourdomain.com/ajax/getthetime.php',function(data,status){
$('#data').text(data);
});
}
(It would be possible to use the .load function instead, but it's far less flexible if you want to do anything with the data before putting it in the DIV).
Step 3: Call that function on an interval...
Next, we need to set up an interval to call the new function every 5 seconds.
$(function(){
var refresh = setInterval(
getTheTime(),
5000
);
});
Instead of using setInterval to call the function every 5 seconds, you can use simple long polling technique to refresh your div every 5 seconds. The problem with setInterval is that if the ajax request doesn't complete in specified time (5 secs here) there will be the chain of ajax requests.
function getTheTime(){
$.ajax({
type: "POST",
url: "http://your-domain/file.php",
success: function(response) {
$('#data').html(response); //update your div
},
complete: function(){
setTimeout(
getTheTime, /* Refresh time */
5000 /* ..after 5 seconds */
);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
//display you error message
},
timeout: 5000 //Timeout is necessary to prevent chaining of unsuccessful ajax request
});
}
I've got a div that randomly shows 1 of 10 files on each pageload. I'd like this to reload on a set time interval of 8 seconds, giving me a different one of the 10 files each reload.
I've read a few of the related questions using jQuery .load as a solution but this doesn't quite work with my code since I'm not loading a specific file each time.
This is my div content:
<div id="tall-content">
<?
$random = rand(1,10);
include 'tall-files/' . $random . '.php';
?>
</div>
Thanks
Using only PHP to accomplish this is impractical. This example uses jQuery and PHP.
$(document).ready(function() {
$("#div").load("random.php");
var refreshId = setInterval(function() {
$("#div").load('random.php');
}, 8000);
$.ajaxSetup({ cache: false });
});
random.php
$pages = array("page1.php", "page2.php", "page3.php", "page4.php", "page5.php");
$randompage = $pages[mt_rand(0, count($pages) -1)];
include ($randompage);
while using PHP to generate the random content, you cannot get the div to reload that content without refreshing the entire page.
A better solution is to use AJAX. You can store that PHP code that's inside the div container as a seperate file, and use ajax to request that php file. You can also set an infinite loop to request the php file every 8 seconds. Here is a sample, but you will need to re-code it to your specification:
<script language="javascript" type="text/javascript">
<!--
function ajaxFunction(){
var ajaxRequest;
try{ajaxRequest = new XMLHttpRequest();} catch (e){try{ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try{ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");} catch (e){alert("Error: Browser/Settings conflict");return false;}}}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById('tall-content').innerHTML = ajaxRequest.responseText;
}
}
var url = "random.php";
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
//-->
</script>
The only missing part is the refresh timer, since I do not program a lot in javascript I can't help you there. But the goal in this case is to create a file "random.php", put the random generator there, and use this script above to make an ajax request to random.php, which will place the output of that php script in the div container with the id of "tall-content". So really, you need to create another javascript which loops indefinitely calling the function "ajaxFunction()" and wait 8000 milliseconds .
If you want to do this while the user is sitting back in the chair on your page, the answer is javascript.
You could use this function for example.
function recrusive_timeout_function() {
setTimeout(function() {
recrusive_timeout_function();
}, 8000);
}
If you want to include a php file in that div (which outputs some html). Ajax is your friend and JQuery as a user friendly and easy to use javascript framework which handles your thinks really nice.
I would like create an event where users can post some content every 10 minutes.
So, the submit button must be allow during 1 minute for that. Moreover, users can check a countdown during the unallow period.
Is it possible with JavaScript/jQuery or PHP?
Yeah, when the page loads you can start with the submit button disabled by default in the html markup.
then use a coundown timer, here is a jquery one that I have used before
http://keith-wood.name/countdown.html
Click on the callbacks tab in the link provided for code examples, inside your callback/trigger function you will add the following javascript or something similar.
$('#submitButtonId').attr('disabled', 'false);
Try this:
In your php post method set the next time in a session var:
<?php
//intser post code
$_SESSION['next_post'] = time() + (10 * 60);
Then in your template print this js:
<script>
var nextPostTime = <?=$_SESSION['next_post']?>;
setInterval(function(){
if((new Date()).getTime() > nextPostTime ){
$('#newpostID').show(); // this is the element id of the form
setTimeout(function(){
$('#newpostID').hide();
nextPostTime = (new Date()).setMinutes((new Date()).getMinutes + 1)
}
,60000);
}
}, 1000);