Bastien Bastien - 21 days ago 10
CSS Question

Jquery UI dialog conditionnal formatting

I am trying to change the format of a Jquery UI dialog box dynamically. I have an array and depending on the "format" parameter I pass to the createDialog function, the class should change ("green" class for "good", "red" class for "bad"):

var array = [["bullet1","bad"],["bullet2","good"], ["bullet3","bad"],["bullet4","good"]];

$('#a-button').click(function() {
var current = 0;
//current dynamically changes in the longer version of the code
var format = array[0][1];
createDialog(array[current][0], current, format);
});

function createDialog(data, current, format) {
var $div = $('<div>');
$div.html(data).dialog({

//condition I add which breaks the page
if (array[current][1] == "bad") { format = "red";
} else {
format = "green";
}

dialogClass: format,
width:"auto",

});
}


For reference my CSS is as follows:

.ui-dialog.red {
border: 3px solid red;
}

.ui-dialog.green {
border: 3px solid green;
}


Could anyone give me the right syntax to add this condition without breaking the code please (the code will work if you remove the condition)? Thanks.

Answer

You can use ternary operator to make dialogClass a statement

function createDialog(data, current, format) {
var $div = $('<div>');
$div.html(data).dialog({
   dialogClass: array[current][1] == "bad"?"red":"green",
   width:"auto",
});
}
Comments