What is the best way to manipulate dynamically generated divs with jsPlumb?

51 views
Skip to first unread message

blat...@gmail.com

unread,
Jul 24, 2018, 4:24:28 PM7/24/18
to jsPlumb
I am attempting to use jsPlumb to develop an Entity-Relationship Diagram between several tables that are dynamically rendered with a source JSON file. I have the tables rendered, but now I'm trying to get jsPlumb to talk to them. When I dynamically rendered my tables, I gave them all a class of .attTable. Below is my code to just get the tables to have some endpoints and be resizable. I have read that the enclosing divs must be position absolute, but when I do that, the tables all land on top of one another and I cant seem to interact with them anyways. Does anyone have some pointers for how to start out using jsPlumb, especially when working with dynamically generated content? Thanks.

$(".attTable").resizable({
resize : function(event, ui) {
jsPlumb.repaint(ui.helper);
}
});

jsPlumb.ready(function() {
jsPlumb.connect({
source:"airport_dim-table",
target:"carrier_dim-table",
endpoint:"Rectangle"
});
jsPlumb.draggable($(".attTable"));
});

Simon Porritt

unread,
Jul 24, 2018, 5:00:56 PM7/24/18
to jsPlumb
You should probably get an instance of jsPumb and set its container - https://jsplumbtoolkit.com/community/doc/home.html#container.  That's the fundamental thing you need to setup correctly.

blat...@gmail.com

unread,
Jul 25, 2018, 1:58:38 PM7/25/18
to jsPlumb
Thanks, I got my elements to move around the page. I believe my underlying issue was calling the jsPlumb logic before the tables were dynamically rendered. I am still not sure how I am going to be able to get these tables to render anywhere but on top of one another. Any suggestions?


Simon Porritt

unread,
Jul 25, 2018, 7:57:43 PM7/25/18
to jsPlumb
you have to make sure you've got `position:absolute` set on them.
Reply all
Reply to author
Forward
0 new messages