Hi, I'm trying to preload and animate images after a click on a button via AJAX w/ jQuery. The images are data objects associated with my page.

My Controller:

	function getImages () {
		if($this->isAjax) {
			return $this->renderWith("AjaxImages");
		}
		else {
			return Array();
		}
	}

My AjaxImages.ss view requests images via a regular <% control AjaxImages %> structure (which calls a controller method that is querying the image data from the DB).

The AJAX works fine… but I would like to preloaded the images first before showing them to the user. This is my code that handles the AJAX request:

		$("#ajaxImages").click(function(e) {
			e.preventDefault();
			$("#ajaxContent").fadeOut(1500, function() {
				$('#ajaxContent').load('/team/getImages', function() {


					// how to get new dataobject values (image file names) in here??

				});
			});
			$("#ajaxContent").delay(500).fadeIn(1500);
			return false;
	    });

How can I access the dataobjects (requested from the view, retrieved by the controller) in the JS above?

Any help greatly appreciated...

A javascript template requirement in your page controller might work. The code below is from the docs http://doc.silverstripe.org/sapphire/en/reference/requirements

$vars = array(
    "EditorCSS" => "mot/css/editor.css",
)
Requirements::javascriptTemplate("cms/javascript/editor.template.js", $vars);

Passing your image name or whichever you like via the array should make it usable in the js.

Hi,

instead of doing an AJAX call via the jQuery $(selector).load() method could you use a $.get() call instead. That will give you access to the returned data directly so you can manipulate it before you rendered anything in the DOM.

Just a thought ...

Cheers, Innes (NZ)