1

I have created a form using a custom module. I am working on ajax functionality and updating markup when user enter text in textfield of the form.

Creating form in module

/**
 * Implements hook_form().
 */            

  $form['name'] = array(
    '#type' => 'textfield',
    '#description' => 'Enter your name',
    '#title' => 'Name',
    '#size' => 50,
    '#ajax' => array(
        'callback' => 'custom_print_ajax_name_callback',
        'wrapper' => 'custom-print-name',
        'method' => 'replace',
  ),
  );   

  $form['name_msg'] = array(
    '#type' => 'item',
    '#markup' => (!empty($form_state['input']['name']) ? $form_state['input']['name'] : ''),
    '#prefix' => '<div id="custom-print-name">',
    '#suffix' => '</div>',

  );

Ajax submit callback:

/**
 * Ajax callback
 */
function custom_print_ajax_name_callback($form, &$form_state) {

  return $form['name_msg'];
}

Everything is working correctly except that when I checked HTML of the page, an extra div is added in HTML of markup after updating ajax as shown in below image.

I do not have any idea why is this extra div rendering with markup.

Thanks in advance.

ajax error

11
  • What's in custom_print_ajax_name_callback?
    – Mołot
    Dec 23, 2013 at 12:43
  • Its returning the return $form['name_msg'];. I have already added function custom_print_ajax_name_callback() in question. Dec 23, 2013 at 12:44
  • ok, and how do you know it's AJAX's fault? And not some module theming issue? Also things like that you should inspect using source, firebug shows DOM tree as browser understood it, not as you rendered it to HTML.
    – Mołot
    Dec 23, 2013 at 12:47
  • I'd debug item type theme function as I don't know about it. I couldn't find any information about it anywhere..
    – xurshid29
    Dec 23, 2013 at 12:49
  • @Mołot, I am working on fresh drupal installation and using default theme and I have checked html before ajax and after ajax and I only get extra 'div' after ajax call. I have also checked source of html, as I am using, so it did not show any update html. Dec 23, 2013 at 12:55

1 Answer 1

0

I have checked ajax.js in Drupal site and I have found that extra div is added as ajax wraps new content inside an empty div after a successful ajax request.

Comment Mentioned in ajax.js:

We don't know what response.data contains: it might be a string of text without HTML, so don't rely on jQuery correctly iterpreting $(response.data) as new HTML rather than a CSS selector. Also, if response.data contains top-level text nodes, they get lost with either $(response.data) or $('<div></div>').replaceWith(response.data).

Code:

var new_content_wrapped = $('<div></div>').html(response.data);
var new_content = new_content_wrapped.contents();

Check this also.

1
  • Sorry, Jayendra is wrong. The extra div is added as a container for drupal status messages. Check out includes/ajax.inc line 549 in 7.26: Add the status messages inside the new content's wrapper element, so that on subsequent Ajax requests, it is treated as old content.
    – user27412
    Mar 20, 2014 at 6:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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