Reload a DIV without reloading the whole page - javascript

I have a Div Tag that has a php include to fill that div with information
what I want to do is make it so that the page is called every 15s so it can update the information there without having to reload the whole webpage.
I've tried to do this with JavaScript/jQuery and I just can't seem to get it to work
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
</script>
<div class="View"><?php include 'Small.php'; ?></div>
this is what I have after searching some, and what happens is, it loads the Small.php but it doesn't refresh it or update the info every 15 seconds.
please help!
I should add all my php arrays that should show up are all executed in the Small.php and the page I'm including it into is just so it's isolated.
EDIT: What No One noticed was that my first script referencing jQuery did not have a closing tag, and that was breaking my second script. after adding in a proper closing tag, the script was finally working, but the fadeIn does not show properly without first using a fadeOut.

Your code works, but the fadeIn doesn't, because it's already visible. I think the effect you want to achieve is: fadeOut → load → fadeIn:
var auto_refresh = setInterval(function () {
$('.View').fadeOut('slow', function() {
$(this).load('/echo/json/', function() {
$(this).fadeIn('slow');
});
});
}, 15000); // refresh every 15000 milliseconds
Try it here: http://jsfiddle.net/kelunik/3qfNn/1/
Additional notice: As Khanh TO mentioned, you may need to get rid of the browser's internal cache. You can do so using $.ajax and $.ajaxSetup ({ cache: false }); or the random-hack, he mentioned.

