litvinovg/vivo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NIHVIVO-193 Javascript to handle reloading the form after a failed submit due to validation errors. Add form working now. Edit form not quite working yet.

Browse source
This commit is contained in:
rjy7 2010-04-01 20:12:07 +00:00
parent be7cea2203
commit c485ee2440
1 changed files with 45 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
productMods/edit/forms/js/customForm.js
View file

@ -99,29 +99,29 @@ var customForm = {
// Reset add form to initial state (step 1) after cancelling out of step 2 // Reset add form to initial state (step 1) after cancelling out of step 2
resetAddFormToStep1: function() { resetAddFormToStep1: function() {
this.resetForm(); customForm.resetForm();
this.doAddFormStep1(); customForm.doAddFormStep1();
}, },
// Set up the add form for step 1 // Set up the add form for step 1
doAddFormStep1: function() { doAddFormStep1: function() {
this.existing.show(); customForm.existing.show();
this.addNewLink.show(); customForm.addNewLink.show();
this.addNew.hide(); customForm.addNew.hide();
this.entry.hide(); customForm.entry.hide();
this.requiredLegend.hide(); customForm.requiredLegend.hide();
this.button.val('Continue'); customForm.button.val('Continue');
// Assign event listeners // Assign event listeners
//this.button.unbind('click'); // RY *** Don't need this if we've done a reset //this.button.unbind('click'); // RY *** Don't need this if we've done a reset
this.button.bind('click', function() { customForm.button.bind('click', function() {
customForm.doAddFormStep2SelectExisting(); customForm.doAddFormStep2SelectExisting();
return false; return false;
}); });
//this.addNewLink.unbind('click'); // RY *** Don't need this if we've done a reset //this.addNewLink.unbind('click'); // RY *** Don't need this if we've done a reset
this.addNewLink.bind('click', function() { customForm.addNewLink.bind('click', function() {
customForm.doAddFormStep2AddNew(); customForm.doAddFormStep2AddNew();
}); });
}, },
@ -168,11 +168,13 @@ var customForm = {
fn.call(); fn.call();
}, },
// Most methods below use 'customForm' rather than 'this', because 'this' doesn't reference
// customForm when the method is called from an event listener. Only if the method never
// gets called from an event listener can we use the 'this' reference.
// Step 2: selecting an existing individual // Step 2: selecting an existing individual
doAddFormStep2SelectExisting: function() { doAddFormStep2SelectExisting: function() {
// NB Use 'customForm' instead of 'this', because 'this'
// doesn't reference customForm when called from an event handler.
customForm.entry.show(); customForm.entry.show();
customForm.showFields(customForm.existing); customForm.showFields(customForm.existing);
customForm.addNew.hide(); customForm.addNew.hide();
@ -202,10 +204,10 @@ var customForm = {
// can't determine which view of the form we had been on. // can't determine which view of the form we had been on.
doAddFormStep2Combined: function() { doAddFormStep2Combined: function() {
this.showCombinedView(); customForm.showCombinedView();
this.doAddNewLink(); customForm.doAddNewLink();
this.doButtonForStep2('Create ' + this.newType); customForm.doButtonForStep2('Create ' + customForm.newType);
this.doCancelForStep2(); customForm.doCancelForStep2();
}, },
@ -224,21 +226,26 @@ var customForm = {
/***** Utilities *****/ /***** Utilities *****/
unbindEventListeners: function() { unbindEventListeners: function() {
this.cancel.unbind('click'); customForm.cancel.unbind('click');
this.button.unbind('click'); customForm.button.unbind('click');
this.addNewLink.unbind('click'); customForm.addNewLink.unbind('click');
}, },
clearFormData: function() { clearFormData: function() {
this.form.find('input:text').val(''); customForm.clearFields(customForm.form);
this.form.find('select').val(''); },
this.form.find('textarea').val('');
// Clear data from form elements in element el
clearFields: function(el) {
el.find('input:text').val('');
el.find('select').val('');
el.find('textarea').val('');
// For now we can remove the error elements. Later we may include them in // For now we can remove the error elements. Later we may include them in
// the markup, for customized positioning, in which case we will empty them // the markup, for customized positioning, in which case we will empty them
// but not remove them here. See findValidationErrors(). // but not remove them here. See findValidationErrors().
//this.form.find('.validationError').text(''); //this.form.find('.validationError').text('');
this.form.find('.validationError').remove(); el.find('.validationError').remove();
}, },
// Add required hints to required fields in a list of elements. // Add required hints to required fields in a list of elements.
@ -266,17 +273,16 @@ var customForm = {
showFields: function(el) { showFields: function(el) {
el.show(); el.show();
this.toggleRequiredHints('add', el); customForm.toggleRequiredHints('add', el);
}, },
hideFields: function(el) { hideFields: function(el) {
// Clear any input, so if we reshow the element the input won't still be there. // Clear any input, so if we reshow the element the input won't still be there.
el.find('input:text').val(''); customForm.clearFields(el);
alert('here');
el.hide(); el.hide();
}, },
// Add event listener to the submit button in step 2
doButtonForStep2: function(text) { doButtonForStep2: function(text) {
customForm.button.unbind('click'); customForm.button.unbind('click');
customForm.button.val(text); customForm.button.val(text);
@ -294,8 +300,8 @@ var customForm = {
doAddNewLink: function() { doAddNewLink: function() {
this.addNewLink.unbind('click'); customForm.addNewLink.unbind('click');
this.addNewLink.bind('click', function() { customForm.addNewLink.bind('click', function() {
$(this).hide(); $(this).hide();
customForm.hideFields(customForm.existing); customForm.hideFields(customForm.existing);
customForm.showFields(customForm.addNew); customForm.showFields(customForm.addNew);
@ -307,7 +313,7 @@ var customForm = {
// Return true iff there are validation errors on the form // Return true iff there are validation errors on the form
findValidationErrors: function() { findValidationErrors: function() {
return this.form.find('.validationError').length > 0; return customForm.form.find('.validationError').length > 0;
// RY For now, we just need to look for the presence of the error elements. // RY For now, we just need to look for the presence of the error elements.
// Later, however, we may generate empty error messages in the markup, for // Later, however, we may generate empty error messages in the markup, for
@ -332,13 +338,13 @@ var customForm = {
resetForm: function() { resetForm: function() {
// Clear all form data and error messages // Clear all form data and error messages
this.clearFormData(); customForm.clearFormData();
// Remove previously bound event handlers // Remove previously bound event handlers
this.unbindEventListeners(); customForm.unbindEventListeners();
// Remove required field hints // Remove required field hints
this.toggleRequiredHints('remove', this.addNew, this.existing); customForm.toggleRequiredHints('remove', customForm.addNew, customForm.existing);
}, },
// This version of the form shows both the existing select and add new link. // This version of the form shows both the existing select and add new link.
@ -347,11 +353,11 @@ var customForm = {
// the submission. // the submission.
showCombinedView: function() { showCombinedView: function() {
this.showFields(this.existing); customForm.showFields(customForm.existing);
this.addNewLink.show(); customForm.addNewLink.show();
this.addNew.hide(); customForm.addNew.hide();
this.entry.show(); customForm.entry.show();
this.requiredLegend.show(); customForm.requiredLegend.show();
} }
}; };