Multiple buttons with Hubspot's Vex

Josh Sherman
1 min read
Software Development JavaScript

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);
  }
});
Join the Conversation

Good stuff? Want more?

Weekly emails about technology, development, and sometimes sauerkraut.

100% Fresh, Grade A Content, Never Spam.

About Josh

Husband. Father. Pug dad. Born again Linux user. Founder of Holiday API, Backend Engineering Manager and Emoji Specialist at Mailshake (WE'RE HIRING!), and author of the best damn Lorem Ipsum Library for PHP.

Currently Reading

Pears and Perils
Antifragile: Things That Gain from Disorder
Code Girls: The Untold Story of the American Women Code Breakers of World War II

Previous Reads

Buy Me a Coffee Become a Sponsor

Related Articles