How to invoke autodialog module close method in autodialog.js file using ajax_command_invoke

Question

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);
  }

Answer 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);
}