Question

I have this script working with jquery and uploadify

      $('#uploader').uploadify({
    'uploader'  : '/admin/includes/uploadify/uploadify.swf',
    'script'    : '/admin/includes/uploadify/uploadify_storage.php',
     'scriptData': {'sessionId': sessionId},
    'cancelImg' : '/admin/includes/uploadify/cancel.png',
     'buttonImg'   : '/site_images/add_files.png',
    'folder'    :  storage,
    'auto'      : false,
    'multi'     : true,
    'fileExt'     : '*.jpg',
    'simUploadLimit' : 2,
    'wmode': 'transparent',
    'width': '150',
    'height': '20',
    'removeCompleted': false,
    'queueID'        : 'upload_queue',
    'onComplete'  : function(event, ID, fileObj, name,response, data) {

                             console.log(path);
             console.log(sub_ul);       
        }
  });

//code//


    $("li.dir > span.name").live('click', function(){
         $("span").removeClass("selected");
        var li = $(this).parent();
        var root  = $(li).attr("title");
        var folder  = $(li).find("span.name").html();
        var path = root+"/"+folder;
        path = path.replace('//', '/');
        var sub_ul = $(li).find("> ul.sub_folder");
                    set_path(sub_ul);
        $(this).addClass("selected");
    });

basically when I you click a span with .name it runs the code getting var sub_ul = $(li).find("> ul.sub_folder"); which works (its sent to set_path() ) . In a second time when I launch uploadify at the end on OnComplete the console.log(path); shows the correct value but console.log(sub_ul); returns nothing (an alert too) like the object is not specified. I can’t use objects after the JS has run? Don’t they stay saved in the DOM like path does?

Answer 1

1. In the onComplete function that you’ve posted, you’re logging ul_sub and not sub_ul as you seem to want to.

2. Unless in set_path() you set the value for a global variable named path, I don’t see how you would get the same value in those two different functions – the variable path within the click handler is scoped to that function and will not be accessible elsewhere. The same goes for sub_ul.

3. I can’t use objects after the JS has run? Don’t they stay saved in the DOM like path does?

   I’m not quite sure what to make of this, JavaScript objects are not ‘saved in the DOM’. If you’re unable to access an object you’ve created, then the context must be different from the one the object was created in – it must now be out of scope and thus inaccessible. Using closure is one way to keep functions and variables accessible. Using global vars is another way to do it but is not recommended and should be avoided unless absolutely necessary.

---

You might want to read these articles about scope in JavaScript to get a better idea of how things work:

• http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/
• http://www.mredkj.com/tutorials/reference_js_intro_ex.html
• http://www.digital-web.com/articles/scope_in_javascript/

---

You’ve mentioned in the comments that you’ve made a global path variable but not a sub_ul. One simple way to ‘fix’ your code is to use global variables. But again, use of global variables is generally discouraged since you could end up polluting the global namespace.

And without seeing more of your code, it’s hard to say if this will always work correctly – for instance, your uploadify script might be triggered by events that do not cause the values of path and sub_ul to be set, which would mean that when the onComplete function runs, it’ll get the wrong values for both.

//global vars
var path;
var sub_ul;

$('#uploader').uploadify({
    'uploader'  : '/admin/includes/uploadify/uploadify.swf',
    'script'    : '/admin/includes/uploadify/uploadify_storage.php',
     'scriptData': {'sessionId': sessionId},
    'cancelImg' : '/admin/includes/uploadify/cancel.png',
     'buttonImg'   : '/site_images/add_files.png',
    'folder'    :  storage,
    'auto'      : false,
    'multi'     : true,
    'fileExt'     : '*.jpg',
    'simUploadLimit' : 2,
    'wmode': 'transparent',
    'width': '150',
    'height': '20',
    'removeCompleted': false,
    'queueID'        : 'upload_queue',
    'onComplete'  : function(event, ID, fileObj, name,response, data) {
                        //these will now log the values of the global vars
                        console.log(path);
                        console.log(sub_ul);       
                    }
});

//code//


$("li.dir > span.name").live('click', function(){
    $("span").removeClass("selected");
    var li = $(this).parent();
    var root  = li.attr("title");
    var folder  = li.find("span.name").html();
    //don't redeclare path - that would shadow the global variable
    //use the global variable instead
    path = root+"/"+folder;
    path = path.replace('//', '/');
    //don't redeclare sub_ul
    sub_ul = $(li).find("> ul.sub_folder");
    set_path(sub_ul);
    $(this).addClass("selected");
});