I want a div to refresh automaticallywithout refreshing whole page - javascript

I have developed a comment system with ajax and its working fine. I want to add a ajax/js code to refresh my time ago div after every 5 seconds so that the time changes while one is on same post.
Please note:
Sir, i just want code to request server to refresh div after a specific time period. I do not want to load page or div but i want contents within that div should be refreshed after a specific period of time.
I'm new in js/ajax and Ii tried this but not working yet
$(document).ready(function () {
setInterval(function () {
$("#showtimeago!").load();
}, 1000);
});
Result I want is:
<div class="p_timeAgo" id="showtimeago"> <?php time_stamp($timePost);?></div>
Can anyone help me to solve that issue?

I don't know what UI you are using, here is for the php(since Jquery is same) you can tune this up for your requirement.
function loadlink(){
$('#showtimeago').load('test.php',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 5000);
Try this:
<div id="showtimeago"></div>
setInterval(function(){
$('#showtimeago').load('test.php');
},5000);
test.php is the page the refresher stand.

Related

Pop up on browser loads

I have done one sample project, In that i'm getting records from database and i'm showing it in browser in table form.While getting records from database browser loading 1 min (Approx).I want to show a popup that should appear on browser up to the time browser loads.I have tried with some javascript code but it loads upto some given time like 5 seconds or 10 seconds.
Can any one please guide me!
function yourFunction(){
$("#loading").show();
//do something
//For example I am just delaying 5 second to hidde loading
setTimeout(
function()
{
$("#loading").hide(); //after 5 seconds it will hide, you can use this at the end of your all operations
}, 5000);
}
yourFunction();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://d13yacurqjgara.cloudfront.net/users/12755/screenshots/1037374/hex-loader2.gif" id="loading" style="fixed"/>
Instead of popup use any loading gif image.
<img src="loading.gif" id="loading" style="position:fixed;"/>
In your js, when you start inserting operation write this code
$("#loading").show();
At end of your function write this
$("#loading").hide();

MVC How to add a delay on page load

My question is pretty simple(i think, but i cant find any reference, who wants to slow down their site,right?) and may sound ridiculous, but what I am trying to do is to have a splash screen on page load of the Home/Index of my site.
What I did is at the top of my page, I just added a simple div for my splash and use javascript to hide it when the page is loaded.
$(window).bind("load", function () {
// Remove splash screen after load
$('.splash').css('display', 'none')
})
but my problem is, my home index loads too fast (because its just plain text/html) hence the splash screen shows like .5 sec only. I want to add atleast 2-3 secs before it is removed, Im assuming I just need to add a line or two of code in my $(window).bind to pause for a couple of secs before doing $('.splash').css('display', 'none') but I dont know what or how to do it, please help! Thank you!
You can use setTimeout() to delay things in Javascript, like this:
$(window).bind("load", function () {
var delay = 5000;
setTimeout(function () {
$('.splash').css('display', 'none');
}, delay);
});
Timeout works.
$(window).bind("load", function () {
// Remove splash screen after load and 3 seconds
setTimeout(function() {
$('.splash').css('display', 'none')
}, 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.

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