The ajax command response events

These events are called after an ajax command has been run. The events run after there has been a response back from the server.

You have to reference the event selector with the afterAjax event. You can additionally use conditionals in the event selector to set up multiple events depending on the results that you get back from the server.

The await option in the ajax command can be used instead of using the afterAjax event, which will make an ajax command wait until it receives a successful response from the server before continuing onto the next action command. But for all ajax error events, you need to use events such as afterAjaxError, or specific events such as afterAjax404, etc.

In the next examples we will address an ajax handling which does not use the await command, and then one that uses it.

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 from the server as a regular string, and there is a variable that is set up automatically for getting HTML from a server, called "$STRING" (more info on this in the ajax action command docs). To reference "$STRING" as a variable in the Active CSS event, we put it in curlies:

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

#myDiv:afterAjax {
    #contentWrap {
        render: "{$STRING}";
    }
}

That would do the same thing as the following example, which uses the simpler await option:

#myDiv:click {
    ajax: "/about.html" get html await
    #contentWrap {
        render: "{$STRING}"
    }
}

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, and ask for JSON results from the server, if all is well, we send back a JSON variable containing HTML to display in the browser. If there is an error of some kind on the server, from 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 automatically called in the browser. There is also a general ajax failure event (see the section below) that will run additionally when there is any ajax error.

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

#myDiv:if-empty({err}):afterAjax {
    #contentWrap {
        render: "{result.$someHTML}";
    }
}

#myDiv:if-not-empty({err}):afterAjax {
    #contentWrap {
        render: "There was 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

Error codes

All ajax failures begin by calling 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.

 

General errors

Next, a general ajax error event is called (from version 2.5.2). This is always run after a specific error event and can be used to catch all ajax errors in one place.

These events are:

:afterAjaxError, :afterAjaxFormSubmitError, :afterAjaxFormPreviewError, :afterAjaxPreGetError.

For example:

#myDiv:afterAjaxError {
    #errorMessage {
        render: "<p>Error in processing.</p>";
        display: block;
    }
}