jsPlumb trigger an event when a connection is made and rename connection (con_)

Question

Using jsPlumb, I want to make an alert pop up when a connection is made - that is when a user clicks and drags from one .task div to another (making a jsPlumb connection).

http://jsfiddle.net/uQdfq/
( drag from task1 to task3 )

What is the best approach for this if I declare the .task div a source/target when it is defined?

addTask($('#project1'), 'task' + 1);

Function itself:

// Adds a task div to the specific project
function addTask(parentId, id) {
  var newState = $('<div>').attr('id', id).addClass('task')

  // A title for the task
  var title = $('<div>').addClass('title').text(id);
  newState.append(title);

  $(parentId).append(newState);

  // Makes the task div a possible target (i.e. connection can be dragged to)
  jsPlumb.makeTarget(newState, {
    anchor: 'Continuous'
  });

  // Makes the task div a possible source (i.e. connection can be dragged from)
  jsPlumb.makeSource(newState, {
    anchor: 'Continuous'
  });
}

As a bigger picture I'm trying to find a way to name the connection.id my own way (using GUIDs). That is, I want to name the connections something like con_1238519b-3e11-4788-9ac4-fe5f244fbb55

With jsPlumb all connections jsPlumb.getConnections() have the naming convention of con_40, con_12, ..., con_105

Answer 1

Documentation - http://jsplumbtoolkit.com/doc/events.html

There is an event fired, when a connection is created. The event name is connection

jsPlumb.bind('connection',function(info,ev){
    var con=info.connection;   //this is the new connection
});

I don't suggest renaming is a good option. If you require, you can assign/attach parameters to a connection as explained here.

con.setParameter('name','value'); 
con.setParameters({name:'value',name2:'value2'});

APIDocs - http://jsplumbtoolkit.com/apidocs/classes/Connection.html