By mstef on

I am trying to integrate this AJAX script from dhtmlgoodies.com into my drupal site to dynamically load either nodes or other page body content.

Script:
http://www.dhtmlgoodies.com/index.html?whichScript=ajax_dynamicArticles

Demo:
http://www.dhtmlgoodies.com/scripts/ajax-dynamic-articles/ajax-dynamic-a...

The problem with the script right now is that it loads external HTML files according to the section ID that is clicked. I am not sure how to go about having it load a page from drupal, or just the body content for that matter.

Thanks.

⋅ Categories: Drupal 5.x

Comments

Anonymous’s picture

Anonymous (not verified) commented

Hi,

I am working on AJAX page refreshes myself and came accross this post hoping to find a little help. You see, I have actually managed to find a way of refreshing all the main content div by creating this script.js file in my theme folder which looks for all links in the body of the first loaded page by using the "init_links" function and then finding all the links within the refreshed content using the second and third functions consecutivly. Here's the code:

$(document).ready( function() {
	var init_links = function() {
		$('body')
		.find('a')
		.click(function () {
			var linktothis = $(this).attr('href')+" #content-inner-inner";
				$('#content-inner-bg').slideUp("slow", function(){
					$(this).empty().load(linktothis, init_content_links_1).slideDown("slow");
					});
			return false
		});
	};
	
	var init_content_links_1 = function() {
		$('#content-inner')
		.find('a')
		.click(function () {
			var linktothis = $(this).attr('href')+" #content-inner-inner";
				$('#content-inner-bg').slideUp("slow", function(){
					$(this).empty().load(linktothis, init_content_links_2).slideDown("slow");
					});
			return false
		});
	};
	
	var init_content_links_2 = function() {
		$('#content-inner')
		.find('a')
		.click(function () {
			var linktothis = $(this).attr('href')+" #content-inner-inner";
				$('#content-inner-bg').slideUp("slow", function(){
					$(this).empty().load(linktothis, init_content_links_1).slideDown("slow");
					});
			return false
		});
	};
	
	$(init_links);
});

To get this script working with your theme you will have to replace all instances of "#content-inner-bg" with your content wrapper div id and replace all instances of "#content-inner-inner" with the id of the inner content wrapper of you content.

Here is what my page.tpl.php looks like:

<?php // $Id: page.tpl.php,v 1.7 2008/05/14 17:08:36 johnalbin Exp $ ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language; ?>" xml:lang="<?php print $language->language; ?>">

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php if ($is_admin): ?>
    <link type="text/css" rel="stylesheet" media="all" href="<?php print $base_path . $directory; ?>/admin.css">
  <?php endif; ?>
  <!--[if IE]>
    <?php if (file_exists($directory . '/ie.css')): ?>
      <link rel="stylesheet" href="<?php print $base_path . $directory; ?>/ie.css" type="text/css">
    <?php else: ?>
      <link rel="stylesheet" href="<?php print $base_path . $zentheme_directory; ?>/ie.css" type="text/css">
    <?php endif; ?>
  <![endif]-->
  <?php print $scripts; ?>
  <script type="text/javascript" src="/sites/all/themes/zen/djez/js/AC_RunActiveContent.js"></script>
</head>

<body class="<?php print $body_classes; ?>">

  <?php if (!empty($adminmenu) && $is_admin): ?>
    <div id="admin-menu">
      <?php print $adminmenu; ?>
    </div> <!-- /administatration menu -->
  <?php endif; ?>
  
  	<div id="wrap">
	<div id="header">
	  <div id="header-inner" class="clear-block">

      <?php if ($logo || $site_name || $site_slogan): ?>
        <div id="logo-title">

          <?php if ($logo): ?>
            <div id="logo"><a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-image" /></a>
			<?php if ($header): ?>
        <div id="header-blocks" class="region region-header">
          <?php print $header; ?>
        </div> <!-- /#header-blocks -->
      <?php endif; ?>
			</div>
          <?php endif; ?>

          <?php if ($site_name): ?>
            <?php
              // Use an H1 only on the homepage
              $tag = $is_front ? 'h1' : 'div';
            ?>
            <<?php print $tag; ?> id='site-name'>
              <a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
                <strong><?php print $site_name; ?></strong>
              </a>
            </<?php print $tag; ?>>
          <?php endif; ?>

          <?php if ($site_slogan): ?>
            <div id='site-slogan'><?php print $site_slogan; ?></div>
          <?php endif; ?>

        </div> <!-- /#logo-title -->
      <?php endif; ?>

	  <div id="header-inner-left">
	    <div id="header-inner-right"></div>
	  </div>
	  
	  <div id="redbar">
	  <div id="mp3player">
	  <script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '100%',
