Execute jquery function if Ajax callback form complete

Question

I got a custom ajax callback which replaces my checkbox options based on the select option.

Now after the checkboxlist get's updated i need to execute a jquery function on those checkboxes.

How can i execute this custom jquery function after the callback is done, so after the checkboxlist is updated.

Form element:

        $widget['select_box'] = array(
            '#type' => 'select',
            '#title' => 'Select bussen',
            '#options'  => $options,
            '#validated' => TRUE,
            '#default_value' => '_none',
            '#attributes' => array('class' => array('select-province')),
            //The callback
            '#ajax' => array(
              'callback' => 'ajax_select_callback',
              // 'wrapper' is the HTML id of the page element that will be replaced.
              'wrapper' => 'replace_select_div',
            ),
        );

        //Form element wich get updated
        $widget['select_box_2'] = array(
            '#type' => 'checkboxes',
            '#title' => 'Select bussen',
            '#options' => ...,
            '#prefix' => '<div id="replace_select_div">',
            '#suffix' => '</div>',
            );

Ajax callback function:

    function ajax_select_callback($form, $form_state) {
      // The form has already been submitted and updated. We can return the replaced
      // item as it is.
    return $form['line_item_fields']['field_bussen_select']['und'][0]['select_box_2']

    }

Jquery function i run on the checkboxes:

    jQuery("input[type='checkbox']").change(function () {
        jQuery(this).parent().siblings('ul')
            .find("input[type='checkbox']")
            .prop('checked', this.checked);
    });

Answer 1

I think if found the answer at :https://drupal.org/node/171213.

Section: JavaScript on your AJAX form

"Attach jQuery to Drupal.behaviors, that way it can be run anytime new DOM elements are inserted. One example, if you're using AJAX in Views, each time a section of the page reloads, it will reload/run jQuery."

Didn't test it, because i don't need it anymore :), but still good to know!

Answer 2

Wrap your JS function in Drupal.behaviours, it will work after section reloads

(function ($) {
  Drupal.behaviors.myModuleBehaviours = {
    attach: function (context, settings) {
      $("input[type='checkbox']").change(function () {
        $(this).parent().siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
      });
    }
  }
})(jQuery);

Answer 3

Work with ajax_commands

your callback could be:

function ajax_select_callback($form, &$form_state) {
  $commands = array();
  // Replace the form element.
  $commands[] = ajax_command_replace('#edit-select_box_2-SELECTOR', render($form['select_box_2']), array());
  // Invoke any JavaScript func
  $commands[] = ajax_command_invoke(NULL, 'your_custom_js', array());

  // more commands...

  return array(
    '#type' => 'ajax',
    '#commands' => $commands,
  );
}

And in JS:

jQuery.fn.your_custom_js = function () {
  ....
};

This is untested, its just the elegant way to go.

Answer 4

Please find below the nice and easy to understand tutorial for calling javascript function after ajax event in Drupal 7:

http://www.jaypan.com/tutorial/calling-function-after-ajax-event-drupal-7