9

I've been using the bootbox.js library, which operates asynchronously, but I have a need to use it in a synchronous way (for example, putting up a "confirm" window before submitting a form).

I don't want to use e.preventDefault() to cancel the event, I want to defer the action until the user has responded to the modal. Currently the library doesn't support it, but I am curious if synchronous behavior could be simulated by using promises?

Here's a very basic example, using a link (instead of a form submit button, which is my final goal): http://plnkr.co/edit/5NovsuKTeQ7y6SKNTwWp?p=preview

5
  • I think the way you have done it is the way it should be done. Do you mean it's ugly because you are using a dialog box instead of html?
    – weeknie
    Mar 31, 2014 at 16:25
  • @weeknie - which way? The way I am using the first link, it doesn't wait for the modal-- this is where I think promises might be able to help simulate the synchronicity of the 2nd link. Mar 31, 2014 at 16:27
  • What you could do is instead of using a form that submit, use directly the modal and when the user clicks the "confirm" of the modal then you could capture the data and do what you wanted with it. Or you could check out this answer : stackoverflow.com/questions/1205044/…
    – PRacicot
    Mar 31, 2014 at 16:28
  • Interesting -- so you're suggesting making the button/link/whatever element on the page just call the modal, then inside the modal make the OK/Yes button have the actual event? I think I'd have to make a custom dialog to do it this way, which is why I was hoping to use promises or some other way to delay the default action. Mar 31, 2014 at 16:31
  • Here is a working solution for bootbox https://stackoverflow.com/a/68394453/14697989 Jul 15, 2021 at 13:38

3 Answers 3

1

No, this is not what promises do at all. Promises would be unable to help you here.

The default action for a link is to navigate away to another page (or go to a section in this page). If you want to prevent a link from doing its thing - you have to use e.preventDefault() or return false from a onclick handler (preferably the former).

preventDefault is exactly what you need and sounds exactly like your goal.

But confirm works?!

Yes, it does, no one really knows why - blocking was the original behavior of confirm prompt and alert and it was never changed for backwards compatibility. It completely blocks and nothing happens while it's up - this is unlike the language and other APIs and is very uncharacteristic. - For example:

setTimeout(function(){ 
    alert("World");
},100);
alert("Hello");

Here, "World" will not be aleterd until you close the "Hello" box even though it only has a 100 ms timeout. alerts and prompts simply 'freeze' JavaScript execution. They're considered bad user experience and are generally a poor choice except for very specific problems.

So what are promises?

Promises are an abstraction over deferred computation, they allow you to create asynchronous code that looks like it was synchronous which is awesome, but they're not magical and they don't turn the code to be actually synchronous. All promises do is make coding asynchronous code almost as easy as writing synchronous code.

5
  • OK-- the form submit request has a lot of parameters coming along with it. Is there a way to grab this complex action (maybe from e) and "save" it for later? Mar 31, 2014 at 16:43
  • @pennstatephil you can call submit() on a form yourself. document.getElementById("yourFormId").submit() :) Mar 31, 2014 at 16:44
  • the submit button has a param on it (multiple submits on the form for "save" vs "commit" for example), but I think I can grab that param and throw it into the request later. Thanks for the response. Mar 31, 2014 at 16:48
  • You can also use a closure and put that code inside the request - no harm in that. The problem here is that preventDefault() is a synchronous call and submitting the form with a modal confirmation is asynchronous. Mar 31, 2014 at 16:50
  • I've used this before, but it wasn't working for a particular case I was running into on a colleague's site: gist.github.com/pennstatephil/9896793 Mar 31, 2014 at 16:56
0

I've got the same problem, and one solution i've found is to use an hidden button :

<button id="submit" type="submit" style="display:none;">x</button>
<button id="send_submit" type="button">y</button>

Then in js code,

$("#send_submit").click(function(e){
    bootbox.confirm("Really want to do this ?", function(result){
        if(result)
            $("#submit").click();
    })
})

That's not a beautiful method, but it's work like you want, other way is like you said, use the prevenDefault on event, and catch all the incoming data one by one to send them with .post;

0
0

I had this question also using Bootbox. This is how I solved it.

Take a look to this Delete form:

<form action="route/to/action" method="POST">
  <!-- these two instructions depend on your framework -->
  @method('DELETE')
  @csrf

  <!-- The submit button in the form, change it to type="button". -->
  <!-- This prevent the form submission without the user's confirmation. -->
  <button type="button" id="delete" title="Delete element">
    Delete
  </button>
</form>

Then, add a click event listener to call the submit() event programatically.

  let deleteButton = document.getElementById('delete');

  deleteButton.addEventListener('click', (ev) => {
    bootbox.confirm('Delete this element?', (confirma) => {
      if (confirma) {
        return $(ev.target)[0].form.submit(); 
      }
    })
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.