Can anyone explain this line of javascript?

Question

I'm using the DynaTree JavaScript tree and have been modifying it. Specifically I am trying to add multiple context menus dependent on the type of node.

Basically my idea was to have the context menu fire an ajax request to my MVC (2) controller, and it would pass this information as JSON, where it would be used to create a class that can be accessed in c#.

Ive got this working ok, after going through about 500 posts here! Now I need to modify the JS again in order to select an appropriate context menu dependant on type.

My list looks like

<div id="tree">
    <ul>

      <li id="'ID':1,'TYPE':1" title="Look: a tool tip!">item1 with key and tooltip</li>
      <li id="'ID':2,'TYPE':2" class="activate">item2: activated on init</li>
      <li id="'ID':3,'TYPE':3" class="folder">Folder with some children
        <ul>
          <li id="'ID':4,'TYPE':1">Sub-item 3.1</li>
          <li id="'ID':5,'TYPE':1">Sub-item 3.2</li>
        </ul>
      </li>
      <li id="'ID':6,'TYPE':1" class="expanded">Document with some children (expanded on init)
        <ul>
          <li id="'ID':7,'TYPE':1'">Sub-item 4.1</li>
          <li id="'ID':8,'TYPE':1'">Sub-item 4.2</li>
        </ul>
        </li>
      <li id="'ID':9,'TYPE':1" class="lazy folder">Lazy folder</li>
    </ul>
  </div>

And i return the ID and use jQuery.parseJSON to send to MVC.

The JS I dont understand is here:

function bindContextMenu(span) {
    // Add context menu to this node:
    debugger;

    $(span).contextMenu({ menu: "myMenu1" }, function (action, el, pos) {
      var node = $.ui.dynatree.getNode(el).toString();
      node = node.replace(/'/g, '\"');
      node = jQuery.parseJSON('{' + node + '}');

      $.ajax({
        type: "POST",
        url: "/TreeView/Click/",
        data: { ID: node.ID, TYPE: node.TYPE },
        error: function (request) { $("#message").html("error"); },
        success: function (result) { $("#message").html("Success - " + result); }
      })
    });
  };

this line - $(span).contextMenu({ menu: "myMenu1" }, function (action, el, pos) {

Seems to both set the contextmenu and also fires when a context menu is clicked. I'd be happy if someone could just provide some keywords for Google as i dont have a clue.

Thanks in advance

An aside: I'm not 100% clear on what you're intending to do here, but it seems like you're saying that every time the user clicks one of these tree items, you're going to do an AJAX call to get the context menu for the item? Unless you have a real need to have the context menu different for every single item, I'd embed the code for the context menu in the page and show it with some glue javascript; otherwise the user is going to be stuck waiting for your server every time they try to perform an ordinary UI action - opening a context menu; not to mention the load on your server. — Brenton Fletcher, Nov 28 '12 at 14:50
Hi bloopletech, sorry I wasn't clear. The context menus are held in three lists hard coded in the html. The ajax part would do database type things behind the scenes associated with the context - IE a delete context click would go and delete something. — DavidB, Nov 28 '12 at 15:01
But basically my question is: $(span).contextMenu({ menu: "myMenu1" }, function (action, el, pos) { The keyword function appears without giving a function name. To my limited knowledge this isn't possible, what is this and what do i Google for? — DavidB, Nov 28 '12 at 15:11
Oh, that's an `anonymous function`; you're declaring the function and then passing the function as a parameter of the contextMenu function. — Brenton Fletcher, Nov 28 '12 at 15:12

Jamiec · Accepted Answer · 2012-11-28T14:51:12.693

3

.contextMenu looks like a plugin, however without knowing exactly which plugin it is it is hard to give a definitive answer. However it looks like initialising that plugin takes 2 arguments:

The object containing any setup parameters - this is pretty standard for a plugin
The function which gets called when the menu is activated (possibly).

edited Nov 28 '12 at 14:51

answered Nov 28 '12 at 14:45

Jamiec

133,658
13
134
193

Thank you Jamie, I got so wrapped up in dyna tree I forgot it uses another plugin. Ill take a look at that now. Out of interest someone has said this may be a javascript closure, is this worth a google or is it the wrong direction. – DavidB Nov 28 '12 at 15:02
@DavidBattersby This isnt a closure, but you might want to google that phase anyway as its a useful bit of knowledge ;) – Jamiec Nov 28 '12 at 15:11
1

What you're looking at (a function without a name) is an `anonymous function`. Here's a good detailed answer on javascript function s(and closures): http://stackoverflow.com/questions/1140089/how-does-an-anonymous-function-in-javascript-work – Jamiec Nov 28 '12 at 15:11
Thank you very much - I was actually just reading that link when i checked back here. – DavidB Nov 28 '12 at 15:19

Can anyone explain this line of javascript?

1 Answers1