CODEWITHSUNDEEP
javascriptjquerypromise
pennstatephil
pennstatephil

Reputation: 1653

Using jQuery promise to simulate synchronous call

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

Upvotes: 9

Views: 3062

Answers (3)

Gjaa
Gjaa

Reputation: 1580

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(); 
      }
    })
  });

Upvotes: 0

Sylkk
Sylkk

Reputation: 1

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;

Upvotes: 0

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276306

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.

Upvotes: 1

Related Questions