emersonbroga
5/24/2014 - 10:09 PM

Dynamic call for ajax forms using jQuery

Dynamic call for ajax forms using jQuery

// Dynamic call for ajax forms using jQuery

// <form method='post' data-async="true" data-callback="functionName" > callback function
// <form method='post' data-async="true" data-callback="Object.mehodName" > callback object method

// will send 3 params to callback function: form, data, result


$('body').on('submit', 'form[data-async]', function(e) {

    e.preventDefault();

    var $form = $(this),
        callback = $form.attr('data-callback');// or $form.data('callback'); on newest jQuery versions
    
    $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize(),

        success: function(data, status) {
                
            // check if has dot (Object.method) else if it's a function.
            if( callback.indexOf('.') !== -1){

                var parts = callback.split('.');
                if(parts.length == 2){
                    var _object = window[parts[0]];
                    var _method = parts[1];

                    if( _object.hasOwnProperty(_method)){
                        _object[_method]( $form[0], data, status );         
                    }
                
                }
            }
            //if it's callback function
            else if(typeof(window[callback]) === 'function'){
                window[callback]($form[0], data, status);
            }
        }
    });
});