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
  }

Josh Sherman - The Man, The Myth, The Avatar

About Josh

Husband. Father. Pug dad. Musician. Founder of Holiday API, Head of Engineering and Emoji Specialist at Mailshake, and author of the best damn Lorem Ipsum Library for PHP.


If you found this article helpful, please consider buying me a coffee.