Tara Wilfred Tara Wilfred - 1 year ago 113
jQuery Question

Error in getting the 'top' position property of dropped Elements

I'm working with a project where I have to drag and drop elements and perform some further actions on these elements. Currently I'm trying to get the position of the elements dropped on the container but am getting the following error in the debugger.


trail.js:262 Uncaught TypeError: Cannot read property 'top' of undefined

Method in Context

function saveFlowchart(){
var nodes = [];

//Code in Context to the question//

var matches = [];
var searchEles = document.getElementById("container").children;
for(var i = 0; i < searchEles.length; i++)
alert("elements: "+ searchEles[i].id);
var idOfEl = searchEles[i].id;

var $element = $(idOfEl);
var position = $element.position();
position.bottom = position.top + $element.height();
position.right = position.left + $element.width();
alert("Top position: " + position.top + "\nLeft position: " + position.left + "\nBottom position: " + position.bottom + "\nRight position: " + position.right);

$(".node").each(function (idx, elem) {
var $elem = $(elem);
var endpoints = jsPlumb.getEndpoints($elem.attr('id'));
console.log('endpoints of '+$elem.attr('id'));
blockId: $elem.attr('id'),
nodetype: $elem.attr('data-nodetype'),
positionX: parseInt($elem.css("left"), 10),
positionY: parseInt($elem.css("top"), 10)
var connections = [];
$.each(jsPlumb.getConnections(), function (idx, connection) {
connectionId: connection.id,
pageSourceId: connection.sourceId,
pageTargetId: connection.targetId

var flowChart = {};
flowChart.nodes = nodes;
flowChart.connections = connections;
flowChart.numberOfElements = numberOfElements;

var flowChartJson = JSON.stringify(flowChart);


This method saves the connections and outputs it in a json format. But I need the custom made elements to be regenerated as well. That is why I'm trying to get there positions and regenerate them so that I can recreate the flowchart created.


Any help in this regard will be appreciated.

Answer Source

The following might help

Previous line of Code

var $element = $(idOfEl);

Changed as

 var $element = $("#" + searchEles[i].id);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download