After clicking on a submit button which uses ajax, the button behaves like it has been set a float attribute (see screenshots). When submission is finished, it returns to normal.

The code i use is taken from the AJAX example "Add-more button (with graceful degradation)"

    $form['names_fieldset']['remove_name'] = array(
      '#type' => 'submit',
      '#value' => t('Remove one'),
      '#submit' => array('ajax_example_add_more_remove_one'),
      '#ajax' => array(
        'callback' => 'ajax_example_add_more_callback',
        'wrapper' => 'names-fieldset-wrapper',
      ),
    );

Thanks in advance

Files: 
CommentFileSizeAuthor
#12 1280674-ajax.patch943 bytesandypost
PASSED: [[SimpleTest]]: [MySQL] 34,007 pass(es).
[ View ]
#11 1280674-ajax.patch546 bytesandypost
PASSED: [[SimpleTest]]: [MySQL] 34,017 pass(es).
[ View ]
#6 throbber_0.patch726 bytesTR
PASSED: [[SimpleTest]]: [MySQL] 33,985 pass(es).
[ View ]
submitted.png5.81 KBmagdulka
normal.png6.62 KBmagdulka

Comments

rfay’s picture

Yes, that's been a bug from day one. I studied it one time and decided it was a theme issue, but I agree it should be fixed.

TR’s picture

Version:7.7» 7.x-dev
Status:Active» Needs review
StatusFileSize
new706 bytes
PASSED: [[SimpleTest]]: [MySQL] 35,979 pass(es).
[ View ]

Try this. I've been using it successfully for about three months - it seems to solve this problem everywhere it occurs. Credit for the patch goes to Damien Tournoud.

magdulka’s picture

Thanks, it works!

rfay’s picture

Version:7.x-dev» 8.x-dev
Issue tags:+needs backport to D7

OK, let's get this fixed!

rfay’s picture

Status:Needs review» Needs work

Will need a reroll after the core patch went in.

TR’s picture

Status:Needs work» Needs review
StatusFileSize
new726 bytes
PASSED: [[SimpleTest]]: [MySQL] 33,985 pass(es).
[ View ]

Rerolled for core changes.

pflame’s picture

The patch from #6 works great, I checked with all the examples from ajax example modules. It works.

rfay’s picture

Status:Needs review» Reviewed & tested by the community

I really appreciate TR and DamZ actually finally documenting the fix to this long, longstanding patch.

Here's a quick screencast that shows what happens so everybody can understand it. Sorry about the horrible audio, but it's just demonstrating a bug :-)

RTBC.

Dries’s picture

Status:Reviewed & tested by the community» Fixed

Committed to 7.x and 8.x. Thanks.

andypost’s picture

Status:Fixed» Needs work

system.base-rtl.css should be fixed too!

EDIT: It seems this patch does not tested against RTL at all. And should be rolled back.

andypost’s picture

Status:Needs work» Needs review
StatusFileSize
new546 bytes
PASSED: [[SimpleTest]]: [MySQL] 34,017 pass(es).
[ View ]

I think this enough

andypost’s picture

StatusFileSize
new943 bytes
PASSED: [[SimpleTest]]: [MySQL] 34,007 pass(es).
[ View ]

.message is LTR

nagiek’s picture

I'm grateful for this patch! Really improves usability.

Thanks.

aspilicious’s picture

Status:Needs review» Needs work
+++ b/core/modules/system/system.base-rtl.cssundefined
@@ -21,15 +21,15 @@ html.js input.throbbing {
.ajax-progress {
-  float: right;
+  display: inline-block;
}

I think you can remove this as it is the same code now as in the RTL css file

+++ b/core/modules/system/system.base-rtl.cssundefined
@@ -21,15 +21,15 @@ html.js input.throbbing {
+.ajax-progress .message {
+  padding-right: 20px;
+}

Best practice to reset padding-left to 0.

18 days to next Drupal core point release.

TNmoxa’s picture

Doesn't work for check boxes

TR’s picture

@TNmoxa: Can you give a specific example of a core Drupal page or a contributed module page where this doesn't work for checkboxes? "Doesn't work" isn't much help unless you can give steps for us to reproduce the error you're seeing. Likewise, are you testing this on an LTR or RTL site? The LTR patch is already committed to 7.x and 8.x, the only thing under consideration now is how the RTL patch should look.

nod_’s picture

Status:Needs work» Closed (duplicate)

dup there is a newer issue to use classes for the ajax throbber, fixing this bug.

rfay’s picture

@nod_, please don't mark something as a dup without saying what it's a duplicate of. Could you please provide that here?

Thanks!

nod_’s picture

yeah sorry tried to find it without luck, more awake now: here it is #1847916: Replace the ajax-progress-throbber div with a class.