Josh Sherman
I’ve been implementing HubSpot’s Vex library as a replacement for stock
alert(), confirm() and prompt() dialogs on SceneKids
recently. In one use case, I wanted to be able to have 3 buttons on the dialog
with each button returning a value, instead of just boolean true for the OK
buttons. I found some examples online, but they were all resulting in
location.href being updated to include vex=_vex-empty-value in the query
string. After a bit of trial and error I found that returning false at the end
of the click event fixed things up.
vex.dialog.confirm({
message: 'Is this a dialog with multiple buttons?',
buttons: [
$.extend({}, vex.dialog.buttons.YES, {
text: 'Yes',
click: function ($vexContent, event) {
$vexContent.data().vex.value = 'yes';
vex.close($vexContent.data().vex.id);
return false;
}
}),
$.extend({}, vex.dialog.buttons.YES, {
text: 'Maybe',
click: function ($vexContent, event) {
$vexContent.data().vex.value = 'maybe';
vex.close($vexContent.data().vex.id);
return false;
}
}),
$.extend({}, vex.dialog.buttons.NO, {
text: 'Nope'
})
],
callback: function (value) {
console.log(value);
}
});
