There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.Close
Processing...
This may take a few seconds.

The "after" events

This is not the same thing as the "after 1s" parameter for action commands. This is something else entirely.

Every action in Active CSS calls an "after" event after it has been run. You can use this on any Active CSS command, and also regular CSS commands used in Active CSS.

Some "after" events are more useful that others, but there are "after" events for all actions available.

The syntax is always in camel-case. Remove any hyphens in the action command.

Eg. afterAddClass, afterAjax, afterAjaxFormSubmit, afterTrigger.

These events are called after an action has been run. In the case of an ajax action call, the event runs after there is a response back from the server.

You have to reference the event selector along with the after action event. This usually works out fine. You can additionally use conditionals to set up multiple events depending on circumstance.

In practice, the most common use for the "after" events is with the ajax series of action commands, where you need a callback handling. You generally don't need to use "after" events, as it adds complexity to the code and just looks wrong. It is more appropriate as a callback action.

The parameter "after stack" after an action command is extremely useful when you want a specific action to happen only when other actions have finished. But don't get that confused with an after event.

In the future, additional syntax will be added into the core so we can expand out with different syntax for "after" handlings. These current options won't go away though, as they are quick and handy, and they do do the job most of the time.

In the following example we will address ajax handling, as this is most common use of an after event.

An ajax call is run, gets a result back from the server, and using the after event we then draw the results. In this instance, we get the results back as a JSON string, and there is a variable in there called "result" (more info on this in the ajax action command docs). So to reference "result" in the Active CSS event, we use put it in curlies: .

#myDiv:click {
    ajax: "/about.html" post json;
}

#myDiv:afterAjax {
    #contentWrap {
        quick-html: {result};
    }
}

You can run conditional statements on all the "after" events, so you can perform different actions based on the returned data.

In this next example, we run different events depending on the results from the server using conditionals. From the server, if all is well, we send back a json string containing HTML to display in the json variable "result". If there is an error of some kind on the server, we send back the json variable "err" containing the error message. If there is a failure on the server, in this case a 401 response code, the event afterAjax401 is called.

#myDiv:click {
   ajax: "/get-data.html" post json;
}

#myDiv:if-not-empty({result}):afterAjax {
    #contentWrap {
        quick-html: {result};
    }
}

#myDiv:if-not-empty({err}):afterAjax {
    #contentWrap {
        render: "You had an error: {err}";
    }
}

#myDiv:afterAjax401 {
    #contentWrap {
        render: "The ajax command failed to return anything from the server as the action was unauthorised.";
    }
}

AfterAjax failure events

All ajax failures call an event with the response error code attached to the end of it.

So :afterAjax401 will run if the server returns a 401 error.

:afterAjax404 will run if the server returns a 404, etc.

The same for ajax-form-submit, etc.

So :ajaxFormSubmit401, :ajaxFormSubmit404, etc. are valid events.