From bbf85742012689585f84c317435500cf2263afd1 Mon Sep 17 00:00:00 2001 From: Lynne Merchant Date: Fri, 14 Feb 2025 09:17:22 -0800 Subject: [PATCH 1/4] Fix registration code form button from disabling on invalid entry and retry: Issue #309 The problem was code disabling the button right away rather than waiting and disabling it after the form is validated to prevent multiple submissions Add type='submit' to form submit button. For the submitHandler in the Jquery Validation Plugin to get called, it requires a button inside the form with the type='submit'. Add code to return JSON format of python True or False value in implementation.py In the implementation.py file, the function get_ajax_check_ffq_code validates the form entry, and it needs to return a JSON value of true or false since it is returning the value to a JavaScript function that doesn't understand python True or False. This function was changed to return JSON of a True or False value. Put the submitHandler of the validator outside the 'rules' object in order for it to be called. Test using a return value of True and False in the function get_ajax_check_ffq_code in the implementation.py file to call the submit handler function. Now the submit handler is called on a returned True value and the message of an invalid key is displayed on a returned False value. Add comment in submit handler function to create a function call in the submit handler which is empty. --- microsetta_interface/implementation.py | 3 +- .../templates/nutrition.jinja2 | 38 +++++++++---------- 2 files changed, 19 insertions(+), 22 deletions(-) diff --git a/microsetta_interface/implementation.py b/microsetta_interface/implementation.py index d0f5862b..8ed1bcf6 100644 --- a/microsetta_interface/implementation.py +++ b/microsetta_interface/implementation.py @@ -874,7 +874,8 @@ def get_ajax_check_ffq_code(ffq_code): except: # noqa return_val = False - return return_val + # Convert to JSON for returning to JavaScript call + return json.dumps(return_val) def _associate_sample_to_survey(account_id, source_id, sample_id, survey_id): diff --git a/microsetta_interface/templates/nutrition.jinja2 b/microsetta_interface/templates/nutrition.jinja2 index 4648156c..607398d4 100644 --- a/microsetta_interface/templates/nutrition.jinja2 +++ b/microsetta_interface/templates/nutrition.jinja2 @@ -44,43 +44,39 @@ preventImplicitSubmission(form_name); preclude_whitespace('#ffq_code'); - $("form[name='" + form_name + "']").on('submit', function() { - document.getElementById("ffq_code_button").disabled = true; - }); + function handleSubmit() { + // TODO go to page since form validated + console.log('submitted form') + }; - // Initialize form validation on the registration form. - // It has the name attribute "registration" + // Validate the registration form for a valid + // registration code using the jQuery validation plugin. + // If the form is not valid, the messages are displayed $("form[name='" + form_name + "']").validate({ // Specify validation rules rules: { - // The key name on the left side is the name attribute - // of an input field. Validation rules are defined - // on the right side + // The key is the form input field name attribute and the validation rules + // are defined in the value object + // The route check_ffq_code_valid returns + // either true or false ffq_code: { required: true, remote: { url: "/check_ffq_code_valid", } - }, - submitHandler: function (form) { - form.submit(); } }, + submitHandler: function (form, event) { + // prevent multiple submissions + document.getElementById("ffq_code_button").disabled = false; + handleSubmit(form); + }, messages: { ffq_code: "{{ _('Your registration code is not in our system or has already been used. Please try again.') }}", }, }); - }); - /* - function updateButtonState(ffq_code_value) { - if(ffq_code_value != "") { - document.getElementById("ffq_code_button").disabled = false; - } else { - document.getElementById("ffq_code_button").disabled = true; - } - } - */ + }); function openCodePanel() { document.getElementById('add_code_container').style.display = ''; From 02cd657a9b94085e9526ea0f1b5b40a9fcbb0537 Mon Sep 17 00:00:00 2001 From: Lynne Merchant Date: Fri, 14 Feb 2025 13:52:08 -0800 Subject: [PATCH 2/4] Remove extra handle submit function and move disable button into plugin code Remove debugging statement --- microsetta_interface/templates/nutrition.jinja2 | 6 ------ 1 file changed, 6 deletions(-) diff --git a/microsetta_interface/templates/nutrition.jinja2 b/microsetta_interface/templates/nutrition.jinja2 index 607398d4..b39267fc 100644 --- a/microsetta_interface/templates/nutrition.jinja2 +++ b/microsetta_interface/templates/nutrition.jinja2 @@ -44,11 +44,6 @@ preventImplicitSubmission(form_name); preclude_whitespace('#ffq_code'); - function handleSubmit() { - // TODO go to page since form validated - console.log('submitted form') - }; - // Validate the registration form for a valid // registration code using the jQuery validation plugin. // If the form is not valid, the messages are displayed @@ -69,7 +64,6 @@ submitHandler: function (form, event) { // prevent multiple submissions document.getElementById("ffq_code_button").disabled = false; - handleSubmit(form); }, messages: { ffq_code: "{{ _('Your registration code is not in our system or has already been used. Please try again.') }}", From 30b42b55d8fa9fd3dd465d1840b2b744e717a166 Mon Sep 17 00:00:00 2001 From: Lynne Merchant Date: Fri, 14 Feb 2025 16:26:36 -0800 Subject: [PATCH 3/4] Add form submit to jQuery validation plugin on FFQ registration code --- microsetta_interface/templates/nutrition.jinja2 | 1 + 1 file changed, 1 insertion(+) diff --git a/microsetta_interface/templates/nutrition.jinja2 b/microsetta_interface/templates/nutrition.jinja2 index b39267fc..125de271 100644 --- a/microsetta_interface/templates/nutrition.jinja2 +++ b/microsetta_interface/templates/nutrition.jinja2 @@ -64,6 +64,7 @@ submitHandler: function (form, event) { // prevent multiple submissions document.getElementById("ffq_code_button").disabled = false; + form.submit() }, messages: { ffq_code: "{{ _('Your registration code is not in our system or has already been used. Please try again.') }}", From 31a39048bc14427c3ddf3c3ea39814065004749b Mon Sep 17 00:00:00 2001 From: Lynne Merchant Date: Sat, 15 Feb 2025 05:47:59 -0800 Subject: [PATCH 4/4] Fix FFQ code registration submit button when clicked Remove extra code and add comments. --- .../templates/nutrition.jinja2 | 35 ++++++++++++------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/microsetta_interface/templates/nutrition.jinja2 b/microsetta_interface/templates/nutrition.jinja2 index 125de271..e2b1234b 100644 --- a/microsetta_interface/templates/nutrition.jinja2 +++ b/microsetta_interface/templates/nutrition.jinja2 @@ -44,35 +44,46 @@ preventImplicitSubmission(form_name); preclude_whitespace('#ffq_code'); - // Validate the registration form for a valid - // registration code using the jQuery validation plugin. - // If the form is not valid, the messages are displayed + // Validate the FFQ code registration form using + // the jQuery validation plugin. $("form[name='" + form_name + "']").validate({ // Specify validation rules rules: { - // The key is the form input field name attribute and the validation rules - // are defined in the value object - // The route check_ffq_code_valid returns - // either true or false + // The key name on the left side is the + // name attribute of an input field. + // Validation rules are defined + // on the right side + // the remote get ajax call needs to + // return the string "true" for the + // form to validate and submit ffq_code: { required: true, remote: { url: "/check_ffq_code_valid", } - } + }, }, - submitHandler: function (form, event) { + submitHandler: function (form) { // prevent multiple submissions - document.getElementById("ffq_code_button").disabled = false; + document.getElementById("ffq_code_button").disabled = true; form.submit() }, messages: { ffq_code: "{{ _('Your registration code is not in our system or has already been used. Please try again.') }}", }, }); - }); + /* + function updateButtonState(ffq_code_value) { + if(ffq_code_value != "") { + document.getElementById("ffq_code_button").disabled = false; + } else { + document.getElementById("ffq_code_button").disabled = true; + } + } + */ + function openCodePanel() { document.getElementById('add_code_container').style.display = ''; document.getElementById('add_code_card').style.display = ''; @@ -207,7 +218,7 @@
- +