Calling jquery functions other then on document ready

[jl5501]

I am missing some probably trivial understanding regarding when jquery code can be called, and would like some pointers please.

 

the particular example happens to be for a slideshow, but could be any other jquery functionality.

 

So I have this situation where the normal call is on ready like this

 

<script type="text/javascript">
function onBefore() { 
    $('#output').html("Scrolling image:<br>" + this.src); 
} 
function onAfter() { 
    $('#output').html("Scroll complete for:<br>" + this.src) 
        .append('<h3>' + this.alt + '</h3>'); 
}
$(document).ready(function() {
    $('.slideshow').cycle({
	fx: 'scrollLeft',
	timeout: 5000,
	before : onBefore,
	after : onAfter
});
});

</script>

 

I have included the 2 callback functions there but they are not relevant to my question particularly

 

Ok that works perfectly and all occurs as it should

 

What I actually want is the on ready function to call a getContent() function that loads content to the page and then calls the jquery

 

all works in terms of the content load, but the jquery call produces an error so I am obviously calling it incorrectly

 

my ready function just does this and works correctly

<script type="text/javascript">
$(document).ready(function(){
http = getHTTPObject();
http2 = getHTTPObject();
loadContent();
});
</script>

 

the loadContent calls my serverside code by ajax correctly ( no particular reason not to use jquery ajax), but after the call I wish to initiate the slideshow so it looks like this

 

function initSS()
{
alert('starting');
alert('here');
        alert($('.slideshow').length);
    $('.slideshow').cycle({
                fx: 'scrollLeft',
                timeout: 5000,
                before : onBefore,
                after : onAfter
        });
alert('done');
}
function showContent()
{
        if(http.readyState == 4)
        {
alert(http.responseText);
                eval(http.responseText);
                initSS();
        }
}
function loadContent()
{
        var url='loadindexcontent.php';
//alert(url);
        http.open("GET",url, true);
        http.onreadystatechange=showContent;
        http.send(null);
}

 

the content loads perfectly, just the jquery fails

 

any help would be greatly appreciated

John

[haku]

You should use the jquery ajax functions to load your content. They all allow for a callback that is called upon completion of the ajax. You can pass your slideshow loading function into this, and it will be called automatically when the ajax is complete.