Ajax Load Callbacks/Using jQuery with Other jLibs? [SOLVED]
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.