PDA

View Full Version : How to use "this" and add element dynamic



hacking_mike
Oct 14th, 2009, 06:45 AM
I have this code in a .js file:

<code>
function addElement() {
addbranch();
}


function IfElseActivity(element) {
this.element = element
var innerBar=document.createElement("DIV")
innerBar.className="bar"
innerBar.style["width"]=100+"%"
innerBar.style["heigth"]=28+"px"
//innerBar.innerHTML = "<p>"+item.id+"</p>"
innerBar.innerHTML = "<DIV id='"+element.id+"_id' class='idlabel'>"+element.id+"</DIV>"
element.appendChild(innerBar)
this.group = Quanticks.drag().createSimpleActivity(element, innerBar)
this.Branches = new Array()
this.Properties = new Array()
this.ActWidth = 360
this.BlockWidth = 160
this.noResizeFlag = false
this.noBranchResizeFlag = false
}

IfElseActivity.GetToolboxIcon = function()
{
return "/images/ifelse.GIF";
}

IfElseActivity.prototype = {
Initialize : function()
{
this.header = document.createElement("img")
this.header.src = "images/ifelsehead.GIF"
this.header.setAttribute("width", "268");
this.header.setAttribute("height", "49");
this.header.onclick = function() {addElement();};
this.element.appendChild(this.header)
this.table = document.createElement("table")
this.tablebody = document.createElement("tbody")
this.tablerow = document.createElement("tr")
this.tablebody.appendChild(this.tablerow)
this.table.appendChild(this.tablebody)
this.element.appendChild(this.table)
this.table.setAttribute("border", "0");
this.addBranch()
this.addBranch()
this.footer = document.createElement("img")
this.footer.src = "images/ifelsefoot.GIF"
this.footer.setAttribute("width", "268");
this.footer.setAttribute("height", "49");
this.element.appendChild(this.footer)
},

addBranch : function() {
var cell = document.createElement("td");
var branch=document.createElement("DIV")
branch.className="SequenceActivity"
var branchConnector=document.createElement("DIV")
branchConnector.className="connector"
var innerImg=document.createElement("IMG")
innerImg.src="images/connector.gif"
branchConnector.appendChild(innerImg)
connectors[connectors.length] = branchConnector
branch.appendChild(branchConnector)
cell.appendChild(branch)
this.tablerow.appendChild(cell)
cell.setAttribute("vAlign","top")
branch.onresize=BranchResize
branch.name = getNewId("IfElseBranchActivity");
this.Branches[this.Branches.length] = branch
return branch;
},
</code>

This code creates a kind of ifelse figure on a page with two braches. This works. However, when "this.header.onclick" is clicked an extra branche must be added. Obviously my function does not work. Is the a way to get this working? I would really like to use the original addbranch function

arthurakay
Oct 14th, 2009, 03:17 PM
First of all, use CODE tags (the # symbol in the WYSIWYG) when pasting your code... <code> doesn't do anything.

Second, do you get any errors? If so, what are they?

Third, have you tried to debug the script to see if any/how much of the script runs?

The only obvious thing I see is that you don't consistently use semicolons to end your lines. That isn't necessarily the cause of any problems here, but it's good practice.

My advice is to use the Firebug plugin for Firefox to debug your script and see where it fails. Inspect the values using breakpoints and we can help you figure things out.

Philip M
Oct 14th, 2009, 03:26 PM
I am sure that }, is bad practice!

hacking_mike
Oct 21st, 2009, 10:00 AM
This function adds a branch and is working.


function addElement() {
for(var i=0;i<activityList.length;i++)
{
if (activityList[i]!=null && activityList[i].element.id == 'IfElseActivity1')
{
activityList[i].addBranch()
}
}
}



This function removes a branch and is also working. But the table (100%) does not resize and is to0 width


function removeElement() {
for(var i=0;i<activityList.length;i++)
{
if (activityList[i]!=null && activityList[i].element.id == 'IfElseActivity1')
{
for(var j=0;j<activityList[i].Branches.length;j++)
{
var branch = activityList[i].Branches[j]
if (branch.name == 'IfElseBranchActivity2')
{
activityList[i].Branches.splice(j,1);

var d = document.getElementById('top');
d.parentNode.removeChild(d);
}
}
}
}
}