Question

Alright I’ve been trying to learn Dojo here today and I just can’t seem to figure out why I can’t fade in my elements. What I’m doing here is loading a set of images from a json object and putting them in the DOM. I then want to fade them in one at a time using an array and the shift method. This is a working plugin I wrote in jQuery and am using as a crash course for Dojo. The wierd thing is that I can’t get the fade animation to work at all, even if I strip away the array and just try to target a single DOM element, but if I paste in one of the examples from here directly into my webpage, that works.

Here’s the code:

define([
    "dojo/query", "dojo/dom-class", "dojo/domReady!", "dojo/request", "dojo/json", "dojo/_base/fx", "dojo/on", "dojo/dom-attr", "dojo/dom-style"
],      
    function(query, domClass, dom, request, fx, on, domAttr){

        var images = new Array(); //The array object created from the XML file
        var cur_first = 0; //Current first image, used as a counter to determine which images should be shown
        var running = true; //Flag to prevent multiple firings or next/prev
        var display_num = 4; //Num of images displayed at a time

        request.get('../../javascript/json/rotator_images.js',{handleAs:'json'}).then(
                function(response){
                    for(i=0; i < response.images.image.length; i++){
                        var src = response.images.image[i].src;
                        var title = response.images.image[i].title;
                        var desc = response.images.image[i].desc;
                        var thumb = response.images.image[i].thumb;
                        images[i]={src: src, title: title, desc: desc, thumb: thumb};
                    }
                    load_images();
                }
            );

        function load_images(){
            for(i=0; i < images.length; i++){
                if(i >= cur_first && i < cur_first+display_num){
                    dojo.create("div", {
                        innerHTML:"<a class='fancybox' rel='group' href='"+images[i].src+"'><img src='"+images[i].thumb+"' /></a>",
                        className:"r_image",
                        style:{opacity:'0'},
                        id:"r_image_"+(i+1)
                    },dojo.byId("images_wrap"));
                }
            }
            display_images();
        }

        function remainder(){
            //Find the remaining images left at the end inside our display_num control so we can determine when to start back at 0 or jump to the end
            var flr = Math.floor(images.length / display_num)
            return images.length - (flr*display_num);
        }       

        query("#arrow_r").on("click", function(){
            if(running == false){
                running = true;
                if(cur_first < images.length - remainder()){
                    cur_first = cur_first+display_num;
                }else{
                    cur_first = 0;
                }
                hide_images();
            }
        })

        query("#arrow_l").on("click", function(){
            if(running == false){
                running = true;
                if(cur_first > 1){
                    cur_first = cur_first-display_num
                    hide_images();
                }else{
                    cur_first = images.length - remainder();
                    hide_images();
                }
            }
        })


        function display_images(){
            var images_arr = [];
            dojo.query(".r_image").forEach(function(node) {
                images_arr.push(node);
            });
            function fadeThemIn(images_arr) {
                if (images_arr.length > 0) {
                    var currentImg = images_arr.shift();
                    var fadeArgs = {
                        node: currentImg,
                        duration: 200,
                    };
                    fx.fadeIn(fadeArgs).play();
                }else{
                    running = false;
                }
            }
            fadeThemIn(images_arr)
        }

    }
);

Sorry about just dumping the entire code into here but I figure it has to be something with Dojo’s AMD amd how the modules are being loaded (which I find a headache at this point).

Answer 1

Your AMD dependency injections are going to cause your fx call to fail.

You’re asking for:

"dojo/query", "dojo/dom-class", "dojo/domReady!", "dojo/request", "dojo/json", "dojo/_base/fx", "dojo/on", "dojo/dom-attr", "dojo/dom-style"

but mapping them to:

query, domClass, dom, request, fx, on, domAttr

That is, your query variable will get the dojo/query module, domClass will get given dojo/dom-class, dom will get given dojo/domReady!, request will get dojo/request and your fx variable will be given the dojo/json module, so fx.fadeIn won’t work.

You need to make sure that the modules you’re asking for, and the variables you’re getting them in as, match up, one by one. You can ask for more modules than you want to map to variables, but any such modules (dojo/domReady! is a good example) need to go at the end.

So, a good header for you might be:

define([
    // Modules I actually want, and have variables for:
    "dojo/query", "dojo/dom-class", "dojo/request", "dojo/json", "dojo/_base/fx", "dojo/on", "dojo/dom-attr", "dojo/dom-style",

    // Modules I want to be loaded, but don't have variables for:
    "dojo/domReady!"],      
    function(query, domClass, request, JSON, fx, on, domAttr, domStyle) {

I don’t know whether that’ll be sufficient to get your sample working completely, but matching up the modules is definitely your immediate problem.