Cfrtjryk

I am in the middle of php app development with some addition of js. Since my JS knowledge is not particularly good, I rely on jQuery. However, I like to work with reusable code rather than spaghetti. So, there is a situation.

I have two kinds of form in the app - classic ones and ajax ones. Now I want to move my ajax form handlers to separated file, module and initiate it in main js file.

My current code:

main.js

import forms from './plugins/ajaxForms';



forms.init($('form.ajax'));

ajaxForms.js

function init(form) {

    const obj = this;

    form.on('submit', function (e) {

        e.preventDefault();

        const form = $(this);

        const url = form.attr('action');

        const data = form.serialize();

        const method = form.find('input[name="method"]').val() ? form.find('input[name="method"]').val() : form.attr('method');



        const call = $.ajax({

            type: method,

            url: url,

            data: data,

            dataType: "json",

            beforeSend: function() {

            obj.beforeSend(form);

            }

        });



        call.done(function (response) {

            Toastr["success"](response.message);

        });



        call.fail(function (response) {

            Toastr["error"](response.responseJSON.message);

            obj.renderErrors(form);

        });



        call.always(function () {

            obj.after(form);

        });

    });

}



function beforeSend(container) {

    if(container === null) {

    return;

    }

    container.find('.form-loading-overlay').show();

}



function after(container) {

    if(container === null) {

    return;

    }

    container.find('.form-loading-overlay').hide();

}



export default {

    init: init,

    beforeSend: beforeSend,

    after: after,

};

Expected solution:

I do not like the way I am using other functions from this module (such as after(container) - I needed to pass "this" to const obj in order to get it to work with i.e. beforeSend in const call.

In short, I believe there is better way to write this piece of code. I suppose that this particular example is overcomplicated and could be just left as a jquery code closed in submit event. However, I insist on making it modular as I want to learn on this example and refactor rest of my code myself.

Also, I need to be able to access methods like beforeSend(...) and after(...) without using init(...) method, as I am referecing to this methods in other modules while using ajax calls without forms - I still want to display loading overlay on given container during ajax action.