Force Drupal to attach Drupal behavior to new ajaxed content [only Drupal.attachBehaviors() is not working the right way]

Question

I was doing lot of posts on drupal.org about this topic, but unfortunately in the wrong context.

• Ajaxed content is not attaching needed JS and CSS (forum)
• Ajaxed content is not attaching needed JS and CSS (issue)

I think that is not the problem, so i try it with a different approach, and maybe this could be the solution. Loading the whole PHP Page and extract a certain div with ajax didn't works the right way. So i thought, that i could let drupal load just the content and inject it with ajax into the div. I made a query with the hook_preprocess_page and hook_preprocess_node that is looking for a "ajax=1" in the requested URL and then only gives out the content without the whole page. And now with help of certain tpl.php files, in theory, i could limit the output of drupal to only $content. And here is the problem. My approach is working even when i leave the tpl.php files the original way, but removing the "$content" from node-ajax.tpl.php. With "working the right way", i mean that drupal doesn't reload the whole page, but off course not the content. But i can not explain that to myself, cause in the $content variable, so i thought, is only the html of the generated content. So my question is, how can i limit the output of drupal, to just the content, or am i doing the wrong steps to get this working. Here is the module and js file i'm using: my_ajax.module:

<?php

function my_ajax_init()
{
    drupal_add_js(drupal_get_path('module', 'my_ajax') . '/my_ajax.js');
}

function my_ajax_preprocess_page(&$vars, $hook)
{

    if (isset($_GET['ajax']) && $_GET['ajax'] == 1)
    {
        $vars['template_file'] = 'page-ajax';
    }
}

function my_ajax_preprocess_node(&$vars, $hook)
{

    if (isset($_GET['ajax']) && $_GET['ajax'] == 1)
    {
        $vars['template_file'] = 'node-ajax';
    }
}

my_ajax.js:

Drupal.behaviors.my_ajax = function (context) {
    $('#content-group-inner .node a').live('click', function (e) {
        var url = $(this).attr('href');
        //$('#content-region-inner').slideUp('slow');
        $('#content-region-inner').empty().html('<img src="ajax-loader.gif" style="margin-left:50%;"/>');
        xhr = $.ajax({
            data: 'ajax=1',
            type: 'GET',
            url: url,
            success: function (data) {
                $('#content-region-inner').html(data);
                Drupal.attachBehaviors(context);
            }
        });
        return false;
    });
};

Please help me with this. Every suggestion is appreciated.

Answer 1

I've got it. This is working the right way:

Drupal.behaviors.my_ajax = function (context) {
    $('#content-group-inner a').live('click', function (e) {

        $('#content-group-inner a').addClass('my_ajax-processed');
        var url = $(this).attr('href');
        $('#content-region-inner').empty().html('<img src="ajax-loader.gif" style="margin-left:50%;"/>');        
        $('#content-region-inner').load(url,'ajax=1',function() {
                        Drupal.attachBehaviors('#content-region-inner');
                        });
        return false;
        });
   };

Thank you for all your help.

Answer 2

I think your issues is that your success function won't have the variable context in scope so attach behaviors will be working on undefined.

I would guess that you could do

Drupal.attachBehaviors($('#content-region-inner'));