onclick inside Ajax call - javascript

I have an ajax call that on success create an element. When the element is clicked, a spinning gif needs to be displayed while another action is being done (creating jquery datatables). Then the gif should disappear. In my case everything works except for the fact that the gif is loading after the jquery datatables is created and therefore only shown very briefly. I want it to start as soon as I click the element, but this is not the case.
ajax{
element.create();
element.click(){
startLoadingGif();
drawJqueryDataTables();
stopLoadingGif();
}
}
I would appreciate any help.

What you need to do is this. startLoadingGif() before the request is made and stopLoadingGif(); after the completion (success or failure) of the request:
startLoadingGif();
$.ajax({
...
complete: function (data) {
stopLoadingGif()
}
});
UPDATE:
$.ajax({
...
complete: function (data) {
element.create();
element.click()
startLoadingGif();
drawJqueryDataTables(); //Or you can make this a promise if it takes a longer time and after that is resolved you can stop the spinner. Or,
window.setTimeout(()=>{
stopLoadingGif();
}, 2000)
});

Related

Reveal and conceal CSS animation

So I have an animation that will reveal something, this is visible in a few places on my site.
However I am now trying to reveal and conceal a modal overlay.
This appears over the modal form when submitting, and disappears when the AJAX call returns some data.
The problem is that the animation gets stuck after 'concealing', which means I cannot click submit and have it 'reveal' again.
Before AJAX:
<div class="loadingElement animate-reveal" style="display:none;">...</div>
AJAX Start:
$(".loadingElement").show();
AJAX Success:
$(".loadingElement").removeClass("animate-reveal");
$(".loadingElement").addClass("animate-conceal");
If you want to take a look for yourself please go to:
http://halden.101test1.co.uk/college/
You are removing the animate-reveal class from your element which is going to make it never animate again. Right where you do $('.loadingSignin').show(); you need to re-add that animate at the beginning of your ajax query.
Just toggle the two necessary classes which will all you to have the animation and display your element.
Where your AJAX begins add the following line:
$('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');
Here is what that starting block would be:
if (form.valid()) {
$('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');
$(".loadingSignin").show();
Then paste the exact same thing again where your ajax call is finished.
success: function (data) {
// log data to the console so we can see
console.log(data);
$('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');
Result:
So I found a solution but it feels somewhat hack-y, feel free to still weigh in.
AJAX Success:
$(".loadingSignin").addClass("animate-conceal");
$(".loadingSignin").one("animationend webkitAnimationEnd", function () {
$(".loadingSignin").hide();
$(".loadingSignin").removeClass("animate-conceal");
$(".loadingSignin").off("animationend webkitAnimationEnd");
});

Show wait cursor on button click before executing synchronous ajax request

I try to change the cursor to a wait cursor after the users clicks on a button.
Therefor i add the class "wait" to the body which has the follwing logic: cursor: wait !important;
Please take a look at the Button Event Handler below. As you can see, right after i add the class "wait" to body, i call a function which executes an synchronous ajax request.
This request will delete about 300 files on the server and then reloads the page afterwards.
<div id='mybutton'>Button</div>
Button Event Handler
$("div#mybutton").click(function(){
$("body").addClass("wait");
delete_all();
});
CSS
body.wait, body.wait *{
cursor: wait !important;
}
delete_all()
function delete_all() {
...
list.each(function(){
...
$.ajax({
url: "ajax.php",
type: "POST",
async: false,
data: { cmd: "delete_files", ... },
success: function(response) {
console.log(response);
},
error: function(response) {
console.warn(response);
}});
...
});
//Reload the page
window.location.reload();
...
}
Problem: The Cursor never changes to a waiting cursor because of the synchronous ajax request, if i change async to true then it works, but i need it to be synchronous.
Is there a workaround or another solution for me, other then setting async to true?
This is because the window.location.reload() will reload your page and the class you set using $("body").addClass("wait"); will be lost. Instead, remove that class in your success and error and make sure you are using async:true.
You may use a flag like this:
On the button click:
loading = true;
runWaitingCursor();
And here is the runWaitingCursor function:
runWaitingCursor = function(){
if(loading == true){
$("body").addClass("wait");
}else{
$("body").removeClass("wait");
}
}
and on ajax success run:
loading = false;
runWaitingCursor();
A little late to this conversation, but the cursor: wait; css doesn't visually take effect because the browser CHOOSES to not re-render the DOM before it starts your sync AJAX call. Basically, the style is applied, but the DOM does not re-render because most modern browser rendering engines wait until the JavaScript thread is idle before the DOM is updated.
A quick fix for this behavior is to make the css class change via JavaScript, then put your long-running code behind a setTimeout delay, usually about 20ms.

Ajax start event issue

Im trying to show a progressbar when my page is doing an ajax request.
I have a div with an image inside it and i would like to show it on the ajaxStart event. The problem is the img only shows itself when the ajaxStart event is done. However the alert is fired before the ajax request.
$(document).ajaxStart(function () {
alert("test");
document.getElementById('LoadingDiv').style.visibility = "visible";
});
$.ajax({
url: url,
async: true,
dataType: 'json',
success: function (data) {
Posted abit to early changed async to true and works now.
You can show/hide loading spinner like this:
/*LOADING SPINNER*/
jQuery.ajaxSetup({
beforeSend: function() {
$('#loadingDiv').show()
},
complete: function(){
$('#loadingDiv').hide()
},
success: function() {}
});
The #loadingDiv simply contains an animated image. The ajaxSetup method set default values for future Ajax requests.
That means that this loading indicator will be shown every time when making ajax calls.

Why does $.load( handler(eventObject) ) not work for data returned from server after Ajax request, trying to make it wait for all images to load

I need to keep displaying the loading gif until all images
in the returned data (html) have been finished loading.
The data and everything is returned properly, but the .live('load', function() {})
is never executed, have tried without the .live as well. The contents of #ContentBody
just get replaced with the returned html data (#LoadingLayer disappears too of course) and I can see images loading as usual.
<script type="text/javascript">
$("#RightLink").click(function (event) {
event.preventDefault();
var tourl = $(this).attr('data-ajax-url');
$.ajax({
type: "POST",
url: tourl,
dataType: "html",
async: true,
beforeSend: function () {
$("#LoadingLayer").show(); //show layer with image loading gif
$('#ColumnContainer').hide();
},
success: function (data) {
$('#ContentBody').html(data).live('load', function () { $("#LoadingLayer").hide(); });
}
});
});
</script>
HTML layout:
<body>
<div id="ContentBody">
<a id="RightLink" href="/store/ContentBodyGenerator" />
<div id="LoadingLayer"><img src="loading.gif" /></div>
<div id="ColumnContainer">... Main contents, lots of images here</div>
</div>
</body>
Why don't you just hide #LoadingLayer directly?
$('#ContentBody').html(data);
$("#LoadingLayer").hide();
Edit:
I misread your question, I don't think there is an easy way to detect that all images have been loaded. I suggest you try the waitForImages plugin.
Try changing the contents of the "success" function to this...
$('#ContentBody').html(data).live('load', function () {
var imgcount = $(this).find("img").length;
$(this).find("img").one("load", function() {
imgcount--;
if (imgcount == 0) {
$("#LoadingLayer").hide();
}
}).each(function() {
if (this.complete) $(this).load();
});
});
It waits till html(data) is loaded and then gets an image count. It then adds an event handler to each of the images to decrement the image count when the image is loaded. The one("load" code means only allows the following code to run once, and the each code basically says "if it's already loaded (as per cached images) then run the load event".
Once the image count is 0 it hides the loading layer.
Without a URL where I can run this through the console I can't be 100% sure it's accurate, so it may need a fiddle about. If you get stuck give us a shout.
Try binding the load event to the images. Keep track of how many have loaded, and remove the loading layer only after they've all loaded. This is untested code but should give you an idea:
success:function(data){
// Set the content
$('#ContentBody').html(data);
// How many images do we have?
var images = $('#ContentBody img'),
leftToLoad = images.size();
// Listen for load event *FOR IMAGES*
images.bind('load', function (){
// Hey look we loaded one, was that the last one?
if(--leftToLoad === 0){
// Yep, we're done
$("#LoadingLayer").hide();
}
});
}
If you'd rather use live than handling in the ajax callback, do this in your $(document).ready callback:
$('#ContentBody img').live('load', function(){...});
Should do the trick.
Cheers

jQuery Ajax Loader

Greetings,
I would like to know what should I do to make appear a ajax loader...
actually I am calling a function in ajax... everything is going well
here is how it's being done
$('#txtEmail').blur(function()
{
$.post("ajaxAvailability.aspx",{ email:$(this).val() } ,function(data)
{
if(data=='false')
...
Now I would like to have a loader so I done it like this:
$('#loader').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
This should be working? what is happening is that I am getting an exception inside the jquery.js....
-thanks in advance
I usually do this in my code:
$('#txtEmail').blur(function(){
var value = $(this).val();
//display loader image
$("#indicator").html("<img src='PATH/loading.gif' alt='' /> Sending...").show();
$.post(URL,
{ email:value },
function(data) {
$("#indicator").empty().hide();
//...
});
)};
In above code, the animated image will appear inside DOM element with id="indicator". After AJAX request completed, I emptied the container, then hide it. Adjust this according to your page element.
My another code use jQuery blockUI, usually when submitting form, to prevent double submit. Check the web for the usage example.
Greetings, for everyone
The solution for this issue is correct the jquery-1.3.2-vsdoc2.js file
on the ajax function there are f parameter, this should be replaced into callback

Categories