Question

I’ve been trying haplessly for hours so I thought I should ask (after scouring stackoverflow :S)

How do I access an object created in an ajax response:

    $.ajax({
          type: "GET",
          url: "slideshow.xml", //xml file 
      dataType: "xml",
          success: function(xml) {
            var count = 0; //counter
              $(xml).find('site').each(function() {
                var url = $(this).find('url').text(); //url 
                var imageURL = $(this).find('imageURL').text(); 
                myArray[parseInt(count)] = new Array(imageURL, url);
                count++;
            });

            var slideshow = new simpleGallery({
                wrapperid: "topbar_scroller_inside",
                dimensions: [815, 264],
                imagearray: myArray,
        autoplay: [false, 30000, 99],
                persist: true,
                fadeduration: 1000
            }); 
    }});

The question is how do I access the ‘slideshow’ object created in the ajax success response?

I have tried accessing it for instance:

 <a id="prev" href="javascript:slideshow.navigate('prev')"></a>

however that failed.

I also tried it with:

  <a id="next" href="javascript:jQuery.proxy('slideshow', navigate('next'))"></a>

still failed, and not quite sure if $.proxy is the relevant function here.

Please, I could use your help.

Answer 1

Simple. Declare the variable above the ajax call.

var slideshow;

Then change the success function to use slideshow = ....

Also, you should probably change the href of both of your a elements to be # and use jQuery bindings for the click functionality:

$('a#prev').click(function() {
    slideshow.navigate('prev');
    return false;
});
$('a#next').click(function() {
    slideshow.navigate('next');
    return false;
});