jquery ajax success fade effects - javascript

I would like to do some effects like fadeIn to page once I get the ajax response.
I tried this,
$.ajax({
type: "post",
url: actionLink,
cache: false,
data: ....someData....,
success: function(data) {
$(".response").fadeOut(100);
$(".response").html(data);
$(".response").fadeIn(500);
}
});
This is working but data is displayed first and with a flash of 500ms getting data with fade effect but I need to get the loaded data directly with fade effect.
I even tried with Fade out a div with content A, and Fade In the same div with content B, but I still get the same issue.
I also tried:
$(".response").fadeOut(100).hide();
$(".response").show().html(data).fadeIn(500);
Still the same. How do I fix this?

This thing worked.........
jQuery(".response").fadeOut( 100 , function() {
jQuery(this).html( data);
}).fadeIn( 1000 );

Have you tried:
$(".response").fadeOut(100).html(data).fadeIn(500)

The easiest way I found was to set the initial fadeOut() to '0'. This worked perfectly:
$(".response").fadeOut(0).html(result).fadeIn(500);
As setting an initial fadeOut() with an actual value makes it 'pop' in, and then it fades in. Still not the desirable result.
So by setting the initial fadeOut to 0, means it doesn't spend a tenth of a second fading out before fading in. So you don't get a strange effect.

Try $(".response").fadeOut(100).delay(100).html(data).fadeIn(500)
This will force the subsequent operations (the addition of the html to your div) to wait until after the fadeOut has completed.

success:function(data)
{
$(".response").fadeOut(600, function ()
{
$(".response").html(data)
});
$(".response").fadeIn(600);
}

Concept is: Once ajax response received, fadeIn the message - wait for some seconds (delay) - fadeOut
Like this ------
$('div.errorul').fadeIn(600).html( 'msg' ).delay(1000).fadeOut(500);

Related

onclick inside Ajax call

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

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

How show the content of a div after the CSS inside is ready

I have this Code:
$.ajax({
type: 'GET',
url: 'url.php',
success: function(data){
$("div#mainclass").hide().html(data).fadeIn(100);
}
});
When the fadeIn triggers, I see for a very short time, the html flashing with no CSS-Style applied, before the CSS applies. This problem is only visible in Firefox, Chrome seems to be fast enough. How can I prevent the display, until the CSS is parsed and applied?
Of course, I already tried a few things, but no luck^^
$("div#mainclass").hide().html(data).delay(200).fadeIn(100);
// With Delay -> Same problem
$("div#mainclass").hide().html(data).ready(function(){
$("div#mainclass").fadeIn(100)
};
// Also the ready Function doesn't help here.
Thanks a lot!
try moving $("div#mainclass").hide() before the ajax call is made
$("#mainclass").hide().load('url.php', function() { $(this).fadeIn(100); });

jquery toggle(event,event) hide show question

Calling toggle takes a long time to load, so I'm trying to add a loading img while loading but it doesn't seem to load when you .showall is activated look at * in the following code
$('#loading').hide();
$(".showall").toggle(
function(){
$('#loading').show(1); // * added
$(".toggle_container").slideDown();
$('#loading').hide(); // * added
},
function () {
$('#loading').show(1); // * added
$(".toggle_container").slideUp();
$('#loading').hide(); // * added
}
);
The other response of calling hide in the callback is the correct approach, but I figured I'd answer to point out why.
There are actually multiple issues here. Your intention is to show #loading then slideup and once that is complete, hide #loading. However, when slideup is called, the animation is queued up and your code moves on, the code does not wait for slideup to complete and then move on to the next line. This is why you need to use the callback, to call hide after slideup completes.
Another thing that many people overlook is that show and hide when called with a duration are animations and are therefore queue, however, when no duration is passed these calls are NOT animations and will NOT be queued. So, calling show with a duration and then immediately calling hide with no duration will never show the element. See this for an illustration of that: http://jsfiddle.net/zZHhm/ notice that you never see DIV2.
Also, the durations passed to show and hide are in milliseconds, so hide(1) gives a duration of 1 millisecond (you may be aware of this).
I admit, something weird is happening while using show/hide with or without parameter. This version works, but I don't know why these methods without parameters doesn't behave as they should.
Code: ( http://jsfiddle.net/z3HRQ/2/ )
$('#loading').hide(1);
$('.showall').toggle(
function () {
$('#loading').show(1);
$('.toggle_container').slideUp(function () {
$('#loading').hide();
});
},
function () {
$('#loading').show(1);
$('.toggle_container').slideDown(function () {
$('#loading').hide();
});
}
);

Fade out, update by AJAX, fade in a div using Prototype

I have a div whose contents I want to update by AJAX. To make the transition smooth, I'd like to fade out the old contents, then update it with the AJAX response, then fade it back in.
My first attempt is as follows; but of course the AJAX can complete before the fade() call, resulting in appear() not firing properly and the end-state being faded out. How can I make this work as I want?
target = $('card_text_' + index);
new Ajax.Request('/games/card_text',
{asynchronous:false,
evalScripts:true,
method:'get',
parameters:'type=' + value,
onCreate: function(){target.fade()},
onSuccess: function(e){target.update(e.responseText).appear()}
});
Edit: For completeness, I'm using Prototype with script.aculo.us
I have found the solution I wanted, although the docs didn't make it easy. Turns out, all script.aculo.us Effects have a set of callbacks, including afterFinish. My code has become:
target = $('card_text_' + index);
new Effect.Fade(target, {afterFinish: function(){
new Ajax.Updater(target, '/games/card_text',
{asynchronous:false,
evalScripts:true,
method:'get',
parameters:'type=' + value,
onSuccess: function(e){new Effect.Appear(target)}
});
Most unmaintainable solution so far was to handle appear with timer and flags to see if both fade and request had completed.
Timer could be changed with function call after update and fade.
In both cases it tends to end in mess.
I think the better approach is to make the AJAX call first. Then, when it is done, fade the div out. When the fade is done, replace the contents and fade it back in.

Categories