try this
<script type="text/javascript">
window.onload = function(){
var auto_refresh = setInterval(
function ()
{
$('.View').html('');
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
}
</script>

Your html is not updated every 15 seconds. The cause could be browser caching. Add Math.random() to avoid browser caching, and it's better to wait until the DOM is fully loaded as pointed out by #shadow. But I think the main cause is the caching
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function(){
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php?' + Math.random()).fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
});
</script>

The code you're using is also going to include a fadeout effect. Is this what you want to achieve? If not, it might make more sense to just add the following INSIDE "Small.php".
<meta http-equiv="refresh" content="15" >
This adds a refresh every 15seconds to the small.php page which should mean if called by PHP into another page, only that "frame" will reload.
Let us know if it worked/solved your problem!?
-Brad

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" />
<div class="View"><?php include 'Small.php'; ?></div>
<script type="text/javascript">
$(document).ready(function() {
$('.View').load('Small.php');
var auto_refresh = setInterval(
function ()
{
$('.View').load('Small.php').fadeIn("slow");
}, 15000); // refresh every 15000 milliseconds
$.ajaxSetup({ cache: true });
});
</script>

Related

Preloader. "$.LoadingOverlay is not a function"

I tried already with muliple preloaders that can be found on the internet and with each of them I get the problem that they never show up. When I check what is going on, it always say that $.LoadingOverlay is not a function"
Been trying to implement this one but without any success
http://www.jqueryrain.com/?eKV1bCMa
my code:
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/loadingoverlay.js"></script>
<script src="js/loadingoverlay.min.js"></script>
</header>
This one below I've tried to put into multiple places, under closing body, after opening body or even in header
<script>
$( document ).ready(function() {
$.LoadingOverlay("show");
// Hide it after 3 seconds
setTimeout(function () {
$.LoadingOverlay("hide");
}, 3000);
});
</script>
It never worked out ;l
I need some help with it
I added the js minified in the js part and jquery 2.2.1 and it works like a charm, I think you should delete this
<script src="js/loadingoverlay.js"></script> from the header.
https://jsfiddle.net/o90psp2o/
I use the same function
$( document ).ready(function() {
$.LoadingOverlay("show");
// Hide it after 3 seconds
setTimeout(function () {
$.LoadingOverlay("hide");
}, 3000);
});

AJAX + jQUERY: load div instantly, then refresh every X seconds

I'm using jQUERY+AJAX to refresh a couple of divs every X seconds. I'd like to know what would be the way to load these divs immediately (for the first time) after the page was loaded and then wait (for eg. 30 seconds) for every refresh.
I've seen around that you name a function and then call the refresh. The truth is that I can't figure it out how to work it out with my code.
Here are my lines of code:
// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
//DIVs that are being loaded
$('#item01_tobeloaded').load('items/item01.php');
$('#item02_tobeloaded').load('items/item02.php');
}, 30000); // the "30000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]>
Any help will be really appreciated :)
Thanks!
<script type="text/javascript">
$(document).ready(function() {
$("#refresh").load("refresh.php");
var refreshId = setInterval(function() {
$("#refresh").load('refresh.php?' + 1*new Date());
}, 1000);
});
</script>
This little script loads and refreshes the div 'refresh' continuously, you can adjust it to your needs by changing 1000 to whatever value you need. 1000 will refresh it every second.
This line
$(document).ready(function() {
$("#refresh").load("refresh.php");
loads yor content on document ready, afterwards you can stick with your code

Refresh page after everything is loaded every 15 seconds

I would like when my page is refreshed automatically every 15 seconds, everything to be loaded once. I tried this code but it doesn't work.For example when an image is large,I do not want to see the image loading slowly,I want the page to be completely loaded(images, tables) in the background,and then to see all the changes once.Any ideas ? I tried this code but it does not work as I expected.
<script>
function autoRefresh1()
{
window.setTimeout(function(){ document.location.reload(true); }, 15000);
}
</script>
<body onLoad="autoRefresh1();">
After following the links in the comments I came to solution that solves my problem
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(
function() {
setInterval(function() {
$('#table').load("table.html");
}, 15000);
});
</script>
And the div inside the :
<div id="table" align="center"></div>
You can check to see if the page is fully loaded with the Document.readyState.
There are probably many ways to go about doing this, but I would have a CSS box overlay the entire page with a "loading" message. While the loading message is up, I would use a setInterval() to check the document.readyState. When the readystate returns complete, I would clear the initial setInterval(), hide the loading message, which would then reveal the rest of the page.

Javascript refresh php page when previous refresh has finished

I am using this code to refresh a PHP page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('.container').load('integra_data.php');
}, 2000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
<div class="container"><h3>Loading Data...</h3></div>
in javascript, rather than refreshing every X Seconds, can i make it refresh once the previous refresh has finished?
Use setTimeout instead setInterval.
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setTimeout(function() {
$('.container').load('integra_data.php');
}, 2000);
});
$( document ).ready(function(){}) everything inside of this will be ran after load of page has finished. so there should be delay of 2 seconds here..
If I got you right you want to refresh the content of the div in an infinite loop, right? If this is right, you could pass your call to load() as complete callback. You could do somethin like this (recursion):
$(document).ready(function() {
var loadFunction = function () {
$('.container').load('integra_data.php', loadFunction);
}
$.ajaxSetup({ cache: false });
loadFunction();
});
The loadFunction() will call itself every time the last run has finished. Refer to the docs if you want to know more about the complete callback. If you add a little delay, since it's not always the best idea to make request as fast as possible use the setTimeout() function. You could add it to the complete callback.

Refresh DIV contents every x seconds WITHOUT eternal page?

Here's an example:
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#photos').load('photos.php').fadeIn("slow");
}, 5000); // refresh every 10000 milliseconds
</script>
<div id="photos"></div>
The problem is the complexity of the other javascript on the page isn't really ideally for reloading the div from an external page. If it's the only way, I'll backtrack and work that out... I was just wondering if it's possible to refresh the div contents from the page itself?
You can read the whole page, then extract the element you're looking for:
$('#photos').load('YourPage.php#photos');
The server will still send the entire page to the client.
function refreshDiv(){
$('#photos').load('photos.php').fadeIn("slow");
setTimeout("do_again()", 5000)
}
function do_again(){
refreshDiv();
}
That would keep loading your jQuery every 5 seconds (5000ms).

Categories

Resources