I got missing progress bar, and after inspection it turns out that the new ahah progress bar element is added next to the input tag (button).

Thus the styling (sliding - door technique) is broken.

I'm not quite sure that this is the best solution but it works for me :

/**
 * Handler for the form redirection submission. fix for buttonsytle
 */
Drupal.ahah.prototype.beforeSubmit = function (form_values, element, options) {
  // Disable the element that received the change.
  $(this.element).addClass('progress-disabled').attr('disabled', true);

  // Insert progressbar or throbber.
  if (this.progress.type == 'bar') {
    var progressBar = new Drupal.progressBar('ahah-progress-' + this.element.id, eval(this.progress.update_callback), this.progress.method, eval(this.progress.error_callback));
    if (this.progress.message) {
      progressBar.setProgress(-1, this.progress.message);
    }
    if (this.progress.url) {
      progressBar.startMonitoring(this.progress.url, this.progress.interval || 1500);
    }
    this.progress.element = $(progressBar.element).addClass('ahah-progress ahah-progress-bar');
    this.progress.object = progressBar;
    $(this.element).parent().after(this.progress.element);
  }
  else if (this.progress.type == 'throbber') {
    this.progress.element = $('<div class="ahah-progress ahah-progress-throbber"><div class="throbber">&nbsp;</div></div>');
    if (this.progress.message) {
      $('.throbber', this.progress.element).after('<div class="message">' + this.progress.message + '</div>')
    }
    $(this.element).parent().after(this.progress.element);
  }
};

by putting the code above in my theme script.js then the new ahah element is attached after the span tag that wraps the button (input) tag

Comments

Steven Jones’s picture

Status: Active » Needs work

Brilliant, works with filefield ahah uploading.

Needs to be rolled into a patch for the module.

duckzland’s picture

I've been thinking about this module html tag, I think instead of modifying the ahah, modifying the html can be a cleaner way to fix the throbber.

right now if the button receives additional ahah throbber the html would be like :

<span class="form-button-wrapper"> // the right image
 <input id=....... > // the left image
   <div class="ahah..... ></div> // broken image because the this is in the middle of left and right image
</span>

But I think if we modify the html tag like :

<div class="form-button-main-wrapper"> // the right image
<span class="form-button-wrapper"> // the left image
 <input id=....... > 
   <div class="ahah..... ></div> 
</span>
</div>

then the ahah will be rendered on top of the left image

Maybe someone can create the proper patch for this?

Steven Jones’s picture

But the javascript modifies the html to add the throbber in? So we need to fix the ahah js.

duckzland’s picture

yes the javascript modify the html, but only appending a new html element, if the new element is wrapped with the left side image then the throbber will stay on top of the button image.

Steven Jones’s picture

Ouch, you're suggesting we actually change the markup for the buttons themselves, and basically have an extra wrapper div. Umm...not sure what implications that would have , and if that is necessarily the best solution.

duckzland’s picture

I havent actually try it yet, so I don't know if it is the best solution.

But from my thought, if we can force the ahah to be "wrapped" in image then all the fix for views, cck etc will be somehow not needed.

Because basically if we implement another wrapper then the button still act like "drupal normal" button ( input element with ahah throbber appended next to it) but with image wrapping.

so other contrib modules that follows "drupal normal" button in theory should not be broken at all.

Anyway those are just my idea, as I havent actually try them yet.

Cheers!

superdorx’s picture

A patch would be great!

ccavuoti’s picture

excellent, thanks

ccavuoti’s picture

excellent thanks, we might just find a better solution .. see the progress bar to the right of button? greeting