ajax page refresh once loading page has finished - javascript

i have this js/ajax code:
<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('/copy/copy.php');
}, 4000);
});
// ]]></script>
<div class="container"></div>
but i need to make sure the 'copy.php' has fully loaded until it refreshes again

The .load() function provides a callback to use once the loading has completed:
$('.container').load('/copy/copy.php', function(){
// the load has completed successfully.
});
Use this callback to initiate the reloading of the content.

I would use a recursive-ish setTimeout instead:
function refreshContent() {
$.get('/copy/copy.php').done(function (content) {
$('.container').html(content);
}).always(function () {
setTimeout(refreshContent, 4000);
});
}
This way, the 4 second timer won't start until the call has finished.

Related

closed! jquery get function and callback

I have a trigger button on my page that activate to load code from another htmldoc into a div on my page.
Works great like here:
https://blog.kulturbanause.de/2012/12/inhalte-per-ajax-jquery-nachladen/
I take this code:
<script>
function kb_source_2_target() {
$.get('source.html', function(data) {
$('#target').html(data);
})
}
</script>
Now I want my trigger-button to start a second function after loading the code in the div.
in the loading code there is a div, f.e. class="divtofadeoutafter loading"
i want to trigger now the loading and then the fadeout of an other div in the loaded content.
Can I do this with a callback?
I tried this:
<script>
function kb_source_2_target() {
$.get('source.html', function(data) {
$('#target').html(data,
function callback(){
$(".divtofadeoutafterloading").fadeOut();
}
);
})
}
</script>
thanks for any idea
stefan
There is no callback in html() so you just need to do it inline since it is a synchronous operation.
function kb_source_2_target() {
$.get('source.html', function(data) {
$('#target').html(data)
$(".divtofadeoutafterloading").fadeOut();
})
}

AJAX Refresh Div Not Functioning

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$.get('points.txt', function(data){
$('#show').html(data);
},1000);
});
});
</script>
<div id="show"></div>
I have the above script running, and in points.txt there's a number which keeps changing.
It's suppose to refresh the div every second.
Now, for some reason, the script ain't working. What am I doing wrong?
Your second param of timing function is not given to the setInterval, and not the get. Also I guess your request is getting cached. Try this:
$(document).ready(function() {
setInterval(function() {
$.get('points.txt?' + (new Date).getTime(), function(data){
$('#show').html(data);
});
}, 1000);
});
Or tell the AJAX, not to cache data:
$.ajaxSetup({
cache: false
});
I believe there is incorrect formatting of your code. Parameter 1000 is added as third parameter to get function. Instead it should be like this:
$(document).ready(function() {
setInterval(function() {
$.get('points.txt', function(data){
$('#show').html(data);
});
},1000);
});

Removing an Ajax loader image after sometime

I have an ajax loader that appears after a button is clicked with the following code:
jQuery(document).ready(function($){
{
$.getElementById('form').onsubmit = function () {
$.getElementById('submit').style.display = 'block';
$.getElementById('loading2').style.display = 'block';
};
}(document));
});
HTML:
<input type="submit" class="button alt" onclick="$(\'#loading\').show();" name="woocommerce_checkout_place_order"/>'
I would like the ajax loader to disappear after like 10seconds.
Please let me know
You can use this to hide your loader after 10 seconds.
setTimeout(function() {
$('#loading').hide(); // I wasnt sure which one you wanted to hide
$('#loading2').hide();
}, 10000);
Also looking at your code im not sure if that would have worked anyway. Also if you are using jQuery then you don't really need to use vanilla Javascript so your code could be changed to this.
jQuery(document).ready(function($){
$('#form').submit(function () {
$('#submit').css('display', 'block');
$('#loading2').css('display', 'block');
});
});
$(function() {
// setTimeout() function will be fired after page is loaded
// it will wait for 10 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
$("#loading").hide('blind', {}, 500)
}, 10000);
});
Note: In order to make you jQuery function work inside setTimeout you should wrap it inside
function() { ... }

How To Call Function on page Loading

I'm Using Web service using AJAX Call In My HTML Page . Web Service Returning Data Nearly 30 to 40 second's .
During This Loading Time I Need to Use Some Loading Gif Images After Data Completely Received Form Web Service The Loading Image Must Be Hide.
I'm Using Only HTML,JAVASCRIPT,CSS,J Query.
Any Idea Or Samples Needed.
I'm Using Following Code
$(document).ready(function () {
document.write('<img src="http://www.esta.org.uk/spinner.gif">');
});
$( window ).load(function() {
//This following Function Related To My Design
jQuery(".chosen").data("placeholder", "Select Frameworks...").chosen();
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
});
In The Above Code My Problem Is On Page Load Gif Image Show But It's Not Hide Only Gif Image Only Showing.
Put a hidden image on your page and as soon as your ajax call is made, make that image visible
$('#image').show();
$.ajax({
complete: function(){
$('#image').hide();
}
});
and hide that image again on Complete of Ajax call.
Use your ajax request callback (on success/failure) instead of page load.
When sending the request just show a gif animation by setting the Display to block
then when you have the data set the display to none
or use jquery
function showHourGlass()
{
$("#gifimage").show();
}
function hideHourGlass()
{
$("#gifimage").hide();
}
You ask for ideas, I have one sample -
http://www.myntra.com/shoes
load scroll down fastly this is the ajax jquery request which is exact output which you have mentioned in your question
Check source code
Jquery Ajax loading image while getting the data
This what the html looks like:
<button id="save">Load User</button>
<div id="loading"></div>
and the javascript:
$('#save').click(function () {
// add loading image to div
$('#loading').html('<img src="http://preloaders.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');
// run ajax request
$.ajax({
type: "GET",
dataType: "json",
url: "https://api.github.com/users/jveldboom",
success: function (d) {
// replace div's content with returned data
// $('#loading').html('<img src="'+d.avatar_url+'"><br>'+d.login);
// setTimeout added to show loading
setTimeout(function () {
$('#loading').html('<img src="' + d.avatar_url + '"><br>' + d.login);
}, 2000);
}
});
});
I hope this will help you.

jquery load() after ajax page is loaded - howto

i have following lines included at the bottom of my index.php:
<script type="text/javascript" language="javascript" src="class/jquery-1.4.3.min.js"> </script>
<script type="text/javascript" language="javascript" src="class/jquery.nivo.slider.pack.js"></script>
<script type='text/javascript' language='javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
problem lies in $(window).load ...
index.php's body is updated onload through ajax call which delivers div#slider upon matching. this makes it nivoSlider() not executing. do you have any trick to make this thing work. i do prefer non-jquery way around it, but at the end of the day anything helps.
many thanks
WEBPAGE IS HERE
Add the call in the callback for the AJAX load.
$('.something').load( 'http://www.example.com/foo', function() {
$(this).find('#slider').nivoSlider();
});
Example using your code (for body):
$(function() { // run on document ready, not window load
$('#content').load( 'page.php?c=2&limit=5', function() {
$(this).find('#slider').nivoSlider();
});
});
For link:
<!-- updates links like so -->
<a class='nav' href='page.php?category=art&limit=5&c=1'>art</a>
// in the same document ready function
$('a.nav').click( function() {
var $link = $(this);
$('#content').load( $link.attr('href'), function() {
$(this).find('#slider').nivoSlider();
$link.addClass('selected'); // instead of setting bg directly to #828282;
});
return false; // to prevent normal link behavior
});
Would you not want to use $(document) rather than $(window)?
$(window).load(function() {
$('#slider').nivoSlider();
});
or shorthand
$(function() {
$('#slider').nivoSlider();
});

Categories

Resources