jquery - how to refer to a fancytree variable from another function in javascript -

jquery - how to refer to a fancytree variable from another function in javascript -

i'm trying modularise javascript. i'm not new js, knowledge not advanced some. easy question who's @ js.

in code below - how can handle fancytree that's created in 'handletreebrowser' function, need reference in success function of 'newtopcategoryform'? there improve alternative creating variable in higher scope?

i tried searching element via jquery thinking embelished fancytree properties & methods etc...but reload function undefined.

/** edit related products page controls **/ var managecategories = function () { var handleformbuttons = function () { console.debug('initialising buttons...'); $(document).on('click','.new-topcategory-button', function(event) { event.preventdefault ? event.preventdefault() : event.returnvalue = false; console.debug('clicked...'); console.debug($(this).attr('href')); var refreshuri = $(this).attr('href'); $.get(refreshuri) .success(function(data,status,xhr){ // need info here. $('#categoryformcontainer').html(data); richtext.init(); }); }) }; var handlenewtopcategoryform = function () { console.debug('initialising top category form'); $(document).on('submit', '#topcategoryform', function(event) { console.debug("submitting new top category form"); var form = $(this); var token = $("meta[name='_csrf']").attr("content"); var header = $("meta[name='_csrf_header']").attr("content"); var formdata = form.serializearray(); $(this).find('button').attr('disabled'); event.preventdefault ? event.preventdefault() : event.returnvalue = false; var jqxhr = $.ajax( { url: form.attr('action'), type: 'post', data: formdata, headers: {'x-csrf-token': token} } ) .success(function (data, status, xhr) { var messagecontainer = $('#messagecontainer'); var source = $('#ui_message_template').html(); var template = handlebars.compile(source); var html = template(data); messagecontainer.html(html); data.form = form; // reload tree previous `source` alternative $('#tree').reload().done(function(){ alert("reloaded"); }); // trigger publish method browser can update $.topic( 'topcategoryadded' ).publish( info ); }) .fail(function (data, status, xhr) { var messagecontainer = $('#messagecontainer'); var source = $('#ui_message_template').html(); var template = handlebars.compile(source); var html = template(data); messagecontainer.html(html); // have process form validation failures here. }); } ); } var handletreebrowser = function () { console.debug('initialising trees.'); $('#tree').fancytree({ source: { url: '/admin/categories/json/full_category_tree', cache: false }, extensions: ["dnd"], checkbox: false, selectmode: 2, activate: function(event, data) { console.debug(event); console.debug(data); console.debug(data.node.key()) }, dnd: { autoexpandms: 400, focusonclick: true, preventvoidmoves: true, // prevent dropping nodes 'before self', etc. preventrecursivemoves: true, // prevent dropping nodes on own descendants dragstart: function(node, data) { /** function must defined enable dragging tree. * homecoming false cancel dragging of node. */ homecoming true; }, dragenter: function(node, data) { /** data.othernode may null non-fancytree droppables. * homecoming false disallow dropping on node. in case * dragover , dragleave not called. * homecoming 'over', 'before, or 'after' forcefulness hitmode. * homecoming ['before', 'after'] restrict available hitmodes. * other homecoming value calc hitmode cursor position. */ // prevent dropping parent below parent (only sort // nodes under same parent) /* if(node.parent !== data.othernode.parent){ homecoming false; } // don't allow dropping *over* node (would create child) homecoming ["before", "after"]; */ homecoming true; }, dragdrop: function(node, data) { /** function must defined enable dropping of items on * tree. */ data.othernode.moveto(node, data.hitmode); } } }); } homecoming { //main function initiate module init: function () { handletreebrowser(); handleformbuttons(); handlenewtopcategoryform(); } }; }();

you can declare fancytree variable in function , js closure allow access other functions:

var managecategories = function () { var fancytree = null; // in handleform.success: if (fancytree !== null) fancytree.... // in handletreebrowser: fancytree = $("#tree').fancytree(....

this fancytree accessible 2 functions.

javascript jquery