inline serverside with indicator

we0038

Hi,
I combined two examples, inline editing with submit button AND inline editing serverside.
My goal is to add loading indicator to the button after click
the best thing I came up with is using preSubmit
However, it's weird some times works some times not. Any advice please?

colin

Without seeing what you've done, it's hard to say. Can you link to your page, or better still, modify this test case here to demonstrate the issue,

Colin

we0038

Hi Colin,
I modified the example here please note that it should use serverside script so there's some delay on update.
Also I notice it matters where you click on the button element. one click will show the loading icon, another click may make cell edit disappears. I ma not sure what's going on here

we0038

Hi Colin,
I think having the button label label: '<i class="fa fa-check"></i>', as html is the reason.
the output of the inline submit button looks like this:

<button class="btn btn-dark submit_btn" tabindex="0">
  <i class="fa fa-check"></i>
</button>

so when the click on the icon I guess it's treated as cell click thus the loading icon will not be shown ...

we0038

OK, it has been solved now.

key solution is using event.stopPropagation(); to prevent click on the icon to act as click on the cell.
Also, I used delegateTarget to accept click from the button itself or it's label html icon

this is my final buttons code:

buttons: { 
        label: '<i class="far fa-check"></i>',
        className: 'btn-dark submit_btn',
        fn: function (event) {
          if($(event.delegateTarget).find('i.fa-check').length > 0){
            event.stopPropagation();
            $('.edit_me').find("input, button").attr("disabled", true);
            $('.submit_btn').html('<i class="far fa-spinner fa-pulse"></i>');
            
            this.submit();
          }
        }
      },

also a simplified working demo here

Thank you Colin for your time.

colin

Excellent, glad all working, thanks for reporting back,

Colin