First AJAX request is working very well, next takes too much time

Question

I'm working on ajaxing my site, for a long time now.
I found a method that's working for me, but only the first AJAX request is working the right way; the next request takes at least twice the time.

I thought, that it behaves like that because I load the whole scripts from a template file with every request. I removed the print $scripts from that template file; the result is that the requests take the same time took before.

This is the content of the files I am using.

my_ajax.module

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

function acquia_slate_preprocess_page(&$vars, $hook) {
  if (isset($_GET['ajax']) && $_GET['ajax'] == 1) {
    $vars['template_files'][] = 'page-ajax';
  }
}

my_ajax.js

Drupal.behaviors.my_ajax = function (context) {
  $('#content-group-inner a').live('click', function (e) {
    $('#content-group-inner a').not('.my_ajax-processed').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;
  });
};

page-ajax.tpl.php

<?php print $styles; ?>
<?php print $setting_styles; ?>
<!--[if IE 8]>
  <?php print $ie8_styles; ?>
<![endif]-->
<!--[if IE 7]>
  <?php print $ie7_styles; ?>
<![endif]-->
<!--[if lte IE 6]>
  <?php print $ie6_styles; ?>
<![endif]-->
<?php if ($local_styles): ?>
  <?php print $local_styles; ?>
<?php endif; ?>
<title><?php print $head_title; ?></title>

<?php if (arg(0) != 'admin') { ?>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript">
    var $jq = jQuery.noConflict();
  </script>
<?php } ?>
<?php  print $scripts; ?>
<a name="main-content-area" id="main-content-area"></a>
<?php print theme('grid_block', $tabs, 'content-tabs'); ?>
<div id="content-inner" class="content-inner block">
  <div id="content-inner-inner" class="content-inner-inner inner clearfix">
    <?php if ($title): ?>
      <h1 class="title"><?php print $title; ?></h1>
    <?php endif; ?>
    <?php if ($content): ?>
      <div id="content-content" class="content-content">
        <?php ?>
        <?php print $content; ?>
        <?php print $feed_icons; ?>
      </div><!-- /content-content -->
    <?php endif; ?>
  </div><!-- /content-inner-inner -->
</div><!-- /content-inner -->
<?php print $closure; ?>

Answer 1

I found a solution that's working for me. I just changed that:

$('#content-region-inner').load(url, 'ajax=1', function () {
      Drupal.attachBehaviors('#content-region-inner');

into that:

var result = $('#content-region-inner:not(.my_ajax-processed)', context)
    .load(url,'ajax=1',function() {
               Drupal.attachBehaviors(result);  

When using that, Drupal only fires up Drupal.attachBehaviors() once a time, no matter how much requests you do.

I hope this is working for you, too