XF 2.1 Catch ajax form submit from JS


Well-known member

I have a modal with simple form in it:
<xf:if is="$isNew">
    <xf:title>{{ phrase('CMTV_CB_add_param') }}</xf:title>
<xf:else />
    <xf:title>{{ phrase('CMTV_CB_edit_param') }}</xf:title>

<xf:form action="{{ link('criteria-builder/params/validateParam') }}" class="block" ajax="true" data-redirect="off">
    <div class="block-container">
        <div class="block-body">
            <xf:textboxrow name="param_id" value="{$param_id}" label="{{ phrase('CMTV_CB_param_id') }}" />
            <xf:textboxrow name="param_title" value="{$param_title}" label="{{ phrase('CMTV_CB_param_title') }}" />
        <xf:submitrow icon="save" />

Note data-redirect="off". When I click "Save" button, some checkings are preformed in actionValidateParam controller method. After that, I want to close the modal (it is closed automatically) and fire JS handler function from the page called opened this modal.

How this can be done?

I guess there should be an attribute or something like that to catch ajax form return.

In other words: how can I catch ajax form submit from JS?
Last edited:

Lukas W.

Well-known member
$(document).on('ajax:send', function($data, $status, $xhr) {
    // Before the form is sent

$(document).on('ajax:before-success', function($data, $status, $xhr) {
    // After the server answer is received, before the success event is executed

$(document).on('ajax:complete', function($data, $status, $xhr) {
    // After the request is completed


Well-known member
Thank you!

Is there any way I can make sure this event was fired by submitting my form only?


Well-known member
Ok. Found a cleaner way to do all this stuff. Basically we need to use the same structure and handler as accont_avatar template and avatar.js have.

  1. Add data-xf-init="param-add-edit" attribute to <xf:form tag
  2. Create JS handler for our form tag
CMTV_CB.ParamAddEdit = XF.Element.newHandler({
    options: {},

    init: function ()
        var $form = this.$target;

        $form.on('ajax-submit:response', XF.proxy(this, 'ajaxResponse')); // Catching ajax repsonse

    ajaxResponse: function (e, data)
        e.preventDefault(); // Use this to prevent auto-closing overlay. See avatar.js file for other cool stuff

XF.Element.register('param-add-edit', 'CMTV_CB.ParamAddEdit');