bootboxhtmx

Combining HTMX with bootbox.js

I found this interesting example of combining htmx with sweetalert2: https://htmx.org/examples/confirm/

I tried around a little to get it up and running with bootbox.js but I just don't get any reply:

<a class="pointer" hx-delete="/delete/"
   hx-trigger="confirmed"
   _="on click
      call bootbox.confirm({message: 'Do you want to delete it?'})'
      if result trigger confirmed">
   Delete object
</a>

Any idea what I might be doing wrong?

Solution

  • Unfortunately bootbox.js does not work well with hyperscript syntax you try to use. In the original example HTMX/hyperscript uses the Sweetaler2 library, which returns an object where hyperscript can check for isConfirmed attribute and trigger the respective event. But bootbox.js does not behave like this and also it requires a callback function.

    However if you don't mind the old, verbose jQuery method (bootbox.js uses it), we can make it work by manually triggering the respective HTMX event in the bootbox.js' callback function:

    <a class="pointer" id="confirmbutton" hx-delete="/delete/" hx-trigger="confirmed">
  Delete object
</a>

<script>
$(document).ready(
  $("#confirmbutton").click(function(){
    bootbox.confirm({message: 'Do you want to delete it?',
                     callback: function(ok) {
                       if (ok) {htmx.trigger(htmx.find("#confirmbutton"), "confirmed")}
                    }})
  })
)
</script>

    bootbox.js returns true in ok variable if the user clicks on the confirm button, so we can fire the corresponding event.