jQuery Ajax and HTML callback

Question

I have this code, that executes when a link is clicked:

$.get(file.html, function(data) {           
  $('selector_1').html($(data).find('selector_2').html());
});

I would like to modify the code in such a way that when I click a link, the $.get command runs while selector_1 fades out, and when the HTML of selector_1 is placed, it fades back in.

How can this be done?

Peter Mortensen · Accepted Answer · 2012-09-21 18:19:25Z

2

Assuming selector_1 and selector_2 are just a sample, try the below code which uses the fadeOut callback.

$('selector_1').fadeOut(300, function() {        
    $.get(file.html, function(data) {
        $('selector_1')
            .html($(data).find('selector_2').html())
            .fadeIn();
    });    
});

Also note that the $.get is wrapped inside the fadeOut callback, so that the transition is perfect.

This is also the solution I thought of, but the problem is that the $.get command is sent after the fade out and not simultaneously - I want the $.get command to execute immediately.

See below.

$('selector_1').fadeOut(300);
$.get(file.html, function(data) {
    $('selector_1')
      .html($(data).find('selector_2').html())
      .fadeIn();
});

edited Sep 21, 2012 at 18:19

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Sep 19, 2012 at 19:42

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

afcdesign Over a year ago

> This is also the solution I thought of, but the problem is that the $.get command is sent after the fade out and not simultaneously - I want the $.get command to execute immediately.

Selvakumar Arumugam Over a year ago

@afcdesign Then just move it outside fadeOut

afcdesign Over a year ago

if I do that, the html placement can be seen while the fadeout happens. That is what I want to avoid.

Selvakumar Arumugam Over a year ago

The time taken by $.get is not constant. If it is too fast, then you will see the html placement.. to avoid that you should move that inside callback.. but as you know.. it would simply be triggered only after fadeOut.

afcdesign Over a year ago

can't I just get the $.get object as a variable that I can use? Then it is triggered and stored in cache, for me to use when I want.

Collectives™ on Stack Overflow

jQuery Ajax and HTML callback

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related