1

I have form that loads in modal using autodialog module and I have two buttons inside the form the close and save button. What I am trying to achieve is to just close the modal when the close button is clicked. I can do this using jQuery but what I wanted to do is use ajax_command_invoke to invoke autodialog close to close the modal. so far this what I have done, but I can't make it work maybe I am doing it wrong.

function example_autodialog_close_form_submit($form, &$form_state) {
  switch($form_state['clicked_button']['#value']) {
    case 'Closed':
      $commands[] = ajax_command_invoke('.autodialog-content', 'dialog', array('close'));
      break;
    case 'Save':
      // Insert data in database.
      break;
  }
  return array('#type' => 'ajax', '#commands' => $commands);
}

Using jQuery, this one work but what I wanted is use ajax_command_invoke to invoke auto dialog close.

$('#autodialog-close').click(function() {
  $('.autodialog-content').dialog('close');
});

Some code snippet in autodialog module autodialog.js file.

  Drupal.ajax.prototype.commands.autodialog = function (ajax, response, status) {
    var options = {
      title: response.title,
      width: 500,
      modal: true,
      closeText: Drupal.t('Close'),
      close: function () {
        $(this).dialog('destroy').remove();
      }
    };
    $.extend(options, response.options);

    // Close previous dialog
    if (options.closeprev) {
      $('.autodialog-content').dialog('close');
    }

    // Create dialog content
    var $dialogContent = $('' + response.content + '').appendTo('body');

    // Open dialog. Not $dialog.dialog() because it causes problems with inline scripts for jQuery 1.4.
    $('#' + response.dialog_id).dialog(options);

    // Remove focus from first tabbable element
    $dialogContent.closest('.ui-dialog').focus();

    // Close dialog when clicked outside
    $('.ui-widget-overlay:last').click(function (event) {
      if ($(event.target).hasClass('ui-widget-overlay')) {
        $dialogContent.dialog('close');
      }
    });

    Drupal.attachBehaviors($dialogContent);
  }
  • Can't see any problem with jQuery solution. Though would be good to do it the Drupal way. The code inside the snippet is also doing a Jquery implementation. So still I will consider the initial solution you posted above. – Gulok Aug 21 '16 at 13:18
1

Finally I made it work.

Instead of using asaf module (This module is used to AJAX-ify form submissions) - not aware of this one, just notice it appending its own ajax class. thought that autodialog already made the submit button ajaxified. In combo with autodialog I make my form api submit button ajaxified.

here's my working code

Form submit buttons.

  $form['closed'] = array(
    '#type' => 'submit',
    '#value' => 'Closed',
    '#attributes' => array('class' => array('btn btn-block btn-default btn-sm')),
    '#ajax' => array(
      'callback' => 'ajax_example_submit',
    ),
  );

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Save Changes',
    '#ajax' => array(
      'callback' => 'ajax_example_submit',
    ),
  );

Ajax callback

function ajax_example_submit($form, &$form_state) {
  $commands = array();
  switch($form_state['clicked_button']['#value']) {
    case 'Closed':
      $commands[] = ajax_command_invoke('.autodialog-content', 'dialog', array('close'));
      break;
    case 'Save Changes':
      drupal_set_message('Saved Changes');
      $commands[] = ajax_command_invoke('.autodialog-content', 'dialog', array('close'));
      break;
  }
  return array('#type' => 'ajax', '#commands' => $commands);
}

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.