title: jsTree create folder - folder created before name is entered by user
body: <p>I have a tree.</p>
  
  <p>I can create a folder.</p>
  
  <p>However, there is a problem in doing so.  This problem also exists in the filebrowser demo included in the jsTree download.</p>
  
  <p>This is a user experience problem so I hope I can describe it well enough.</p>
  
  <blockquote>
    <p>1) the user clicks on the node/folder where they want the new folder
    to be created.</p>
    
    <p>2) they select "New->Folder" from the context menu.</p>
    
    <p>3) at this time, in the background, jsTree triggers the
    "create_node.jstree" event with the default name "New node". 
    create_node.jstree event does an ajax get back to the web api and a
    folder is created on the file system.</p>
    
    <p>4) HOWEVER, on the page the user is looking at a field that is
    prompting the user to enter the custom name of the node/folder.</p>
    
    <p>5) once the user enters a name the node on the page is updated but
    jsTree doesn't call the back end again to rename the folder.</p>
  </blockquote>
  
  <p>The result is a node named " and a folder on  the file system called "new node".</p>
  
  <p>What would be more appropriate:</p>
  
  <blockquote>
    <p>Only after the user enters the customer node/folder name does jsTree
    call for the create_node.jstree event.</p>
  </blockquote>
  
  <p>This would allow my backend code to execute, troubleshoot, and report success/failure of a folder named as required by the user.</p>
  
  <p>code snips
  the create_node event</p>
  
  <pre><code>$('#mytree').on('create_node.jstree', function (e, dta) {
          $.get('/&lt;whatever&gt;/FolderBrowser?operation=create_node', { 'type': dta.node.type, 'id': dta.node.parent, 'text': dta.node.text })
              .done(function (d) {
                  dta.instance.set_id(dta.node, d.id);
              })
              .fail(function () {
                  dta.instance.refresh();
              });
      });
  </code></pre>
  
  <p>and the tree itself</p>
  
  <pre><code>$('#mytree').jstree(....
  , 'contextmenu': {
      'items': function (node) {
          var tmp = $.jstree.defaults.contextmenu.items();
          delete tmp.rename;
          delete tmp.remove;
          delete tmp.ccp;
          tmp.create.label = "New Folder";
          tmp.create.action = function (dta) {
              // I have $10 for you if you can comprehensively explane everything going on in the following.
              var inst = $.jstree.reference(dta.reference)
              var obj = inst.get_node(dta.reference);
              inst.create_node(obj, { type: "default" }, "last", function (new_node) {
                  setTimeout(function () { inst.edit(new_node); }, 0);
              });
          }
          return tmp;
      }
  
      , 'check_callback': function (o, n, p, i, m) {
          if (m &amp;&amp; m.dnd &amp;&amp; (m.pos !== 'i'))
              return false;
          /* not allowed options for this application
          if(o === "move_node" || o === "copy_node") {
              if(this.get_node(n).parent === this.get_node(p).id) { return false; }
          }
          */
          return true;
      }
  </code></pre>