add_acknowledgment.js.html

The JS functions alternate displaying the letter and email generation of acknowledging a request depending on what the user chooses. The form uses Parsley to validate the information, and the JS scripts checks to make sure that the informaton required is completed.

Code Issues

• On line 80, notHolidayOrWeekend is not a set or initialized. How is this variable name being used for datepicker and how is it being initialized?
• The chunk of code below sets multiple attributes for email_info. Recommend refactoring to use a function that takes in a HTML entity and an object of attributes as parameters to set the attributes. In addition, there are some attributes that are shared between the if and else statements.

          
              if ($(this).val() === dateSelectVal) {
                  email_date.parent().show();
                  email_info.attr("data-parsley-required", "");
                  email_info.attr("data-parsley-required-message",
                      " " +
                      "Error, additional information is required when selecting a custom due date.");
                  email_info.attr("data-parsley-minlength", "20");
                  email_info.attr("data-parsley-length-message",
                      " " +
                      "Error, additional information must have 20 characters or more.");
              } else {
                  email_date.parent().hide();
                  email_info.removeAttr("data-parsley-required", "");
                  email_info.removeAttr("data-parsley-minlength", "20");
                  email_info.removeClass("parsley-error");
                  second.find(".parsley-errors-list").children().remove();
              }
          
          

• next2.click handler runs from line 143 to 244. Recommend refactoring the code into separate functions. In addition, some AJAX calls and conditional statements look very similar, aside from the fact that different variables are used depending if the code pertains to emails or letters. Maybe have functions that have a flag that note if you are handling emails or letters.
• For the code snippet below, the if and else statements look very similar. The only noticeable differences are the different urls used for the AJAX request and the different variables used in the data object. Recommend implementing a function that makes the AJAX call and takes in the url, data content variable as a parameter.

          
              if (method.val() === 'emails') {
                  $.ajax({
                      url: "/response/email",
                      type: "POST",
                      data: {
                          request_id: "{{ request.id }}",
                          type: "acknowledgment",
                          email_content: third.find("#acknowledgment-body").val()
                      },
                      success: function (data) {
                          fourth.find(".summary").html(data.template);
                          fourth.find("input[name='summary']").val(data.template);
                          fourth.find("input[name='tz-name']").val(jstz.determine().name());
                          fourth.find(".confirmation-header").text(data.header);
                          fourth.find(".method").val(method.val());
                          confirmation.unblock();
                          submit.prop('disabled', false);
                      }
                  });
              } else {
                  $.ajax({
                      url: "/response/letter",
                      type: "POST",
                      data: {
                          request_id: "{{ request.id }}",
                          type: "acknowledgment",
                          letter_content: third.find("#acknowledgment-body").val()
                      },
                      success: function (data) {
                          fourth.find(".summary").html(data.template);
                          fourth.find("input[name='summary']").val(data.template);
                          fourth.find("input[name='tz-name']").val(jstz.determine().name());
                          fourth.find(".confirmation-header").text(data.header);
                          fourth.find(".method").val(method.val());
                          confirmation.unblock();
                          submit.prop('disabled', false);
                      }
                  })
              }
          
          

• Recommend adding comments to describe what is displayed for the different next and prev clicks.

  $(function () {
   email_info.keyup(function () {
   email_days.change(function () {
   letter_days.change(function () {
   next1.click(function (e) {
   next2.click(function (e) {
       success: function (data) {
       success: function (data) {
   next3.click(function () {
      success: function (data) {
      success: function (data) {
   prev2.click(function () {
   prev3.click(function () {
   prev4.click(function () {
   form.submit(function () {