Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix registration code form button from disabling on invalid entry and… #342

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Fix registration code form button from disabling on invalid entry and… #342

wants to merge 4 commits into from

Conversation

lmerchant
Copy link
Contributor

… 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.

@lmerchant
Fix registration code form button from disabling on invalid entry and…
bbf8574 
… 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.
cassidysymons
cassidysymons requested changes Feb 14, 2025
View reviewed changes
microsetta_interface/templates/nutrition.jinja2 Outdated
});
function handleSubmit() {
// TODO go to page since form validated
console.log('submitted form')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please make sure to remove debug info before opening pull requests.

microsetta_interface/templates/nutrition.jinja2 Outdated
document.getElementById("ffq_code_button").disabled = true;
});
function handleSubmit() {
// TODO go to page since form validated
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to be addressed before we can consider merging the pull request. As it stands, this PR breaks the functionality for the tool.

microsetta_interface/templates/nutrition.jinja2 Outdated
submitHandler: function (form, event) {
// prevent multiple submissions
document.getElementById("ffq_code_button").disabled = false;
handleSubmit(form);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is a helper function necessary here?

@lmerchant
Copy link
Contributor Author

I'll consolidate the code into the plugin submit handler and remove the console.log.

But there was no functionality in the form submit to begin with.

The original on submit code is strange because it doesn't do anything once the form is submitted. It just disables the button.

        let form_name = 'ffq_code_form';
        preventImplicitSubmission(form_name);
        preclude_whitespace('#ffq_code');

        $("form[name='" + form_name + "']").on('submit', function() {
            document.getElementById("ffq_code_button").disabled = true;
        });

And you're right, this on submit function is extra if there is a submit handler used by the jQuery validation plugin since the code inside of it can be placed in the plugin handler.

The on submit function
$("form[name='" + form_name + "']").on('submit', function() {
document.getElementById("ffq_code_button").disabled = true;
});

The jQuery validation submit handler
submitHandler: function (form) {
form.submit();
}

So this the plugin submit handler should be

submitHandler: function (form) {
  document.getElementById("ffq_code_button").disabled = true;
}

And then nothing is done except disabling the button

And yep, I should have removed the console.log function.

So the code doesn't break anything because nothing was done before my code changes were made.

@cassidysymons
Copy link
Collaborator

So the code doesn't break anything because nothing was done before my code changes were made.

That's inaccurate. I would encourage you to do the following:

  1. Switch your local microsetta-interface branch to master.
  2. Login using admin credentials, navigate to Admin Tools > FFQ Codes, and hit the "Generate" button next to "Generate Single Code."
  3. Login using normal user credentials and use the FFQ code that was generated in step 2. The code will be deemed valid and the page will reload with a "Begin FFQ" button (you won't be able to actually open the FFQ, but that's irrelevant).

I just confirmed this behavior on both my laptop and our staging server, so if the behavior differs in your local environment, I'd be very curious to see it.

@lmerchant
Copy link
Contributor Author

lmerchant commented Feb 14, 2025 via email

@lmerchant
Copy link
Contributor Author

lmerchant commented Feb 15, 2025 •
edited
Loading

I added form.submit() to the jQuery validation plugin submit handler so that it will go ahead and call the POST action on the form.

The issue of it breaking the page was due to an error in the SQL query in microsetta-private-api where it was checking that a valid registration code was NULL, but it should have been checking it was NOT NULL. I'll make a pull request for that fix.

@lmerchant
Fix FFQ code registration submit button when clicked
31a3904 
Remove extra code and add comments.
@lmerchant
Copy link
Contributor Author

I removed the pull request to modify check FFQ code database search. The nutrition page now allows a user to enter a correct FFQ code and if not, will not disable the button to submit one. I also tested the code with jest to test various cases with a valid or invalid FFQ code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cassidysymons cassidysymons cassidysymons requested changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@lmerchant @cassidysymons