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   950 Views

Avatar
sonet

Community Member, 33 Posts

21 October 2011 at 11:58am

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

Community Member, 31 Posts

21 October 2011 at 3:30pm

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

Community Member, 13 Posts

21 October 2011 at 6:07pm

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)