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

[blat...@gmail.com]

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]

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]

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]

you have to make sure you've got `position:absolute` set on them.