Drupal.attachBehaviors not effect to returned ajax form

Question

I'm working on Drupal 7, I have a form constructed like this

function qt_debate_response_form($form, &$form_state, $node_id){
$form['node_id'] = array(
    '#type' => 'value',
    '#value' => $node_id,
);
$form['response_body'] = array(
    '#type' => 'textarea',
    '#required' => TRUE,
    '#row' => 4,
    '#default_value' => '',
);
$form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Post'),
    '#ajax' => array(
      'callback' => 'qt_debate_response_form_js',
      'wrapper' => 'response-message-' . $node_id,
      'method' => 'append',
      'effect' => 'fade',
    ),
);
return $form;
}

And an ajax callback function to add new comment

function qt_debate_response_form_js($form, $form_state) {
global $user;
$body_text = $form_state['values']['response_body'];
$node_id = $form_state['values']['node_id'];

$message_js = '
<script language="javascript" type="text/javascript">
    qt_debate_response_load_new_item(' . $node_id . ',' . $user->uid . ');

    jQuery(".response-form-wrapper textarea").val("");
</script>';


$comment = new stdClass();
$comment->nid = $form_state['values']['node_id']; // Node Id the comment will attached to
$comment->cid = 0;
$comment->pid = 0;
$comment->uid = $user->uid;
$comment->is_anonymous = 0;
$comment->homepage = '';
$comment->status = COMMENT_PUBLISHED;
$comment->language = LANGUAGE_NONE;
$comment->subject = text_summary($body_text, null, 60);
$comment->comment_body[$comment->language][0]['value'] = $body_text;
$comment->comment_body[$comment->language][0]['format'] = 'filtered_html'; 
comment_submit($comment);
comment_save($comment);

$output = $message_js;

return $output;
}

here are my Javascript that load new created comment into Div (ajax)

function qt_debate_user_post_load_new_items(debate_id) {
// get the latest comment id in context
$top_comment = jQuery(".view-debate-user-posts .views-row").first();
$top_comment_id = jQuery(".nid-field-hidden", $top_comment).html();

jQuery.ajax({
    type: "GET",
    url: "/qt_debate/ajax/load_new_items/" + debate_id + "/" + $top_comment_id,
    data: "",
    success: function(html){
        $new_items = jQuery(".view-content", html);
        jQuery("form", $new_items).attr("action","/debate/199");
        jQuery(".form-submit", $new_items).attr("id","edit-submit--5");

        if ($new_items.html() != null) {
            html = '<div class="new_items_wrapper" style="display: none">' + $new_items.html() + '</div>';
            if (jQuery(".view-debate-user-posts .view-content").length == 0) {
                jQuery(".view-debate-user-posts .view-empty").remove();
                jQuery(".view-debate-user-posts").append('<div class="view-content"></div>');
            }

            jQuery(".view-debate-user-posts .view-content").prepend(html);

            jQuery(".view-debate-user-posts .view-content .new_items_wrapper").fadeIn(500, function() {
                jQuery(".views-row", this).unwrap();
                Drupal.attachBehaviors();
            });
        }
    },
});

var t = setTimeout("qt_debate_user_post_load_new_items(" + debate_id + ")", 30000)
}

The hook_menu which is return the views content to jQuery call back

function qt_debate_ajax_load_new_items() {
$debate_id = arg(3);

print views_embed_view('debate_user_posts_load_new_items_', 'default', array($debate_id));
exit(0);
}

View template file, i also return a new form inside

print drupal_render(drupal_get_form('qt_debate_response_form', $row->nid));

The return view content rendered good, with Drupal.attachBehaviors in Javascript, all others effect in returned view content also work well. Except the form submit ajax.

Can any one help please ? The attachBehaviors not work with return ajax form.

Thanks so much!

Answer 1

Drupal.attachBehaviors(context);

basically re-runs any functions defined by

Drupal.behaviors.yourFunctionName = function(context) {
    $('div.someSelectorclass:not(.already-processed-class)', context).addClass('already-processed-class').bind(someMethod);
}

and these methods must add a selector [already-processed-class] to test for whether the bind(); [ or click(function(e){}); or each(function(){}); or whatever ] has already been added. The "context" is to pass less-than 'document' - say, if your new content is known to be inside a smaller context that will still be found by original behaviors function: in this example I could pass the parent container selector of my new 'div.someSelectorclass'

Drupal.attachBehaviors('div.parentContainerClass');

instead of

Drupal.attachBehaviors(document);