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:=)
Related
<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.
I have to load 2 separate contents and then open up a balloon div to the page. both the contents take 1 seconds to load. So I open the div on 2nd contents load function's callback.
$("#term").load("/static/page/terms.html");
$("#term-realtor").load("/static/page/terms-realtor.html", function(){
$("div#balloon").fadeIn(500);
});
my problem is most of the time 2nd content take more time to load than 1st one. But sometimes 1st one take longer than 2nd one. And then balloon div starts to show up even thought 1st content has not finished loading. My question is how can I call the callback after both finish loading? Thanks in advance.
If you want to execute the two calls in parallel, I suggest to use $.get with $.when:
$.when(
$.get('/static/page/terms.html'),
$.get('/static/page/terms-realtor.html')
).then(function(response1, response2) {
$('#term').html(response1[0]);
$('#term-realtor').html(repsonse2[0]);
$('div#balloon').fadeIn(500);
});
There are other ways of course, you could add a callback to the $.get calls and set the HTML there. To learn more about promises, have a look at the jQuery tutorial.
how about this:
$("#term").load("/static/page/terms.html", function(){
$("#term-realtor").load("/static/page/terms-realtor.html", function(){
$("div#balloon").fadeIn(500);
});
});
I make use of jQuery and history.js to manage dynamic transitions between partial-pages; such that I avoid reloading entire documents. Some of these partial-pages call their own unique javascript files. While the transitions between pages work well, remnants of executed javascript remain active after the partial page that called it has been dynamically replaced.
How can I unload javascript that was introduced with a dynamic page load, and later asynchronously replaced by another page?
The finer details
Master template
My master template (used for all pages) can be thought of as a simple:
<html>
<head>
<script>
//scripts to manage asynchronous loading of partial-pages into #content div
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
User profile
One partial page that renders inside the #content div is for a user's Profile:
<script src="profile.js"></script>
<form>
<input type="file" name="profile-picture">
</form>
The contents of profile.js are similar to:
$(function() {
$('input').change(function() {
// upload profile picture asynchronously
});
});
User settings
Another partial page that is loaded inside the #content div of the master template is the user's Settings:
<script src="settings.js"></script>
<form>
<input type="text" name="first-name">
<input type="text" name="last-name">
</form>
The contents of settings.js are similar to:
$(function() {
setInterval(function() {
// auto-submit form every 10 seconds
$('form').submit();
}, 10000);
}
});
The problems
Certain javascript functions continue to run (e.g. setInterval) after the partial page that called them has been replaced by another.
This business of loading new javascript for each partial page feels messy; but for the life of me, I can't find any recommendations for best practices.
What is the better way to achieve this effect of dynamic partial-page loading/unloading while allowing page-specific scripts for each partial page?
Thank you!
Firstly...once you load javascript...you can't unload it
The setInterval problem will require using clearInterval
Declare some esoteric name that would make it fairly unique as a global variable when you initialize setiIterval; Make sure you declare the var outside of $(document).ready before using it
var my_super_form_submitter
$(document.ready)function(){...
my_super_form_submitter=setInterval(func.....
Then whenever you load a new page
if(my_super_form_submitter)
clearInterval(my_super_form_submitter)
As for collisions with other methods....you could adopt a content class protocol for your page specific code. On each page load, change class of content div...then use that class within selectors for jQuery
For first problem:
Question is what functions continues to run after replacing packages. SetInterval that you mentioned uses js timers, and simply replacing package wont stop timer automatically.
You should clear all timers started via setInterval before replacing.
E.g.
$(function() {
var timer = setInterval(function() {
// auto-submit form every 10 seconds
$('form').submit();
}, 10000);
}
function uninitialize(){
clearInterval(timer);
}
Just call uninitialize before replacing package, and it should work.
UnfortunatelyI don't know any proper way for loading partial pages, but I hope it helps you somehow (:
I have a wordpress theme, which has a dynamic element, sized by javascrip(jquery)t on loading of the post (single post, not listing page)
so:
<div class='some-div'>
<div class='content'>
<?php /* code to load posts */ ?>
</div>
At the moment I get the height of div.content with javascript and apply that height to another div.some-div
The problem is on slow connections the height calculations are done before the content has loaded
So, what I need is to run a javascript function ONLY once the post has finished loading
At the moment Im delaying the function, have the script at the footer, and use the 'defer' attribute, but I still happens
any ideas?
Why don't you try to save first the content of that div into a variable like
var my_js_var = <?php echo $content ?> ;
Then just say with a function to call the resize div function ONLY when the content stored into your div is equal to your 'my_js_var'
//Would be something like:
var my_content = <?php echo $content ?> ; //Downloading the content
//Timer to constantly check if the div is loaded correctly
var timer = window.setTimeout('refresh()',100)
function refresh () {
//if the content of your div is equal to 'my_content' variable
//then call the resize function of the div
//finally clear the timeout [clearTimeout(timer)]
}
Didn't test it out
Tell me if it works..
Best regards
You may run your calculations in the onload event to make sure that the images, texts etc. in your post has finished loading.
<body onload="YourCalculationFunctionHere">
Don't use the .ready() method of jquery for your calculations bacause it will run after the DOM was loaded not after the page(inc images, texts etc.) was loaded.
http://www.w3schools.com/jsref/event_onload.asp
Just to answer incase anyone has the same issue.
I was running the function before the dom had loaded, a simple mistake easily solved.
use
$(function(){
// code here
});
as a short hand for $(document).ready
I have banner code, which is not like images and hyperlinks. All I need is the javascript code that will refresh this code every 30 seconds without refreshing the rest of the page.
This banner code will be appear in chatroom. I would really appreciate any help.
The banner code:
<script language='JavaScript'
type='text/javascript'
src='xxxxxx/banner.php?uname=yyyy&type=2&rows=1' >
</script>
First thing you should do is wrap your code in a function. Trying to re-invoke an entire scripting file import is much more difficult than just invoking a function.
Once everything is wrapped in a function, you can use setTimeout to invoke the method. I would do something like this:
function drawBanner() {
// Do stuff to draw the banner.
// Make sure you handle the case that the
// banner is already present in the DOM!
}
function onDrawBannerTimer() {
// Set this function to fire again after 30 seconds.
// Note that this will fire it roughly every 30 seconds real-time.
// You can move this statement to after the drawBanner() call
// in order to make it 30 seconds between the end of one
// invocation and the start of the next.
setTimeout(onDrawBannerTimer, 30 * 1000);
drawBanner();
}
// Trigger the first invocation when the script is loaded.
onDrawBannerTimer();
you'll want to give that script tag an ID (such as id='dynScript') and then have another script block that does pretty much the following: [Note: I'm using jQuery]
<script>
$(document).ready(function(){
setTimeout ( $('#dynScript').attr('src','xxxxxx/banner.php?uname=yyyy&type=2&rows=1'), 3000);
});
</script>