1

i have an Ajax button, the code looks like this:

class coolButtons {
  public function getFormFieldAjaxButton() {
    return [
      '#type' => 'submit',
      '#value' => t('<i class="  glyphicon glyphicon-refresh"></i> Ajax Button'),
      '#name' => 'ButtonAjax',
      '#submit' => ['ajax_submit'],
      '#ajax' => [
        'callback' => 'ajax_callback',
        'wrapper' => 'button-fieldset-wrapper',
      ],
      '#attributes' => ['class' => ['btn-primary btn-sm']],
    ];
  }
}

function cool_form ($form, &$form_state) {
  $buttons = new coolButtons();
  $form['fieldset-buttons'] = [
    '#type' => 'fieldset',
    '#title' => t('Buttons'),
    '#collapsible' => TRUE,
    '#collapsed' => FALSE,
    '#prefix' => '<div id="button-fieldset-wrapper">',
    '#suffix' => ' </div>',
  ];

  $form['fieldset-buttons']['button_ajax'] =
        $buttons->getFormFieldAjaxButton();
}

function ajax_callback($form, $form_state) {
  if ($form_state['triggering_element']['#name'] == 'ButtonAjax') {
    return $form['fieldset-buttons'];
  }
}

function ajax_submit($form, &$form_state) {
  if ($form_state['triggering_element']['#name'] == 'ButtonAjax') {
    drupal_set_message('You clicked a very cool ajax button!');
  }
}

The value of the button has HTML in it, which causes problems.

1.) I can't have more than one of these buttons with html in the #value in one form, because then every button will perform the first defined statement in ajax_callback and ajax_submit regardless of the if statements (and thus, regardless of fieldset, #name etc.).

2.) At the bottom of the form, text will appear in the following form:

Ajax Button" />

Is there a way around it, or is the only solution to not use HTML in the #value of the buttons?

I am using Drupal 7.


Edit:

The slightly altered functions in rdp_cellmodel.module:

/**
 * Implements @see \hook_theme_registry_alter().
 */
function rdp_cellmodel_theme_registry_alter(&$theme_registry) {
  drupal_set_message('Boop?');
  if (isset($theme_registry['button'])) {
    $theme_registry['button']['function'] = 'rdp_cellmodel_button';
  }
}

/**
 * TODO: Description
 *
 * @param $variables
 *
 * @return string
 */
function rdp_cellmodel_button($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'submit';
  element_set_attributes($element, array('id', 'name', 'value'));

  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
  if (!empty($element['#attributes']['disabled'])) {
    $element['#attributes']['class'][] = 'form-button-disabled';
  }
  if (!empty($element['#glyphicon'])) {
    $glyph_name = $element['#glyphicon'];
    return '<button' . drupal_attributes($element['#attributes']) . ' /><span 
      class="glyphicon glyphicon-' . $glyph_name . '"></span> '.
      $element['#value'] .'</button>';
  }
  else {
    return '<input' . drupal_attributes($element['#attributes']) . ' />';
  }
}

And here the form field in a class file:

/**
   * @return array
   */
  public function getFormFieldGeneratePreview() {
    return [
      '#type' => 'submit',
      '#value' => t('Preview Name'),
      '#name' => 'PreviewButton',
      '#submit' => ['ajax_submit'],
      '#ajax' => [
        'callback' => 'ajax_callback',
        'wrapper' => 'hpscreg-fieldset-wrapper',
      ],
      '#attributes' => ['class' => ['btn-primary btn-sm']],
      '#limit_validation_errors' => [],
      '#glyphicon' => 'refresh',
      '#suffix' => '<div> </div>',
    ];
  }

Edit 2: normal, shortly after clicked, after clicked

0
2

Here is the proper way of adding glyphicons to your buttons, you alter the button function and use a custom made one.

function mymodule_theme_registry_alter(&$theme_registry) {
  if (isset($theme_registry['button'])) {
    $theme_registry['button']['function'] = 'mymodule_button';
  }
}

function mymodule_button($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'submit';
  element_set_attributes($element, array('id', 'name', 'value'));

  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
  if (!empty($element['#attributes']['disabled'])) {
    $element['#attributes']['class'][] = 'form-button-disabled';
  }
  if (!empty($element['#glyphicon'])) {
    $glyph_name = $element['#glyphicon'];
    return '<button' . drupal_attributes($element['#attributes']) . ' /><span 
      class="glyphicon glyphicon-' . $glyph_name . '"></span> '.
      $element['#value'] .'</button>';
  }
  else {
    return '<input' . drupal_attributes($element['#attributes']) . ' />';
  }
}

Then all you have to is add #glyphicon element to the submit and assign it the glyphicon name:

  $form['submit_button'] = array(
    '#type' => 'submit',
    '#value' => 'Send',
    '#glyphicon' => 'envelope', // in your case use "refresh"
  );

Result:

enter image description here

14
  • Thanks! I put the two functions into my .module file, changed the hooks (3x mymodule) and added #glyphicon to the submit but it is not working yet. What did i wrong?
    – Xyarvius
    Mar 27 '19 at 9:28
  • Did you clear the cache?
    – No Sssweat
    Mar 27 '19 at 10:23
  • Yes, i cleared the cache and ran the update script.
    – Xyarvius
    Mar 27 '19 at 11:13
  • @Xyarvius should have worked... are you sure the module is enabled? double check that. Also, you can add drupal_set_message('Is this working?'); on line 2 of my code, to see if the hook is indeed firing.
    – No Sssweat
    Mar 27 '19 at 12:19
  • The hook is indeed NOT firing. The module is enabled. I editted my main post and added my current code there. The module is using a custom theme (not made by me) maybe that is an issue?
    – Xyarvius
    Mar 27 '19 at 16:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.