How do I execute a javascript after Ajax load?

Question

I need to add a class on after an ajax load. I first give a few elements a class "ready" which initiate a css transition. When the link li#menu-item-318 a gets clicked it removes the ready class which then reverses the css transition and then loads a new html document. On the Aja load I once again want to add the ready class to the same elements inserted by the Ajax call.

The code below has a callback to add the ready class, which works. But when the Ajax loads its sets the Ready class too early so there is no transition, even though my lines that is supposed to be drawn up is set.

I was thinking Its better I have a script for setting the classes on my transition elements inside the html that gets called by ajax to achieve my desired effect - but that doesn't work. So how do I do?

Demo: http://svensson.streetstylizm.com/ Click the photography - Polaroid link to se how it reverses the animation, loads the page and then just show the lines.

Code:

$(function () {
    $('.v-line, .h-line, .nav, #ban_image img').addClass('ready');
});

$('li#menu-item-318 a').click(function (e) {
    e.preventDefault();
    var linkNode = this;
    $('.v-line, .h-line, #ban_image img')
        .removeClass('ready')
        .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',

    function (e) {
        $(".js-pageTransition").load("photo.html .test> *");
    });
});

The comment you made on the answer suggests that you asked the wrong question... — Popnoodles
– Popnoodles, Commented Sep 13, 2015 at 17:25

Community · Accepted Answer · 2017-05-23 12:23:05Z

18

You can use ajaxComplete():

$.ajaxComplete(function () {
  // Something to execute after AJAX.
});

Have this as an example:

$( document ).ajaxComplete(function( event,request, settings ) {
  $( "#msg" ).append( "<li>Request Complete.</li>" );
});

As said by Popnoodles, this executes when any AJAX call completes. So if you are looking for executing the code in one particular AJAX call, you need to use the success function.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Sep 13, 2015 at 17:04

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

2 Comments

Popnoodles Over a year ago

@user3344734 just bear in mind that this function is executed EVERY TIME ANY ajax call finishes. If you want it to happen in only one instance, you should use the success callback.

Jerry Over a year ago

This worked, but gave the same result as the Ajax callback. This is so annoying. I literally have no idea why it wont load the elements and the css without the ready class first - its skips the whole animation. I think im out of ideas. This is the correct answer anyhow, thanks again.

CodePhobia · Accepted Answer · 2015-09-13 17:04:37Z

4

The way to do this would be use the ajaxcomplete function in jQuery which is called implicitly after the completion of any ajax call.

The examples in this link should get you started

.ajaxcomplete() Function

answered Sep 13, 2015 at 17:04

CodePhobia

1,31510 silver badges19 bronze badges

Collectives™ on Stack Overflow

How do I execute a javascript after Ajax load?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related