XF 2.1 Catch ajax form submit from JS

[CMTV]

Hi!

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:if>

<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') }}" />
         
        </div>
     
        <xf:submitrow icon="save" />
    </div>
</xf:form>

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?

 

[Lukas W.]

$(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
});

 

[CMTV]

Thank you!

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

 

[CMTV]

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
        console.log('lol');
    }
});

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