patternjavascriptMinor
Present waitlist dialog box if placement is full
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.
```
//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'
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
pseudo-code:
You could also have a separate file/object fore your
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.
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.