Develop Reference

Show a div during function call jquery

I'd like to display the #LoadingDiv while checkCoupon is firing, and have it disappear when it finishes, to show the function is in progress. checkCoupon is triggered by a button click (not displayed).
I've tried a variety of things including creating another function to include in onclick event, I've put this in different parts of the ajax call, and tried altering the CSS in different ways. It's still not working.
Any idea how to get this functionality and have this display properly at the beginning of the call starts?
function checkCoupon() {
var coupon = document.getElementById('couponCode').value;
var coupon_v = false;
$('#LoadingDiv').css('display', 'block');
$.ajax({
type: 'post',
url: 'coupon.php',
async: false,
data: {
'coupon': coupon
},
success: function(data) {
if (data != "empty") {
coupon_v = data;
}
}
})
}
<div id="LoadingDiv" style="display:none;">One Moment Please...<br />
<img src="images/progressbar.gif" class="displayed" alt="" />
</div>

You can hide the div on ajax complete function which is called when the request finishes (after the success or error callbacks are executed):
complete: function(){
$('#LoadingDiv').hide();
}

You can make use of jQuery's beforeSend and complete methods to address states before and after the call:
function checkCoupon() {
var coupon = document.querySelector('#couponCode').value;
var coupon_v = false;
let $loading = $('#LoadingDiv');
$.ajax({
type: 'post',
url: '.', //coupon.php
async: false,
data: {
'coupon': coupon
},
beforeSend: function() {
$loading.removeClass('hide')
},
success: function(data) {
if (data != "empty") {
coupon_v = data;
}
},
complete: function() {
// timeout only used for demo effect
window.setTimeout(function() {
$loading.addClass('hide')
}, 1500)
}
})
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="LoadingDiv" class="hide">One Moment Please...<br />
<img src="images/progressbar.gif" class="displayed" alt="" />
</div>
<input type="hidden" id="couponCode" value="3" />
<button onclick="checkCoupon()">Click</button>

I had the same issue. I know this is an older question by now, but obviously still relevant as I ran into the same conundrum.
I would call the showLoadingOverlay() method which would make the loading div visible, then run the function I wanted to run and then hide the loading overlay, but the overlay would never show. I finally found that the issue was that the function I was performing after showing the loading overlay was happening too quickly and it would pause the process of showing the overlay until it was done and then the hide function on the overlay was being called too quickly afterwards when the show method was able to resume. This is why it appeared that nothing was happening at all.
So, you need to delay the function you are trying to call (I used the setTimeout() method). The 400 in the setTimeout() method is 400 miliseconds that will be delayed before performing the processFunction method. Here is a generic way to accomplish your goal:
Javascript:
/******************************************************************************************
* Toggle loading overlay.
* ***************************************************************************************/
/**
* Toggle the loading overlay in order to prevent the user from performing any actions.
* The processFunction must call the endLoadOverlay method once it is finished.
* #param {any} processFunction The process to perform while the loading screen is active.
* This method must call the endLoadOverlay method once it is done.
*/
function startLoadOverlay(processFunction) {
$('#overlay').css('display', '');
setTimeout(processFunction, 400);
}
/**
* Ends the loading overlay.
* */
function endLoadOverlay() {
$('#overlay').css('display', 'none');
}
/******************************************************************************************
* End of toggle loading overlay.
* ***************************************************************************************/
Then when you call the startLoadOverlay() method pass the method that you want to accomplish through it. In my example I'm having a button click event call the overlay method:
HTML:
<button id="btnDoAction" type="button" onclick="startLoadOverlay(myFunctionToAccomplish);">Accomplish Something</button>
Remember, myFunctionToAccomplish() is the method that I want performed while the overlay is visible. NOTE: The method that you pass to the startLoadOverlay() method must call the endLoadOverlay() method after it is done processing in order to hide the loading overlay. So:
Javascript
function myFunctionToAccomplish() {
// Perform functionality.
//TODO: Add whatever functionality here.
// Once I'm done I need to call the endLoadOverlay() method in order to hide the loading overlay.
endLoadOverlay();
}
In case you are curious about my $('#overlay') element. The idea is basically from here: https://www.w3schools.com/howto/howto_css_overlay.asp

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();
})
}

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.

Loading indicator for xeditable

I am using X-Editable (earlier Bootstrap-Editable) for in-place editing.
While saving data on server takes approximately 2-3 seconds.
Meanwhile this time span, i want to put a loading indicator.
How do i implement this?

call an ajaxfunction to update contains the loading icon, like the function below:
function ajaxUpdate()
{
var def = '<img src="./images/loader.gif" />';
$('#loading').html(def);
$('#loading').show();
jQuery.post("<?php echo site_url('myController/updateDetails');?>", {
v1 : $('#v1').text(),
v2 : $('#v1').text(),
v3 : $('#v1').text()
},
function(response)
{
if(response==1)
{
//success area
$('#loading').hide();
}
else
{
// failure area
}
});
}
<div id="loading"></div>
when calling this function the loading image is displayed on the div with id loading
and after success of the ajax call it will be hidden.

where do i put jQuery .fade() function in ajax success callback?

I have an ajax call that is populating a portion of my page with the html it returning in the success callback:
function LoadCurrentCourses(masterKey, status) {
status = 'S';
$.ajax({
type: "GET",
url: "/Home/LoadCurrentCourses/?masterKey=" + masterKey + "&status=" + status,
dataType: "html",
success: function (evt) {
$('#currentCourses').fadeIn(1500, function () { $('#currentCourses').html(evt) });
},
error: function (req, status, error) {
$('#currentCourses').html("<p>Error occured retrieving current courses</p>");
}
});
}
the #currentCourses markup just has a header and loading .gif in there.
<div class="span4 moduleBox" id="currentCourses">
<h2>Current Courses</h2>
<img style="margin-left: 45%; margin-top: 5%; margin-bottom: 5%;" src="~/Images/11.gif" />
</div>
The ajax is being called from my main page on doc.ready():
<script>
$(document).ready(function () {
var masterKey = '#Model.MasterKey';
//load degree overview
LoadCurrentCourses(masterKey);
});
</script>
What I am trying to do is one the data gets returned I would like the html to slowly fade in to the main page, replacing the gif and header. Right now it works fine, everything loads, and is replaced, but I can't seem to figure out where I should put the jQuery .fadein() method.
Any ideas?

You should load the text before fading in
success: function (evt) {
$('#currentCourses').html(evt);
$('#currentCourses').fadeIn(1500);
},
You may also need to fadeout or hide that container before fading in, or it will appear to do nothing and just load the new data.

Should be like:
success: function (evt) {
$('#currentCourses').html( evt ).fadeIn(1500);
}
Fade in after the element is populated, otherwise calling .html() inside the .fadeIn() callback will result in:
fade--(fade ends)-->--(HTML applied)