Instantly share code, notes, and snippets.

Embed
What would you like to do?
Make an inline element cliquable to get a form
// Use the `inline-form` class to make a form inline and get it managed. Submittion is not handled.
// The element has to contain <div class="display-inline-form"></div> and <div class="edit-inline-form"></div>, containing what is displayed normally and the edit form.
// /!\ DataTable create new <td/> so inline forms are not handled! You have to listen to 'order.dt' in order to handle in-table forms.
handleInlineForm = function($, element){
var containers = element.find('.inline-form');
containers.each(function(i, container){
var display = $(container).find('.display-inline-form'),
edit = $(container).find('.edit-inline-form')
;
display.on('click', function(event){
display.hide();
edit.show();
});
if (edit.find('[type=submit]').length === 0 && !edit.is('[no-close]')) {
edit.on('focusout', function(event){
edit.hide();
display.show();
});
}
});
};
jQuery(function($){
handleInlineForm($, $(document));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment