Overriding the default confirm behaviour on phoenix.html.link

Phoenix Forum Questions / Help
, ,
1

While trying to override the default confirm behaviour of phoenix.link.click in live view, the operation happens already without waiting for confirmation from the user. I’m using vex for creating custom confirm dialog like in the docs below.

https://hexdocs.pm/phoenix_html/Phoenix.HTML.Link.html#link/2-overriding-the-default-confirm-behaviour

1 Like
2

Me too facing the same problem, Please anyone can help us.

3

has anyone been able to resolve this one?

4

Still an issue in 2022 :frowning_face:. Following the exact instructions with vex leads to the click event happening anyway, regardless of the vex prompt.

5

I came across this thread while seeing the same issues (in 2024). I think it might have been caused by not loading the vex css. In case it helps anyone, this is the working setup I ended up with (this is an old project using webpack – I assume it’ll be a bit different with esbuild):

(cd assets && npm install --save vex-js vex-dialog)

New file assets/js/confirm_dialog.js (for tidyness):

import vex from "vex-js"
import vex_dialog from "vex-dialog"
vex.registerPlugin(vex_dialog)
vex.defaultOptions.className = 'vex-theme-os'

function init() {
  document.body.addEventListener('phoenix.link.click', function (e) {
    e.stopPropagation();
    var message = e.target.getAttribute("data-confirm");
    if(!message){ return true; }
    vex.dialog.confirm({
      message: message,
      callback: function (value) {
        if (value == false) { e.preventDefault(); }
      }
    })
  }, false);
}

export default { init: init }

In assets/js/app.js:

import ConfirmDialog from "./confirm_dialog"
…
 $(document).ready(function() {
   …
  ConfirmDialog.init()
  …
})

In assets/css/app.scss:

@import "../node_modules/vex-js/dist/css/vex";
@import "../node_modules/vex-js/dist/css/vex-theme-os";
6

Sorry, replying to myself. I thought that worked, but all I’d managed to do was get the dialog to show up. The liveview still receives the click event immediately, and handles it while the dialog is still displayed.