title: How to get connection data in jsPlumb
body: <p>I've made a small table of nodes that I can drag and drop connections from and create connections by entering the ids of the different nodes.</p>
  
  <p>I can't figure out from <a href="http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-16-all-js.html#getConnections" rel="nofollow">the docs</a> or find any examples online of how to get the data regarding what's connected to what, and the examples I've found using <code>jsPlumb.getConnections()</code> or <code>jsPlumb.isSource</code> or <code>isTarget</code> or anything else.</p>
  
  <p>Does anyone know how I would implement some sort of function that would tell me what ids are connected to what?</p>
  
  <p><a href="http://jsfiddle.net/Y2w3G/" rel="nofollow">jsFiddle</a></p>
  
  <p>JavaScript:</p>
  
  <pre><code>var wire_style;
  var line_width = 8;
  
  window.onload = function get_styles(){
      wire_style = { 
          isSource:true,
          isTarget:true,
          connector : [ "Straight" ],
          connectorStyle:{ 
              strokeStyle:$('#colour_menu').val(),
              lineWidth:line_width, 
          },
          endpoint: ["Rectangle", {
              radius: 4,
          }],
          //endpointStyle:{ },
          container:$('#breadboard'), 
      };
      var startpoint = jsPlumb.addEndpoint($('.hole'), wire_style);
  }
  
  // delete connection when clicked
   jsPlumb.bind('click', function (connection, e) {
       jsPlumb.detach(connection);
   });
  
  // change colour when option selected
  $(window).load(function(){
      $('#colour_menu').on('change', function () {
          wire_style.connectorStyle.strokeStyle = $('#colour_menu').val();
      });
  });
  
  // connect id one and id two on button click
  $(window).load(function(){
      $('#connect_button').on('click', function () {
          var x = $('#x').val();
          var y = $('#y').val();
          connect(x ,y);
      });
  });
  
  // connect holes function
  function connect(to,from){
      jsPlumb.connect({
          source:from, 
          target:to,
                  paintStyle:{ 
              strokeStyle:$('#colour_menu').val(), 
              lineWidth:line_width 
          },
      }, wire_style); // including wire styles
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script type='text/javascript' src="https://jsplumb.googlecode.com/files/jquery.jsPlumb-1.4.1-all-min.js"&gt;&lt;/script&gt;
  
  &lt;input type="text" id="x"/&gt;
  &lt;input type="text" id="y"/&gt;
  &lt;button id="connect_button"&gt;Connect&lt;/button&gt;
  
  
  &lt;select id="colour_menu"&gt;
  &lt;option selected="selected" value="limegreen"&gt;  Wire colour&lt;/option&gt;
  &lt;option class="black"       value="black"&gt;      Black   &lt;/option&gt;
  &lt;option class="red"         value="red"&gt;        Red     &lt;/option&gt;
  &lt;option class="Orange"      value="Orange"&gt;     Orange  &lt;/option&gt;
  &lt;option class="yellow"      value="yellow"&gt;     Yellow  &lt;/option&gt;
  &lt;option class="limegreen"   value="limegreen"&gt;  Green   &lt;/option&gt;
  &lt;option class="DodgerBlue"  value="DodgerBlue"&gt; Blue    &lt;/option&gt;
  &lt;option class="DarkOrchid"  value="DarkOrchid"&gt; Violet  &lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="breadboard"&gt;
      &lt;table&gt;
          &lt;tr id="node1" class="node"&gt;
              &lt;td&gt;&lt;div id="1" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="2" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="3" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="4" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="5" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="6" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="7" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="8" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="9" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="10" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr id="node2" class="node"&gt;
              &lt;td&gt;&lt;div id="11" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="12" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="13" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="14" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="15" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="16" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="17" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="18" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="19" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div id="20" class='hole'&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>