• Post Reply Bookmark Topic Watch Topic
  • New Topic

disabling a button until the Ajax is really finished

 
J. Kevin Robbins
Bartender
Posts: 1801
28
Chrome Eclipse IDE Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm trying to disable the button to prevent double submits. Nothing seems to be working for me. The button disables for just a second but immediately enables again, long before the table is rendered, allowing the user to click away and practically DDOS the server.







Neither the "complete" nor the ".when.done" techniques slow down the enabling of the button in the least little bit.

I've been googling for hours and none of the suggested techniques are making any difference.

This can't be this difficult. What am I doing wrong?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65516
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'd say that your "complete" solution is the more correct.

When it's commented out, does the button still re-enabled itself? In other words, is it your code that's re-enabling the button, or something else?
 
J. Kevin Robbins
Bartender
Posts: 1801
28
Chrome Eclipse IDE Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If I change the click event to this:


And leave the "complete" statement commented out, the button does not re-enable. If I then uncomment the statement in the "complete" function, the button enables too soon. Even the waitimg is still displaying when the button re-enables so I can click it and send multiple requests.

So it seems that complete doesn't really mean complete as in the success function has finished running.

I tried this; no difference.

The closest that I can come to acceptable behavior is this:

But this seems like a kludge that is still relying on timing and a bit of luck.

I wish that the datatables draw() method would take a callback function.

I'm open to ideas. I don't want to put this in production like this. It just feels wrong.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65516
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So, the problem isn't that the complete function is acting weird with respect to the request, but with respect to the success function?

If so, that tells me that it might be a matter of datatables being slow to process. How long between the time the success function fires, and the display completes?
 
J. Kevin Robbins
Bartender
Posts: 1801
28
Chrome Eclipse IDE Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm not sure how to measure that. Does this help?

"Undefined" on line 19 is the click event.

I also suspect that this is related to DataTables. It has an "initComplete()" method that is supposed to fire after the table is drawn. That would seem like a good place to enable the button, but I can't get it working correctly. It's firing on page load instead of after the table is drawn.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65516
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ah....

It's been some while since I've used datatables (and not that extensively), so I forgot that it performs async operations itself. Yes, if you want to wait until datatables is done, you'll need to have it tell you when it's done. Your complete handler synchs to the Ajax request, not the datatables processing.
 
J. Kevin Robbins
Bartender
Posts: 1801
28
Chrome Eclipse IDE Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
<sigh> I'll check on the DataTables forums and see if I can get that initComplete to work. I'll come back with the solution if I get it working satisfactorily.

At least this one didn't turn out to be a facepalm like so many of my other questions.

Thanks for your help.
 
J. Kevin Robbins
Bartender
Posts: 1801
28
Chrome Eclipse IDE Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Update: I've been chatting with Allan (creator of DataTables) and it seems that initComplete only works when DT is using it's own ajax option to perform the request. But I can't use that technique because my page waits for the user to enter a date range that is used as parameters to the query.

I tried using another callback called "drawCallback" and that's working, but it fires on every draw such as sorts, paging, etc. That's not a big deal as it just ends up enabling a button that's already enabled, but this is still an ugly solution and that grates me. I like elegant solutions, not hacks.

So in a nutshell, I have two asynchronous processes that are unaware of each other. yet depend on each other for timing the correct moment to enable the button. There must be a way to wrap all this in a function with a custom callback. I think. Okay, I hope.

I wish I was better at JS. Bear, I keep reading your books. Why aren't I getting smarter?
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65516
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
J. Kevin Robbins wrote:
I wish I was better at JS Bear, I keep reading your books. Why aren't I getting smarter?

You are -- sometimes it's just had to see form the inside. Trust me, I know that lesson well.

Asynchronous programming is hard -- I spent the best part of yesterday writing a single method that obtains information from a set of REST APIs and getting the synchronization right was a beast.

This isn't limited to JS, of course; the same challenges are presented in any asynchronous environment. JS just happens to be the one we're working in.

Also don't blame yourself for limitations in the tools we use. If you're not able to get a callback at the appropriate point of processing in a tool, that's hardly your fault. And sometimes, we need to "hack" a solution together that works with what we've been given to work with.
 
J. Kevin Robbins
Bartender
Posts: 1801
28
Chrome Eclipse IDE Firefox Browser jQuery Linux MySQL Database Netbeans IDE
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Allan suggested using the "fade" callbacks. This seems to work rather smoothly. What are your thoughts on this technique?

 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65516
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
A bit hack-y, but without a proper callback, sometimes one needs to do what one needs to do.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!