Present waitlist dialog box if placement is full

Question

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));
 }
 });
 }
 });
 });

Answer 1

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.

Answer 2

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