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
  }

Multiple buttons with Hubspot’s Vex

About Josh