Ajax Form Dialog

ajaxformdialog.js

var eventiply = {};

eventiply.formToArray = function(form){
    var postVars = {};
    
    $(form).find('input').each(function(i,obj){
        postVars[$(obj).attr('name')] = $(obj).val();
    });
    $(form).find('select').each(function(i,obj){
        postVars[$(obj).attr('name')] = $(obj).val();
    });

    return postVars;
}


/**
 * class which loads a form via ajax into a hidden div.
 * dialog.show() shows the dialog via the jQuery UI dialog plugin
 * posting is done via ajax as well
 * options: {
 *   title: 'some title',
 *   url: 'http://some-url.at',
 *   formId: '#some-form-id',
 *   successCallback: someCallbackFunction(objectHash) // is called on a 201 (resource created response)
 * }
 */
eventiply.AjaxFormDialog = function(options) {

    var defaultOptions = {
        modal: true,
        width: 500,
        resizable: false,
        dialogLoadedCallback: function(){},
        successCallback: function(){}
    };
    for (var attrname in defaultOptions) { 
        if(!options[attrname]){
            options[attrname] = defaultOptions[attrname]; 
        }
    }
    var dialog = $('<div style="display: none;" title="'+options.title+'"></div>').appendTo('body');
    var newObjectHash = null;
    
    
    var ajaxifyForm = function(){
        dialog.find('form').submit(function(){
            var postVars = eventiply.formToArray($(this));
            dialog.html('<div class="loading"></div>');
            
            
            dialog.load($(this).attr('action')+' #'+options.formId,postVars,function(html, textStatus, xhr) {
                
                if(xhr.status == 201){ // object was created
                    newObjectHash = xhr.getResponseHeader('Location').split('/').pop();
                    if(typeof options.successCallback != 'undefined'){
                        options.successCallback(newObjectHash,dialog);
                    }
                    eventiply.clearFields(dialog.find('form'));
                }else if(xhr.status == 200){ // object was saved
                    
                    if(typeof options.successCallback != 'undefined'){
                        options.successCallback(null,dialog);
                    }
                }
                
                
                // TODO: show flash message
                ajaxifyForm();
                dialog.find('form input').first().focus();
            });
            return false;
        });
        dialog.find('input[name="cancel"]').click(function(){
            dialog.dialog('close');
            return false;
        });
    }

    // load the form into the dialog
    dialog.load(
        options.url+' #'+options.formId,
        '',
        function (responseText, textStatus, XMLHttpRequest) {    // form was loaded. now ajaxify it, so it won't reload the whole page when you click on submit'
            ajaxifyForm();
            options.dialogLoadedCallback();
        }
    );
    
    this.show = function(){
        options.modal = true;
        //options.height = 400;
        dialog.dialog(options);
    }
    this.close = function(){
        dialog.dialog('close');
    }
    this.find = function(search){
        return dialog.find(search);
    }
    this.setUrl = function(url){
        options.url = url;
        dialog.load(
            options.url+' #'+options.formId,
            '',
            function (responseText, textStatus, XMLHttpRequest) {    // form was loaded. now ajaxify it, so it won't reload the whole page when you click on submit'
                ajaxifyForm();
            }
        );
    }
};

contactlist.html

...
var formDialog = new eventiply.AjaxFormDialog({
                    title: 'Kontakt hinzufügen',
                    url: $('a.create-contact').attr('href'),
                    formId: '#contact-create-form',
                    successCallback: function(objectHash){
                        contactList.refresh();
                    }
                });
 $('a.create-contact').click(function(){
                    formDialog.show();
                    return false;
                });
...