Tried to hide a dynamically generated DIV with id lineID that's called from aspx backend but it's not working. The function is called but the line in function 6 is not hidden when function 7 is called.
lineArea is basically the HTML body where the lines are drawn.
Code that draws the line
//show line connecting 2 nodes
function displayInst6Line() {
var calcNode = new calculateLine();
$('.lineArea').line(calcNode.displayInst6LineX, calcNode.displayInst6LineY, calcNode.displayInst6LineX2, calcNode.displayInst6LineY, { color: line_colour, stroke: 5, zindex: line_zindex });
$('#lineID').show();
}
//hide line
function displayInst7Line() {
var calcNode = new calculateLine();
$('.lineArea').line(calcNode.displayInst6LineX, calcNode.displayInst6LineY, calcNode.displayInst6LineX2, calcNode.displayInst6LineY, { color: '#868e96', stroke: 5, zindex: line_zindex });
$('#lineID').hide();
}
Backend code that does calculations for line
//math function to draw lines
(function ($) {
var helpers = {
createLine: function (x1, y1, x2, y2, options) {
// Check if browser is Internet Exploder ;)
var isIE = navigator.userAgent.indexOf("MSIE") > -1;
if (x2 < x1) {
var temp = x1;
x1 = x2;
x2 = temp;
temp = y1;
y1 = y2;
y2 = temp;
}
var line = document.createElement("div");
line.id = "lineID";
line.className = options.class;
// Formula for the distance between two points
// http://www.mathopenref.com/coorddist.html
var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
line.style.width = length + "px";
line.style.borderBottom = options.stroke + "px " + options.style;
line.style.borderColor = options.color;
line.style.position = "absolute";
line.style.zIndex = options.zindex;
if (isIE) {
line.style.top = (y2 > y1) ? y1 + "px" : y2 + "px";
line.style.left = x1 + "px";
var nCos = (x2 - x1) / length;
var nSin = (y2 - y1) / length;
line.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + nCos + ", M12=" + -1 * nSin + ", M21=" + nSin + ", M22=" + nCos + ")";
} else {
var angle = Math.atan((y2 - y1) / (x2 - x1));
line.style.top = y1 + 0.5 * length * Math.sin(angle) + "px";
line.style.left = x1 - 0.5 * length * (1 - Math.cos(angle)) + "px";
line.style.transform = line.style.MozTransform = line.style.WebkitTransform = line.style.msTransform = line.style.OTransform = "rotate(" + angle + "rad)";
}
return line;
}
}
$.fn.line = function (x1, y1, x2, y2, options, callbacks) {
return $(this).each(function () {
if ($.isFunction(options)) {
callback = options;
options = null;
} else {
callback = callbacks;
}
options = $.extend({}, $.fn.line.defaults, options);
$(this).append(helpers.createLine(x1, y1, x2, y2, options)).promise().done(function () {
if ($.isFunction(callback)) {
callback.call();
}
});
});
};
$.fn.line.defaults = {
zindex: 10000,
color: '#000000',
stroke: "1",
style: "solid",
class: "line",
};
})(jQuery);
This tells us you're duplicating IDs by calling helpers.createLine more than once. You can't have more than one element with the same ID. The whole purpose of IDs is to be unique identifiers.
jQuery optimizes $("#lineID") into (effectively) $(document.getElementById("lineID")) and getElementById can only return one element. Typically that's the first one with the ID when you break the "you can't have more than one element with the same ID" rule. So $("#lineID").hide(); will hide the first element with that ID (even if it's already hidden).
You'll need to either give the elements distinct IDs, or identify them in another way. Or, if there's only meant to be a single one of these, use remove rather than hide to actually remove the element.