'height', '74',
'src', 'http://www.djez.local/system/files/web/all/music/player/djezplayer',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'left',
'play', 'true',
'loop', 'true',
'scale', 'noscale',
'wmode', 'transparent',
'devicefont', 'false',
'id', 'djezplayer',
'bgcolor', '#000000',
'name', 'djezplayer',
'menu', 'false',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'http://www.djez.local/system/files/web/all/music/player/djezplayer',
'salign', 'lt'
); //end AC code
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="74" id="djezplayer" align="left">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="http://www.djez.local/system/files/web/all/music/player/djezplayer.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="scale" value="noscale" /><param name="salign" value="lt" /><param name="bgcolor" value="#000000" />	<embed src="http://www.djez.local/system/files/web/all/music/player/djezplayer.swf" menu="false" wmode="transparent" quality="high" scale="noscale" salign="lt" bgcolor="#000000" width="100%" height="74" name="djezplayer" align="left" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>
</div>
		<div id="redbar-left">		
	      <div id="redbar-right"></div>
	    </div>
	  </div>

    </div>
	</div>
		
	<div id="content-wrap">
		<div id="content">
			<div id="content-inner">
				<div id="content-inner-bg">
					<div id="content-inner-inner">

        <?php if ($mission): ?>
          <div id="mission"><?php print $mission; ?></div>
        <?php endif; ?>

        <?php if ($content_top): ?>
          <div id="content-top" class="region region-content_top">
            <?php print $content_top; ?>
          </div> <!-- /#content-top -->
        <?php endif; ?>

        <?php if ($breadcrumb or $title or $tabs or $help or $messages): ?>
          <div id="content-header">
            <?php print $breadcrumb; ?>
			<?php if ($title): ?>
			<div id="node-title">
              <h1 class="title"><?php print $title; ?></h1>
			  </div>
            <?php endif; ?>
            <?php print $messages; ?>
            <?php if ($tabs): ?>
              <div class="tabs"><?php print $tabs; ?></div>
            <?php endif; ?>
            <?php print $help; ?>
          </div> <!-- /#content-header -->
        <?php endif; ?>

        <div id="content-area">
          <?php print $content; ?>
        </div>

        <?php if ($feed_icons): ?>
          <div class="feed-icons"><?php print $feed_icons; ?></div>
        <?php endif; ?>

        <?php if ($content_bottom): ?>
          <div id="content-bottom" class="region region-content_bottom">
            <?php print $content_bottom; ?>
          </div> <!-- /#content-bottom -->
        <?php endif; ?>
			  </div>
			</div>
          </div>
		</div>
	</div>
	<div id="leftSpeakerBottom">
	  <div id="rightSpeakerBottom"></div>
	</div>
	
	<?php if ($left): ?>
        <div id="sidebar-left"><div id="sidebar-left-inner" class="region region-left">
          <?php print $left; ?>
        </div></div> <!-- /#sidebar-left-inner, /#sidebar-left -->
      <?php endif; ?>

      <?php if ($right): ?>
        <div id="sidebar-right"><div id="sidebar-right-inner" class="region region-right">
          <?php print $right; ?>
        </div></div> <!-- /#sidebar-right-inner, /#sidebar-right -->
      <?php endif; ?>
	
	<div id="footer">
	  <?php print $footer_message; ?>
	</div>
	
	<?php if ($closure_region): ?>
    <div id="closure-blocks" class="region region-closure"><?php print $closure_region; ?></div>
  <?php endif; ?>

  <?php print $closure; ?>
</div>
</body>
</html>

This should give you an idea of where my #content-inner-bg and #content-inner-inner divs are and what they contain so that you understand what it is that I'm reloading. However, this script is far from SEO friendly and does not let the submit functions from form buttons work correctly. My problem is basically getting some kind of way of creating an AJAX login box without using the above script and then implementing the login script into the above script while filtering out the login "link" (submit) button from the above script so that it I can have both AJAX refreshes and AJAX form submissions with the necessary page updating according to the form.

If you have found a way to create a full Drupal and AJAX integration would you mind sharing this with me?

mstef’s picture

mstef commented

Haha yea I've figured it out and way more...

First check out my drupal site to see the ajax/jquery functionality:

http://www.streetread.com

Then you can read through a post I made about the development - it should answer some questions:

http://www.streetread.com/blog/how-streetread-was-developed

Let me know...