3
\$\begingroup\$

I wrote an ugly mess of a JavaScript function that pops up a dialog box based on validation data, when a checkbox is clicked. I am wondering if it can be refactored somehow.

varButtons contains code for which buttons are used as a parameter to BootstrapDialog function.

//checkbox validation
var varButtons = [];
if (isAdmin)
{
  var varButtons = [
  {
    label: 'OVERIDE',
    cssClass: 'btn-danger',
    action: function(dialogItself){

        $.ajax({
            type: "GET",
            url:  'fullProgramCheck',
            data: data,
            context: this,
            success: function(result){
                //if program open (not full)
                if(result != 'full') {
                      $(this).prop('checked', true);
                      $(this).trigger('change');
                }
                //Program Full //Can we refactor this with the identical block above?
                else{
                      BootstrapDialog.show({
                          title: 'Program Full',
                          message: 'Oh Drat! One or more of the Program weeks are full! You may be able to register for specific weeks in the program by selecting them individually. <br><br>'
                                   +'Click waitlist to be added to the waitlist to be notified of any availability in the program for the current and upcomming sessions.',
                          type: BootstrapDialog.TYPE_WARNING,
                          buttons: [
                              {
                                label: 'Waitlist',
                                cssClass: 'btn-warning',
                                action: function(dialogItself){
                                    //Add to WAITLIST
                                  $.get( 'addToWaitlist', data, function(result){
                                       if(result == 'success'){
                                          //add seesion data 'attendee added to waitlist'
                                          alert('attendee added to waitlist');
                                          location.reload();
                                       }
                                       else {
                                          //display session data error
                                          alert('error attendee not added to waitlist');
                                       }
                                  });
                                  dialogItself.close();
                                }
                              },
                              {
                                label: 'OK',
                                cssClass: 'btn-default',
                                action: function(dialogItself){
                                  dialogItself.close();
                                }
                              }
                          ]
                      });
                  }
            }
        });
        dialogItself.close();
    }
  },
  {
    label: 'OK',
    cssClass: 'btn-default',
    action: function(dialogItself){
      dialogItself.close();
    }
  }
  ]
}
else
{

  varButtons = [
  {
    label: 'OK',
    cssClass: 'btn-default',
    action: function(dialogItself){
      dialogItself.close();
    }
  }
  ]
}



function checkboxValidation() {
  $(document).ready(function(){

    //Check age and display dialog box to over-ride age if administrator
    $('input:checkbox').click(function(e) {
      if( $(this).prop('checked') &&  $(this).val()=='on' )
      {
                e.preventDefault();

                var name = $(this).attr('name');
                var pivot_attendee_program = name.split(/\]\[|\[|\]/);
                var data = {
                            'pivot' : pivot_attendee_program[0],
                            'attendee_id' : pivot_attendee_program[1],
                            'program_id' : pivot_attendee_program[2]
                           };
                $.ajax({
                    type: "GET",
                    url: 'ageCheck',
                    data: data,
                    context: this,
                    success: function(result){
                            //Age Okay
                            if(result == 'pass'){
                                $.ajax({
                                    type: "GET",
                                    url:  'fullProgramCheck',
                                    data: data,
                                    context: this,
                                    success: function(result){
                                        //if program open (not full)
                                        if(result != 'full') {
                                              $(this).prop('checked', true);
                                              $(this).trigger('change');
                                        }
                                        //Program Full
                                        else{
                                              BootstrapDialog.show({
                                                  title: 'Program Full',
                                                  message: 'One or more of the Program weeks are full! You may be able to register for specific weeks in the program by selecting them individually. <br><br>'
                                                           +'Click waitlist to be added to the waitlist to be notified of any availability in the program for the current and upcomming sessions.',
                                                  type: BootstrapDialog.TYPE_WARNING,
                                                  buttons: [
                                                      {
                                                        label: 'Waitlist',
                                                        cssClass: 'btn-warning',
                                                        action: function(dialogItself){
                                                            //Add to WAITLIST
                                                          $.get( 'addToWaitlist', data, function(result){
                                                               if(result == 'success'){
                                                                  //add seesion data 'attendee added to waitlist'
                                                                  alert('attendee added to waitlist');
                                                                  location.reload();
                                                               }
                                                               else {
                                                                  //display session data error
                                                                  alert('error attendee not added to waitlist');
                                                               }
                                                          });
                                                          dialogItself.close();
                                                        }
                                                      },
                                                      {
                                                        label: 'OK',
                                                        cssClass: 'btn-default',
                                                        action: function(dialogItself){
                                                          dialogItself.close();
                                                        }
                                                      }
                                                  ]
                                              });
                                          }
                                    }
                                });
                            }
                            //Age Not Okay
                            else{ //result == 'fail'
                                //Display Dialog Box
                                BootstrapDialog.show({
                                    title: 'Age Not Met',
                                    message: 'The attendee does not meet the age reguirement for this program.',
                                    type: BootstrapDialog.TYPE_WARNING,
                                    buttons: varButtons,
                                });
                            }
                    },
                    error: function(result){
                        alert(JSON.stringify(result));
                    }
                });
      }
    });
  });
\$\endgroup\$
0

2 Answers 2

2
\$\begingroup\$

As bitstrider intonated, you have repetition throughout, so your task is to identify commonality.

The first thing that looks like an ideal candidate is your ajax code, you should put this in a separate file/object and in your checkbox validation file/object you would invoke the ajax and pass a callback.

pseudo-code:

"checkbox_validation.js"

ajax.validate({x:1,y:2}, process); // call ajax and validate params

function process(result){
    // do stuff with result
}

"ajax.js"
function validate(params, callback) = {
   $.ajax({ 
       // do stuff
       callback(result); // invoke callback
   });
}

You could also have a separate file/object fore your BootstrapDialog dialogue.

I say file/object, because you could use require.js and put each code block into its own file where they reside as encapsulated black-boxes of code.

\$\endgroup\$
3
\$\begingroup\$

Your BootstrapDialog.show() blocks look identical, save for some text. You can wrap that in a function with the text as an argument.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.