Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions

How to access DataObjects from jQuery?


Reply

3 Posts   926 Views

Avatar
sonet

21 October 2011 at 11:58am Community Member, 33 Posts

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...

Avatar
Sticks

21 October 2011 at 3:30pm Community Member, 29 Posts

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.

Avatar
nzblue_fish

21 October 2011 at 6:07pm Community Member, 13 Posts

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)