HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Present waitlist dialog box if placement is full

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
presentfullplacementwaitlistdialogbox

Problem

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. '
+'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'

Solution

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.

Code Snippets

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

Context

StackExchange Code Review Q#102218, answer score: 2

Revisions (0)

No revisions yet.