PrimeFaces diagram events

diagram.xhtml

<p:diagram id="diagram" value="#{mainBean.diagramModel}" style="height:400px" styleClass="ui-widget-content" widgetVar="diagramWV" />

<p:growl widgetVar="growlWV" />

<script>
	//<![CDATA[
	$(document).ready(function () {
		setTimeout(function () {
			for (var key in PF('diagramWV').canvas.getAllConnections()) {

				if (PF('diagramWV').canvas.getAllConnections().hasOwnProperty(key)) {

					//Elemenets Events
					$(PF('diagramWV').canvas.getAllConnections()[key].source).off('click').on('click', function () {
						PF('growlWV').renderMessage({"summary": "Element Clicked with ID",
							"detail": $(this).attr('id'),
							"severity": "info"});
					});

					$(PF('diagramWV').canvas.getAllConnections()[key].target).off('click').on('click', function () {
						PF('growlWV').renderMessage({"summary": "Element Clicked with ID",
							"detail": $(this).attr('id'),
							"severity": "info"});
					});

					//Connection Event
					PF('diagramWV').canvas.getAllConnections()[key].bind("click", function (conn) {
						PF('growlWV').renderMessage({"summary": "Connection Clicked",
							"detail": "Source: " + conn.sourceId + " \n  Target:  " + conn.targetId,
							"severity": "info"});
					});
				}
			}
		}, 500);
	});
	//]]>
</script>