Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ajax Form Dialog
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();
}
);
}
};
...
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;
});
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.