Run function if data changed - javascript

I am new in jQuery and can't figure how to succesfully run the script I use in my pages. The problem is I need to fade in and out text only if there are changes in my load.php file but not constantly like it is now, please help anyone... Many thanks!
Here is my code:
$(document).ready( function(){
$('#auto').load('load.php');
refresh();
});
function refresh()
{
setTimeout(function() {
$('#auto').fadeOut('fast').load('load.php').fadeIn('fast');
refresh();
}, 2000);
}

Try this:
function refresh()
{
setTimeout(function() {
$.get('load.php', function(data) {
if (data !== $('#auto').html()) {
$('#auto').fadeOut('fast').html(data).fadeIn('fast');
}
refresh();
});
}, 2000);
}
This makes the request outside of load(), and only fades in/out + replaces the content if it's different.

Related

How to have AJAX fire API call on page load as well as every `setInterval()` time period?

Beginner here:
I have a simple AJAX component that executes a GET API call every 3 seconds:
<script>
$(document).ready(
function() {
setInterval(function() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
}, 3000);
}
);
</script>
This works perfectly fine... it calls and gets value from my NodeJS server code every three seconds; As it should. But this is only after the page loads. I would like to fetch the values on page load, and every three seconds after that. How would I do that?
Move your code to function and to setTimeout. Call it on load and every 3 seconds:
<head>
<script>
function loadValue() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
setTimeout(loadValue, 3000);
}
loadValue();
</script>
That way your function will call itself every 3 seconds, no need for domready
I would do it this way:
<script>
var loadValues = function() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
};
$(document).ready(
function() {
loadValues();
setInterval(loadValues, 3000);
}
);
</script>
Separate your AJAX call in a separate function:
function loadAjax() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
}
then use it in the setInterval and once after document is loaded as follows:
<script>
//declare ajax request as separate function
function loadAjax() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
}
//call once after page is loaded
loadAjax();
$(document).ready(
//use the same in setInterval
setInterval(loadAjax, 3000);
);
</script>
As you can see in this question, you should call both setInterval and the function if you want the interval to start immediately.
<script>
function call() {
$.get('/value_one', function(res) {
$('#value_one').text(res);
});
$.get('/value_two', function(res) {
$('#value_two').text(res);
});
}
$(document).ready(function () {
call();
setInterval(call, 3000);
});
</script>
But actually i think that the best option is to render the data for the first time from the server and then you only need interval to update the data every 3 seconds. You can use ejs for that.
Another think, i think you need to refresh 3 seconds after the last update (after the server respond), not every 3 seconds.

Alert button's inner content after clicking it

Please, help fix bug: the code currently alerts undefined instead of button's inner contents
function registerClickHandler() {
$('#clickme').click(function() {
setTimeout(function() {
alert(this.innerHTML);
}, 200);
});
}
this inside the timeout handler is not the button
function registerClickHandler() {
$('#clickme').click(function (e) {
setTimeout(function () {
alert(e.currentTarget.innerHTML);
}, 200);
});
}
Try to get the value before setTimeout
function registerClickHandler() {
$('#clickme').click(function () {
var value=this.innerHTML;
setTimeout(function () {
alert(value);
}, 200);
});
}
In java script this points to the last function and inside the timeout handler is not the button, thats why you are getting the error.
Also it's a good practice implement this kind of functions or onclicks using on.('click', function(){...})
below you can see my example:
$(document).ready(function(){
$('#clickme').on('click', function (e) {
setTimeout(function() {
alert(e.currentTarget.innerHTML);
}, 200);
});
});
You can take a look and run it here: http://jsfiddle.net/gon250/6qwk0g1t/1/
Try putting the click eventhandler outside the function. Also pass the value of 'this' to a variable before calling setTimout. Later use this variable inside setTimout. Read more about Javascrpt prototypes here
$(document).ready(function(){
$('#clickme').click(function() {
var me = this;
setTimeout(function() {
alert(me.innerHTML);
}, 200);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">click me</div>

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() { ... }

Loading GIF to match with the loading time of a DIV. Jquery

I have a javascript that retrieves the values checked from a set of checkboxes and loads a DIV passing those values.
Currently I show a "loading" .gif before the load of the DIV. However, it has time fixed.
I would like to set the time of this GIF until the DIV has loaded its contents completely, so the user knows that data is loading in case sometimes is slower than others.
Any idea?
Thanks!
$(function() {
$("input[type='checkbox']").on('change', function() {
var colors = [];
$("input[type='checkbox']:checked").each(function() {
colors.push(this.value);
});
if (colors.length) {
$(".loadingItems").fadeIn(300);
$(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
$(".indexMain").fadeIn(slow);
});
$(".loadingItems").fadeOut(300);
} else {
$(".loadingItems").fadeIn(300);
$(".indexMain").load('indexMain.php', function() {
$(".loadingItems").fadeOut(300);
});
}
});
});
As suggested by #Fabricio Matte, the solution was to put the first Fade Out inside the load
inside the function launched with the load:
$(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
$(".indexMain").fadeIn(slow);
$(".loadingItems").fadeOut(300);
});

Getting jquery to delay after adding a class

I want a script to halt before continuing after adding a class, below are two attempts that seem to fail.
window.setTimeout($("#"+item).addClass("highlight"), 5000 );
$("#"+item).addClass("highlight").delay(5000);
Where am I going wrong here?
Another way:
$("#"+item).addClass("highlight");
setTimeout(function(){
//rest of the code
}, 5000);
You want something like:
function addClassAndDelay(item, nextMenu) {
$("#"+item).addClass("highlight");
window.setTimeout(function() { restOfCode(nextMenu); }, 5000);
}
function restOfCode(nextMenu) {
jQT.goTo('#'+nextMenu, 'slide');
}
May be you are looking for the jQuery Highlight plugin?
$("#mydiv").click(function () {
$(this).effect("highlight", {}, 3000);
});

Categories

Resources