I'm looking for a way to figure out what CSS and JavaScript files are loaded, and what else CSS and JavaScript files needed to be loaded for new content I'm injecting with AJAX.

I've am module file, where I load my my_ajax.js file with hook_init(). Also there's a hook_preprocess_page() function that is looking for an AJAX request. When there's an AJAX request, I use another page.tpl.php to output only $content and the entire head of the requested content.
This is not really a clean solution, but many contents needs additional CSS and JS files, for working properly. So, I decided to put the needed CSS and JS files, in kind of, inline to the body.
As I mentioned above, that is not a clean solution, but it works for me. The problem is when I inject new content with its head, into the body; every time I load the content through AJAX, all files are getting reloaded, and not from cache as it should be.

Because of that, I think I could only load the missing JS and CSS files, which are not already loaded. For that way, I have to find out what files are already loaded in regular head, what additional files does the new content need, and then only load the needed one.

Here are my module's files.


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';
    $variables['loaded_js'][] = $variables['scripts'];


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() {

    return false;


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

<?php print $scripts; ?>
<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();
<?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 print $content; ?>
        <?php print $feed_icons; ?>
      </div><!-- /content-content -->
    <?php endif; ?>
  </div><!-- /content-inner-inner -->
</div><!-- /content-inner -->
<?php print $closure; ?>
  • 2
    Might not help you probably, but Drupal 7 has this built in, any additionally added CSS/JS during an ajax request is automatically added and returned too. It does that by submitting all already loaded CSS/JS files with each ajax request.
    – Berdir
    May 6, 2011 at 13:53
  • As side note: in the template file you are printing $scripts twice.
    – apaderno
    May 6, 2011 at 13:57
  • @kiamlaluno: You're right, but that was a copy&insert issue, caused by me. @Berdir : Unfortunately it's not able for me to upgrade to D7, cause some modules, i'm using, haven't got a D7 release yet. So if anybody know even just a part of solution, please let me know. Thanx for all your replys.
    – dennis605
    May 10, 2011 at 19:41


Your Answer

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

Browse other questions tagged or ask your own question.