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

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

zyq105zyq105 Posts: 8Questions: 2Answers: 0

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!

Answers

  • allanallan Posts: 52,661Questions: 1Answers: 8,058 Site admin
    edited September 7

    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

  • zyq105zyq105 Posts: 8Questions: 2Answers: 0

    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)
                      })
                  });
    
  • allanallan Posts: 52,661Questions: 1Answers: 8,058 Site admin

    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

  • zyq105zyq105 Posts: 8Questions: 2Answers: 0

    Thanks Allan!

  • zyq105zyq105 Posts: 8Questions: 2Answers: 0

    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)
    });
    
  • allanallan Posts: 52,661Questions: 1Answers: 8,058 Site admin

    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

  • zyq105zyq105 Posts: 8Questions: 2Answers: 0

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

  • colincolin Posts: 9,822Questions: 0Answers: 1,629

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

    Colin

Sign In or Register to comment.