Question

I’m populating a select box using an AJAX callback in Drupal 7. I’ve tried both ajax_command_append() and ajax_command_html() to set the new <option...> statements, but both these wrap the HTML that I create inside a <div>. This causes the <select> to not display any of the options.

Is there a way to tell Drupal “Hey stupid, this is exactly the HTML I want, don’t mess with it”?

I can code some jQuery to remove the div I guess, but it would be a lot better if I can prevent it from being added in the first place.

Answer 1

Yes you can!

Declare your own custom js callback. In below example, I used a span instead of the divs. But you can obviously remove the wrapper alltogether.

PHP:

function my_ajax_callback() {
  $data = 'saved!';
  // instead of using ajax_command_html, we provide our own 
  // js custom callback function
  $output = array(
    '#type' => 'ajax',
    '#commands' => array(
      array('command' => 'myjscallback', 'data' => $data),
    ),
  );

  return $output; 
}

JS:

$(function() {
  Drupal.ajax.prototype.commands.myjscallback = function (ajax, response, status) {
    $('#save-btn-message').html('<span>' + response.data + '</span>');
  };
});