Html page reloading without refresh - javascript

<script>
setInterval(function(){
$.ajaxSetup({ cache: false });
$('#scrip-data').load(location.href + " #scrip-data");
}, 30 * 1000);
</script>
I am trying to reload a div without reloading the page.One thing I noticed the size of the layout getting smaller even the letters. Data I am getting from database. Its working fine except the page render which can be ignored but I want to fix this issue
Any help will be appreciated

It looks like you're trying to reload the html of that Div every 30s.
One thing that might be happening is that the jquery you posted here replaces the target div' (#scrip-data) internals with the loaded html.
What is likely happening is you might have divs inside each other. From the jQuery docs:
"This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded."
So you might have multiple "#scrip-data" divs after this code runs.

To refresh a div, you can do like this
<script>
$(document).ready(function(){
setInterval(function(){
$("#here").load(window.location.href + " #here" );
}, 10000);
});
</script>
<div id="here">dynamic content ?</div>
The div reloads automatically every 10 seconds.

Related

How to update content using JavaScript without showing that it is refreshing "blink"?

I m trying to update content in my page without refreshing the whole page just by refreshing the div using javascript.
However it does the job, the output is giving the "blink" at set interval to update content.
How can i avoid to hide the "blink" while updating the content.
Here's the code so far :
index.php
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
</head>
<body >
<div id="curve_chart"></div>
<br><br>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$('#curve_chart').load('load.php');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#curve_chart').load('load.php');
refresh();
}, 2000);
}
</script>
</body></html>
the load.php contains the content which comes from db.
Now , how do i update the content fetched in load.php in index.php without giving the blink effect for every 2 sec of set interval.
Thanks in advance for every single soul who took a min in going through this. I respect your time.
Try to use .ajax for the call and see if the blinking goes away. .load sometimes recreates the element rather than update it and that causes the blinking when fetching a large amount of data
Edit:
$.ajax({url: "demo_test.php", success: function(result){
$("#curve_chart").html(result);
}});
I figured it out. Thank you all for your time and taking a look at it.
All i had to do is to shift the data fetching code as well as just the data interpreting code to the load.php which is getting refreshed every set interval time. leave the rest divs or sections behind in index page.
Thanks once again.

Auto-refresh content inside a div?

I know this question has been asked several times. And I have read all the threads without coming to a solution. I use Wordpress, together with a plugin, this plugin lets me add events to it. I use the "shortcode"/[slug] on a Wordpress page. This displays the events I have added. If I add or remove an event I need to manually refresh the page to see this.
My goal is to be able to see the new events (and removed) without refreshing the whole page.
If I check the page with chrome together with the source I find that a div id="vs" is what contains all the events.
I have made an addition to the plugin where I've created a javascript.
jQuery(document).ready( function($) {
var auto_refresh = setInterval(
function() {
$.ajax({
url: "https://example.com",
success: function( data ) {
$("#vs").html( $(data).find('div').html());
}
})
}, 5000); // refreshing after every 5000 milliseconds
})
What happens is that it is refreshed automatically. But it displays a lot of elements, and it is a duplicate of the content that was already there. And everything is offset too.
I really don't know what to try?
And also, the page which this is displayed on is a slider, both displaying the same slug, but it only "works" on the first slider.
Any ideas?
So it's a little hard to answer without seeing what all the dom looks like but it sounds like you are not replacing the content but rather just adding to it over and over again. As a result, slowly the width content is getting smaller and smaller which is why you get the indenting affect. My guess is you're using .html when you want to be using .replaceWith
http://api.jquery.com/replacewith/
var auto_refresh = setInterval(
function() {
$.ajax({
url: "https://example.com",
success: function( data ) {
$("#vs").replaceWith( $(data).find('div').html());
}
})
}, 5000); // refreshing after every 5000 milliseconds
If this doesn't work I think we need to see what your dom looks like.

How to refresh or reload a div's content using Ajax

This is somehow. i normally use jquery's load to load content from page A into page B , so loading a div's content into itself in order to just refresh it doesn't make much sense. What's the solution for this?
$('#A').load('pageX.php #A');
Please note that both #As are on pageX making it the same #A
This somehow interferes with the JavaScript in a bad way after that "load" i don't know why.
So these is simply to refresh a div.
An id must to unique in html document otherwise you'll end up having expected results for JavaScript.
In your case you need to remove duplicate id's
Something like this
$('#A').load('pageX.php #B');
or this will work:
$('#B').load('pageX.php #A');
Because of people coming to this question, if I were to do this again now, I would do it like this.
HTML
<html>
<body>
<div class="divToRefresh"></div>
</body>
</html>
JavaScript(JQuery)
<script>
$(document).ready(function(e) {
$.refreshDiv = function(arg){
var d = {someVariable_you_can_send:arg}
$.ajax({
url:'url_to_div_content',
data:d,
type:"POST"}).done(function(result){
$('.divToRefresh').html(result);
});
};
//////////call this for the first time//////////
$.refreshDiv('some value');
//////////////////////////// and then refresh it after a certain interval if you need to
window.setInterval(function(){
$.refreshDiv('some value');
}, 1000*60*60*60);
});
</script>

Javascript won't load using jQuery Mobile with navigation-geolocation

I am having an issue with jQuery Mobile, javascript and get geolocaton.
I am currently using following to get the code to load, when I enter the page:
$(document).on('pageinit', function(){
If the user has set visibility to visible, a div with the ID visible is shown, this I use to call the geolocation the first time:
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler, errorHandler);
}
After this I call the geolocation every 20th second:
setInterval(function() {
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler);
}
}, 20000);
My issue is, if I leave the page for one of the subpages, and return to this page, these codes won't run again. I have tried the following to load the javascript, instead of pageinit:
$(document).on('pagebeforeshow', '#index', function(){
and
$(document).on('pageinit', '#index', function()
I tried loading it in the body of the index as well.
Any help would be greatly appreciated =)
Regards, Fred
Firstly, you may want to consider replacing navigator.geolocation.getCurrentPosition() with navigator.geolocation.watchPosition(). This will call your success or error handler functions each time the device receives a position update, rather than you needing to ping it every 20 seconds to see if it has changed.
With regard to page changing, so long as you’re using a multi-page template, then the handler function should get called while navigating to and from any sub-pages.
Here’s a JS fiddle illustrating this
Hope this helps!

Refresh a div tag once

Just looking for a way to refresh the content of a DIV tag once. For example, lets say your markup is:
<body>
<div id="RefreshOnce">
<?php include('loading.php') ?>
</div>
</body>
I know how to update the content of that DIV tag using a Javascript with ajax to refresh it multiple times to say another file called content.php. I can't seem to figure out how to just make it refresh one time.
The function is basic: div loads a loader page with cool loading image, then waits 2 seconds and loads the actual content once.
First, load the div content from one resource and then reload it from another resource, after some time.
<script type="text/javascript">
$(function() {
$('#fooDiv').load( 'a.html' );
setTimeout( reloadDiv, 5000 );
});
function reloadDiv() {
$('#fooDiv').load( 'b.html' );
}
</script>
Use these two javascript functions:
setTimeout() - executes a code some time in the future
clearTimeout() - cancels the setTimeout()
You can lookup examples here: http://www.w3schools.com/js/js_timing.asp
You just place an AJAX request in your function, and clear the timeout just after. Job done:=)

Categories