Webmaster Forum / HTML, CSS, Scripts / JavaScript / October 2007

I'm doing an Ajax load, and I'd like to scroll to the top of the div
containing the new content after the Ajax load is completed.  But there
doesn't seem to be a way to do that yet in JQuery.  Even if I put the
scrollto command in the callback, it gets ignored because (I think) the
load is still being completed.  Here's the code I've been using:

function ScrollToDiv(theDivID)
{
   $("html,body").animate({ scrollTop: $("#"+theDivID).offset().top });
}

  $(document).ready(function(){
 
  $("#HelpInfo").click(function(){
      var htmlStr = $(this).html();
       
$("#HelpInfo").load("http://localhost:8888/index.php/your_plan/HelpInfo",
{contents: htmlStr}, ScrollToDiv("HelpInfo"));
   });
});

jQuery likes to be compatible with other javascript libraries, and it
seems like Scriptaculous has an ajax load command that can be set to
synchronous rather than asynchronous.  So I'm trying this:

jQuery.noConflict();

//JQUERY
jQuery(document).ready(function(){  
  jQuery("#HelpInfo").click(function(){
      var htmlStr = jQuery(this).html();
      DoAjaxUsingScriptaculous(htmlStr);
   });
});

function DoAjaxUsingScriptaculous(htmlStr)
{
  new Ajax.Updater('HelpInfo',
'http://localhost:8888/index.php/your_plan/HelpInfo',
{contents:'htmlStr', onComplete:"scrollTo('HelpInfo')"});
}

But Firebug gives me an error message saying, "Ajax is not defined,"
even though I have included the Scriptaculous and Prototype libraries.

How can I fix this?

Thanks very much in advance to all for any info.