0

Initial problem: due to a connection to an external API creating new order (orders#create) takes a few seconds and there is nothing I can do about in on my side. So I need to tell the user somehow, that page is actually doing something.

This is my js-code for validation:

$(document).ready(function(){
    $('.submit-order').on('click', function(e){
        var success = true;
        $("div.text-danger").remove();

        // a lot of validations, which set success to false if they fail


        if (success === true) {
            e.preventDefault();
            $('.submit-order').find('input').val('Please hold on a little bit');

        }
    });
});

If I omit the e.preventDefault(), then the (new) text displays only for a split second and then reverts back to "Proceed to payment". I got from this and this SO answers, that I really need to include it. Then, the text stays "Please hold on a little bit". But, of course, now, no order is created.

How can I achieve a simple user informing while the backend is working? I stumbled upon this answer here, but is it really necessary to involve a complicated ajax call only for some text change?

Update #1: I don't really think, that my question is a duplicate of this one since the known solution does not work on my case.

My solution: Upon research, I stumbled upon 'data-disable-with' option, which was exactly what I needed. Now my submit button (Rails, Haml markup) looks like this:

.submit-order
  =f.submit "Proceed to payment", data: { "disable-with" => "Please hold on a little bit"}, class: "btn btn-success-mod-uzhindoma margin-bottom-60"

Maybe it helps someone.

Community
  • 1
  • 1
mohnstrudel
  • 639
  • 8
  • 22
  • 3
    The form submission is refreshing the page. – T.J. Crowder Mar 06 '17 at 09:00
  • Is there a way to turn it off? – mohnstrudel Mar 06 '17 at 09:00
  • Yes: Prevent the form submission. If you search, you'll find that topic very well covered indeed. – T.J. Crowder Mar 06 '17 at 09:01
  • 1
    Yes, don't submit a form, make "a complicated ajax call" :-) Short of even more complicated (and hacky) techniques (such as hidden iframes), that is the only way to send data to the server while keeping the current page visible. – Thilo Mar 06 '17 at 09:01
  • @Thilo alright, thank you very much, seems like there is no way around. Could you post it as an answer, I'll gladly accept it. – mohnstrudel Mar 06 '17 at 09:05
  • @T.J.Crowder however, I don't want to explicitly prevent default action. I want to create new order, but since it take a bit too long, I want to display something to the user. – mohnstrudel Mar 06 '17 at 09:09

0 Answers0