21-Feb-2016 in Software Development #JavaScript

Multiple buttons with Hubspot's Vex

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