When you click the "Add payment" or "Add line item" buttons on our AJAX enabled forms, you'll notice the throbber interacting weirdly with the rest of the form. This is because of the floating that goes on in system-behavior.css lines 162-174. The left floating causes the clicked button and throbber to float left of the select element because it is merely displayed inline and not itself floated. I suppose we just need to change our theming of these forms to use floats so we don't ship with this weird looking behavior... doing some fiddling with Firefox I was able to get the form acting properly with a float left on the select list's div and the submit button. Not sure if that's all that needs to happen here or not, but I'll happily review patches. : )
| Comment | File | Size | Author |
|---|---|---|---|
| #12 | 928240-12.diff | 826 bytes | mikejoconnor |
| #10 | ajax-throbber-message-928240-10.patch | 1.24 KB | rbayliss |
| #7 | commerce-928240-throbber.patch | 1.35 KB | rbayliss |
| #3 | Screen shot 2011-01-20 at 18.52.24.jpg | 2.79 KB | DjebbZ |
Comments
Comment #1
Bojhan commented"Normally when you press the Continue button, it will be grayed out and a throbber will appear beside it indicating the form has been submitted. However, when an element on the page triggers some AJAX event via the Forms API and the Continue button is clicked, the throbber is duplicated for as many times as you performed the event. This is comical but visually unnerving... ; )
I'm thinking maybe every time the form is reloaded the behavior is getting attached to that button again. Should be easy to check and avoid, right? : P" Ryan Rszrama at #906046: Throbber duplicated for Continue button when AJAX used on page
Additionally we want to put the Please wait text, in a invisible CSS element.
Comment #2
Bojhan commentedComment #3
DjebbZ commentedEven if it's a minor issue (not functionality related), it was hard to fix because the throbber appears for less than one second, so I can't use Firebug to debug css. And couldn't find how to set breakpoints in core ajax.js (where throbber is inserted)...
Anyway, trial-and-error, and we're almost there :
https://github.com/DjebbZ/drupalcommerce/commit/f7a7b92aff6d37ee78733dab... (also check the previous commit)
Note 1 : I only fixed the css for the "Order edit" page. But it should just be a matter of writing and loading this css somewhere else so it's included in every related page.
Note 2 : the only problem remaining is in the screenshot, it breaks a little bit the layout when "Cancel" is clicked.
Comment #4
DjebbZ commentedHere's a patch for #906046: Throbber duplicated for Continue button when AJAX used on page. It's just a matter of adding some better test to ensure the behavior is attached only once. But @rszrama I could not reproduce the but, in my local machine (with up-to-date code) the multiple throbber does not appear. Anyway the patch should prevent the problem from appearing, so you may want to test it as you showed me.
https://github.com/DjebbZ/drupalcommerce/commit/058067159dd03bfa4596e835...
Comment #5
pcambraComment #6
rszrama commentedI committed the change recommended in #4, but the original issue is still unresolved. If DjebbZ had a patch at the link in #3, it's apparently gone now.
Comment #7
rbayliss commentedHere is a patch for the Add Payment and Add Line Item submit buttons. I also noticed some weirdness with the billing information div flowing up onto the line item manager on ajax submit, so I added a clearfix to prevent that.
Comment #8
rbayliss commentedComment #9
rszrama commentedExcellent! Works as advertised, and I actually turned up an unrelated bug I'm fixing now (if you changed the country on the order add form, it duplicates the line item save message into the billing address fieldset). The only thing remaining per Bojhan's comment #1 is to hide the "Please wait..." message somehow.
So, patch #7 has been committed. Thanks again. : )
Comment #10
rbayliss commentedAh, guess I missed that. Here's a patch to display:none the Please Wait message.
Comment #11
rbayliss commentedComment #12
mikejoconnor commentedReviewed the patch. Works as advertised, however I am uploading a new patch using --no-prefix, so that it applies cleanly using the standard patch tool.
Comment #13
rszrama commentedCommitted. Thanks again!