how to use model dialogue instead of confirm api in preSubmit handler

zyq105

in my editor preSubmit handler, I call confirm like this:

profile_editor.on('preSubmit', function (e, data, action) {
return confirm(Are you sure want to change profile ?);
});

It works fine. But I want to use a customized modal instead of calling "confirm" function. like this:
profile_editor.on('preSubmit', function (e, data, action) {
return $("#warningModal").modal()
});
It doesn't work because the modal() immediately returns back before waiting for user's action.
Any ideas? Thanks!

allan

What you need to do here is make use of a Promise.

As you say, preSubmit is synchronous, but you can return a Promise to make it wait until the Promise is fulfilled - e.g.:

profile_editor.on('preSubmit', function (e, data, action) {
  return Promise((resolve) => {
    showModal({
      successButton: () => {resolve(true);},
      cancelButton: () => {resolve(false);}
    });
  });
});

I don't know how the modal you are using works or its API, but hopefully that will help to some degree.

Allan

zyq105

Thanks Allan! I am still struggling with the modal+promise. I am using the bootstrap modal. It still does not work.
The modal html code like this:

<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-warning" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Warn</h4>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <p id="err-msg"></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="confirm-btn" type="button" data-dismiss1="modal">confirm</button>
                <button class="btn btn-secondary" id="cancel-btn" type="button" data-dismiss1="modal">cancel</button>
            </div>
        </div>
    </div>
</div>

The js code is like this:

        profile_editor.on('initSubmit', function (e, data, action) {
              $("#warningModal").modal({backdrop: 'static', keyboard: false})
              return Promise((resolve) => {
                  $('#confirm-btn').click(function() {
                  resolve(true)
                  })
                  $('#cancel-btn').click(function() {
                  resolve(false)
                  })
              });

allan

You have:

profile_editor.on('initSubmit'

But initSubmit doesn't accept a Promise in return. You need to use preSubmit like I suggested for a Promise return to work. If you could try that, hopefully that will then do the job.

Allan

zyq105

Thanks Allan!

zyq105

It seems the preSubmit has a bug processing the Promise. Just for test purpose, I have simplified the code to always return false, but it actually always submitted. Could you please take a look what is wrong with my code?

fee_editor.on('preSubmit', function (e, data, action) {
      return new Promise((resolve) => {
          resolve(false)
});

allan

I agree - my apologies for this error. It can be seen in this demo if you run the following in your console:

editor.on('preSubmit', function (e, data, action) {
      return new Promise((resolve) => {
          resolve(false);
      });
});

Let me look into this one and get back to you.

Allan

zyq105

allan, thanks for looking into this. Please let me know if you have any updates.

colin

This has now been addressed and will be in the next release - which is likely to be tomorrow.

Colin

zyq105

colin, is this fix released? if so, is it in which file and which version?

colin

No, it wasn't. The last release was 1.9.5, on the 18th September. We are hoping to make a release in the next couple of weeks. I'll make a note to update this thread when that happens,

Colin

allan

Hi,

Apologies for the long delay on this one. That is 1.9.6 now available.

Regards,
Allan