Does anybody know how to use the new 'image_button'? I'm having trouble to get them to work. For debugging I created a simple form containing two button, a 'normal' button and an 'image_button' (see below). I dont know why, but only the 'normal' button submits the form. The image button only reload the form, but never executes the #submit handler. Any ideas?

  $form['buttons']['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Save configuration'),
    '#submit' => array('my_submit')
  );
  $form['buttons']['submit2'] = array(
    '#type' => 'image_button',
    '#title' => t('Test'),
    '#image' => 'path to image',
    '#submit' => array('my_submit')
  );
CommentFileSizeAuthor
#12 image_button_0.patch4.19 KBeaton
#6 image_button.patch3.35 KBeaton
#1 imgbtn.zip_.txt1.49 KBprofix898
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

profix898’s picture

profix898 CreditAttribution: profix898 commented
Title: How to use image_buttons » Image buttons do not invoke (#submit) handlers
Category: support » bug
Priority: Normal » Critical
FileSize
imgbtn.zip_.txt1.49 KB

I have written a small module to test the behaviour of buttons vs. image buttons. And actually the image buttons do not invoke any handler associated to them (#validate/#submit). I consider this a bug because I dont see why they shouldnt. To verify you can install the attached module (rename to .zip and unpack). I have tested with FF2, IE7, Opera9 on Windows with PHP5. It doesnt seem to be a browser-specific issue.

I found these lines in system.module and both form elements are specified with '#button_type' => 'submit' by default. What means they should both submit the form and invoke the handlers. Not?

$type['submit'] = array('#input' => TRUE, '#name' => 'op', '#button_type' => 'submit', '#executes_submit_callback' => TRUE, '#ahah_event' => 'submit', '#process' => array('form_expand_ahah'));
$type['image_button'] = array('#input' => TRUE, '#button_type' => 'submit','#executes_submit_callback' => TRUE, '#ahah_event' => 'submit', '#process' => array('form_expand_ahah'), '#has_garbage_value' => TRUE, '#image' => NULL);
profix898’s picture

profix898 CreditAttribution: profix898 commented

Because there is almost no documentation on image buttons I cant even tell if I use them correctly! Anybody?

dvessel’s picture

dvessel CreditAttribution: dvessel commented
Version: 6.x-dev » 7.x-dev
Category: bug » feature
Priority: Critical » Normal

Look for the form api at http://api.drupal.org

Image button is not a supported type. You can still alter it from your theme. The handbook pages has information on this.

profix898’s picture

profix898 CreditAttribution: profix898 commented
Version: 7.x-dev » 6.x-dev
Category: feature » bug
Priority: Normal » Critical

Image button is not a supported type.

It IS! Image buttons were added recently in http://drupal.org/node/162708 (mainly because they are needed for Views module D6 port). The code I posted above adds an image button as expected, but it does not execute the handlers for some reason. However I'm using them for a JS-powered UI where they work nicely.

dvessel’s picture

dvessel CreditAttribution: dvessel commented

Oh snap! That's great! Sorry about that. heh.

I'll take a look a bit later.

eaton’s picture

eaton CreditAttribution: eaton commented
Status: Active » Needs review
FileSize
image_button.patch3.35 KB

The previously committed patch did indeed make it POSSIBLE to implement image buttons correctly, but the actual implementation ofthe image button type appears to have been twitchy. In particular, it was unreliable when at that top level of a form (as opposed to inside of an element with#tree = TRUE.

The attached patch makes things more reliable and adds a dedicated function for processing the incoming values from image buttons, just as checkboxes and other tricky elements have.

There's one other slightly tweaky change: image buttons now use #src for their image path rather than #image. Our FAPI properties generally map to html equivalents, so the previous method was broken.

Anyone willing to test under IE would be a hero -- I've worked with it on FF and Safari now in a variety of configurations.

AjK’s picture

AjK CreditAttribution: AjK commented
Status: Needs review » Needs work

Sorry Eaton.

Used test module in #1.

Before patch, observed problem.

After patch.

FF, the image doesn't display but is replaced with the text "test". Clicking it does work (_submit called).

IE, image doesn't display (looks like a 404 on GET image). Clicking however doesn't call _submit :(

Eaton, please ping me in #drupal if you do another patch and I'll IE test for you straight away. That may make your life a little easier. (btw, I only have IE6 at this time. I'm getting a new laptop soon and wil be able to test IE7 but not till that arraives)

AjK’s picture

AjK CreditAttribution: AjK commented

@Eaton, this may help. In order to try and get you some extra info I added this to the top of index.php :-

  print '<pre>'. print_r($_POST, TRUE) .'</pre>';

After patch applied, I got this:-

For FF, _submit is called for bothbutton and image but array() (empty $_POST array)

For IE, hit the submit button _submit called and again array() (empty $_POST array)

But for image button on IE _submit not called and $_POST is this:-

Array
(
    [form_build_id] => form-b89598d4f365c7d4649437d2cda950d0
    [form_token] => cb2db3cdc01bdfc5560948c29910b6d0
    [form_id] => imgbtn_form
    [imgbtn_submit_x] => 28
    [imgbtn_submit_y] => 9
)
profix898’s picture

profix898 CreditAttribution: profix898 commented

@AjK: Eaton wrote "image buttons now use #src for their image path rather than #image." What means you must change this property in the test module ;)

Images are not broken with the above patch and I can confirm FF to work correctly, but IE is still broken.

eaton’s picture

eaton CreditAttribution: eaton commented

Found the issue -- Earl Miles' original image button patch had a chunk of helper code that helped it find incoming values in the IE case. That code was dropped from the latest version and the IE issue wasn't spotted. I'm working on the fix right now -- the encouraging news is that the changes from the previous patch DO in fact make it much easier to isolate this fix. Hooray!

profix898’s picture

profix898 CreditAttribution: profix898 commented

@Eaton: Any news? Please let me know if I can do anything to help you with this.

eaton’s picture

eaton CreditAttribution: eaton commented
Status: Needs work » Needs review
FileSize
image_button_0.patch4.19 KB

OK, here's a patch that uses some of Earl's code from the oooooold version but cleanly encapsulates it so that it only needs to run on image_button types. Anyone with IE? please give this a whirl. ;-)

Also, yes. '#image' is '#src' now -- that was ... arguably an error in the previous patch. Since we hadn't yet documented the EXISTENCE of this element, I think we can safely tweak that. ;)

profix898’s picture

profix898 CreditAttribution: profix898 commented
Status: Needs review » Reviewed & tested by the community

Great job, Eaton (and Earl)! Tested with FF2, IE6/7 and Opera9 and it really works :) Coding style and docs look good as well. I think this is RTBC. The change from '#image' to '#src' shouldnt be much of a problem IMO.

(Maybe we should keep the issue open (after the patch went in) until the existence of image buttons IS documented properly.)

Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy commented
Status: Reviewed & tested by the community » Needs work

Committed, thanks!

Leaving this code needs work, until this gets documented (in the update docs and in the FAPI docs).

chx’s picture

chx CreditAttribution: chx commented
Title: Image buttons do not invoke (#submit) handlers » Image buttons documentation does not exist
Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy commented

Guys, please help with documenting this, so we can clean this out of the core release blocker issue queue.

eaton’s picture

eaton CreditAttribution: eaton commented

Image buttons are now documented in the upgrade guide. The FormAPI reference document has fallen terribly out of date (many 5.0 era properties and functions aren't in it) and I'm collaborating with a couple of other developers on a more comprehensive rewrite that would include image_button documentation. Leaving this as 'needs work' for the time being...

eaton’s picture

eaton CreditAttribution: eaton commented
Title: Image buttons documentation does not exist » Update FAPI reference for FAPI3 properties, element, workflow
Category: bug » task
Priority: Critical » Normal

I've changed this to reflect what actually needs to be done. Now that the upgrade guide lists the information, the real problem is the FAPI reference/Intro.

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
CreditAttribution: webchick commented
Category: task » bug
Priority: Normal » Critical

This is critical. D6 cannot ship without this essential developer documentation.

moshe weitzman’s picture

moshe weitzman CreditAttribution: moshe weitzman commented

I don't really agree with the critical .We certainly could ship.

We have been more successful with in-code documentation like doxygen comments and the new schema docs. We could attempt a redo along those lines. I really don't know how to do the tables like we currently have.

chx’s picture

chx CreditAttribution: chx commented
Priority: Critical » Normal

Then let's demote this. If noone else, then I will work on this but a demote helps.

dpearcefl’s picture

dpearcefl CreditAttribution: dpearcefl commented
Status: Needs work » Postponed (maintainer needs more info)

Is this still a problem in current D6?

dpearcefl’s picture

dpearcefl CreditAttribution: dpearcefl commented
Status: Postponed (maintainer needs more info) » Needs work

Status: Needs work » Closed (outdated)

Automatically closed because Drupal 6 is no longer supported. If the issue verifiably applies to later versions, please reopen with details and update the version.