Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

MegaArcon · Dec 2nd, 2005, 9:46 AM

Yo! ^_^

I'm currently wokring on some javascript that is to dynamically create a file tree-like structrue. The code I have works fine in firefox (god love firefox/mozilla) but unfortunetaly I'm also required to get it working in IE.

So, here's my issue. The buttons and text are created properly, but the buttons that are created don't seem to want to use the "onClick" event I'm trying to set. I did some googleing, and it seems that IE "poo-poo's" the setAttributes method. (And doing some good ol' print statement tests they seem to be right.)

I tried using button.onClick = "event" to at least quizi keep with the standards, but that was a no go as well....it acknowledge the attribute was set...but didn't actually call the event when the button was pressed. (And this just plain broke it in firefox)

So, O.K, then...as much as I don't like it I'll go against the standards and use IE's "attachEvent" only when the user is using IE. But even in using that function it STILL dosen't work....what I think the problem is that my function needs parameters, and when I attach it to the onclick of the button, the button currently has now way to get the parameters it needs to the function.

How am I supposed to use the attachEvent handler in a manner to get my buttons to work? I know this was long winded..but I wanted to make sure you all knew where i was comming from...here's a few code snippits to give you the idea...

html

(Toggle Plain Text)

Directory Tree:
<br/><br/>
Name of File/Dir/Reg Ex:<input type="text" id="DFRName"/>
<ul id="dirTree">
   <li id="studDir">
      Student Working Dir: 
      <button onClick='addDir(this.parentNode.parentNode, document.getElementById("DFRName").value)'>Add a Dir</button>
      <button onClick='addFile(this.parentNode, document.getElementById("DFRName").value)'>Add a File/Reg Ex</button>
   </li>
</ul>
</p>

javascript function

(Toggle Plain Text)

function addDir(location, dirName){
   if(dirName == ""){
      alert("You must specify the name of the directory!");
      return;
   }

   //creates the list to place the directory and buttons in
   var newUL = document.createElement("ul");

   //list element to hold the name of the dir and the buttons
   var newLI = document.createElement("li");

   //the contents of the li element
   var newText = document.createTextNode(dirName);
   var newDirButton = document.createElement("button");
   var newFileButton = document.createElement("button");
   var newRemoveButton = document.createElement("button");
   
   //the text for the button elements
   var dirButtonText = document.createTextNode(dirText);
   var fileButtonText = document.createTextNode(fileText);
   var removeButtonText = document.createTextNode(removeText);

   //append the text to the buttons
   newDirButton.appendChild(dirButtonText);
   newFileButton.appendChild(fileButtonText);
   newRemoveButton.appendChild(removeButtonText);

   //set the onClick attributes for the buttons. Since IE does not
   //support the setAttribute function in the DOM, IE's own
   //attach event is used if the broweser is IE.
   if(navigator.appName == "Microsoft Internet Explorer"){
      newDirButton.attachEvent("onClick", addDir(this.parentNode.parentNode, document.getElementById(\"DFRName\").value) );
      newFileButton.attachEvent("onClick", addFile(this.parentNode, document.getElementById(\"DFRName\").value));
      newRemoveButton.attachEvent("onClick", remove(this.parentNode.parentNode,this.parentNode));
   }
else{
      newDirButton.setAttribute("onClick", dirButtonEvent);
      newFileButton.setAttribute("onClick", fileButtonEvent);
      newRemoveButton.setAttribute("onClick", removeButtonEvent);
   }

   //append the text and button nodes to li, and then append li to the ul
   newLI.appendChild(newText);
   newLI.appendChild(newDirButton);
   newLI.appendChild(newFileButton);
   newLI.appendChild(newRemoveButton);
   newUL.appendChild(newLI);
   location.appendChild(newUL);

   clearField(document.getElementById("DFRName"));

   return;
}

function addDir(location, dirName){
   if(dirName == ""){
      alert("You must specify the name of the directory!");
      return;
   }

   //creates the list to place the directory and buttons in
   var newUL = document.createElement("ul");

   //list element to hold the name of the dir and the buttons
   var newLI = document.createElement("li");

   //the contents of the li element
   var newText = document.createTextNode(dirName);
   var newDirButton = document.createElement("button");
   var newFileButton = document.createElement("button");
   var newRemoveButton = document.createElement("button");
   
   //the text for the button elements
   var dirButtonText = document.createTextNode(dirText);
   var fileButtonText = document.createTextNode(fileText);
   var removeButtonText = document.createTextNode(removeText);

   //append the text to the buttons
   newDirButton.appendChild(dirButtonText);
   newFileButton.appendChild(fileButtonText);
   newRemoveButton.appendChild(removeButtonText);

   //set the onClick attributes for the buttons. Since IE does not
   //support the setAttribute function in the DOM, IE's own
   //attach event is used if the broweser is IE.
   if(navigator.appName == "Microsoft Internet Explorer"){
      newDirButton.attachEvent("onClick", addDir(this.parentNode.parentNode, document.getElementById(\"DFRName\").value) );
      newFileButton.attachEvent("onClick", addFile(this.parentNode, document.getElementById(\"DFRName\").value));
      newRemoveButton.attachEvent("onClick", remove(this.parentNode.parentNode,this.parentNode));
   }
else{
      newDirButton.setAttribute("onClick", dirButtonEvent);
      newFileButton.setAttribute("onClick", fileButtonEvent);
      newRemoveButton.setAttribute("onClick", removeButtonEvent);
   }

   //append the text and button nodes to li, and then append li to the ul
   newLI.appendChild(newText);
   newLI.appendChild(newDirButton);
   newLI.appendChild(newFileButton);
   newLI.appendChild(newRemoveButton);
   newUL.appendChild(newLI);
   location.appendChild(newUL);

   clearField(document.getElementById("DFRName"));

   return;
}

I won't bother to include the code for the addFile button, since it looks A LOT like the above...well...any thoughts? Thanks! ^_^

Agent 47 · Dec 3rd, 2005, 6:36 AM

It is hard to test as you have not given us all of the code, but I think
I've got it. 'this' operates on a global scope, so where you try to use
'this.parentNode', it is throwing an error. To get round it, you can use
an anonymous function like so: [also, onclick should be lower case

]

(Toggle Plain Text)

newDirButton.attachEvent("onclick", function(){addDir(this.parentNode.parentNode, document.getElementById('DFRName').value)});
newFileButton.attachEvent("onclick", function(){addFile(this.parentNode, document.getElementById('DFRName').value}));
newRemoveButton.attachEvent("onclick", function(){remove(this.parentNode.parentNode, this.parentNode)});

--47.

MegaArcon · Dec 5th, 2005, 11:42 AM

Thanks Agent, but unfortunatlly IE dosen't like that either. I did some googleing (per the insperation you gave me) and it turns out that "attachEvent" makes this completely useless. Since the event handling function is referenced and not copied, "this" dosen't apply to what you want it to.

I instead tryed to use:

(Toggle Plain Text)

newDirButton.onclick = addDir(this.parentNode.parentNode, document.getElementById(\"DFRName\").value)

When I use getAttribute("onClick"), it shows that the above has been assigned...but the function dosen't fire off when the button is clicked. I still seem to be missing something.....

Agent 47 · Dec 5th, 2005, 1:34 PM

How bout using the anonymous function there too?

(Toggle Plain Text)

newDirButton.onclick=function(){addDir(...)};

MegaArcon · Dec 5th, 2005, 1:49 PM

Ah, O.k. I tried out the anonymous function and it blew up again. However! When I did it and attached something simple like:

(Toggle Plain Text)

   newDirButton.onclick =  function(){alert("foo");};

It works as expected. The new button will open a popup with the word "foo" in it. So, it seems to have a problem with the function that its attaching. I think its caused by the parameters to the function. More specifically, with the this.parentNode.parentNote parameter.

So....in other words....I may have to try and re-write the function so that the node that should be passed by the this.parentNode.parentNode is somehow done within the method instead of being passed....or something along those lines....aw, crap....

MegaArcon · Dec 6th, 2005, 8:31 AM

Blech....I got my script to work....I really didn't want to do it this way...but after all the farting around I've done trying to get IE to work, I guess I'm left with little choice...I used *shudder* innerHTML to get the job done, and just put the buttons in directly...lika so...

(Toggle Plain Text)

if(navigator.appName == "Microsoft Internet Explorer"){
      newLI.appendChild(newText);
      newUL.appendChild(newLI);
      location.appendChild(newUL);
      var button1 = "<button onclick = \'" +  dirButtonEvent + "\'>" + dirText +
                    "</button>"
      var button2 = "<button onclick = \'" + fileButtonEvent + "\'>" +
                    fileText + "</button>"
      var button3 = "<button onclick = \'" + removeButtonEvent + "\'>" +
                    removeText + "</button>"
      newLI.innerHTML = dirName + button1 + button2 + button3
   }
else{
      //set the onclick attributes
      newDirButton.setAttribute("onClick", dirButtonEvent);
      newFileButton.setAttribute("onClick", fileButtonEvent);
      newRemoveButton.setAttribute("onClick", removeButtonEvent);

      //append the text and button nodes to li, and then append li to the ul
      newLI.appendChild(newText);
      newLI.appendChild(newDirButton);
      newLI.appendChild(newFileButton);
      newLI.appendChild(newRemoveButton);
      newUL.appendChild(newLI);
      location.appendChild(newUL);
   }

I'm not proud of it...and it grossly goes against standards...but it works....Thanks for the help Agent....now I need to go take a shower...

Dec 2nd, 2005, 9:46 AM	#1
MegaArcon Programmer Join Date: Aug 2005 Posts: 66 Rep Power: 0	IE and dynamic button creation Yo! ^_^ I'm currently wokring on some javascript that is to dynamically create a file tree-like structrue. The code I have works fine in firefox (god love firefox/mozilla) but unfortunetaly I'm also required to get it working in IE. So, here's my issue. The buttons and text are created properly, but the buttons that are created don't seem to want to use the "onClick" event I'm trying to set. I did some googleing, and it seems that IE "poo-poo's" the setAttributes method. (And doing some good ol' print statement tests they seem to be right.) I tried using button.onClick = "event" to at least quizi keep with the standards, but that was a no go as well....it acknowledge the attribute was set...but didn't actually call the event when the button was pressed. (And this just plain broke it in firefox) So, O.K, then...as much as I don't like it I'll go against the standards and use IE's "attachEvent" only when the user is using IE. But even in using that function it STILL dosen't work....what I think the problem is that my function needs parameters, and when I attach it to the onclick of the button, the button currently has now way to get the parameters it needs to the function. How am I supposed to use the attachEvent handler in a manner to get my buttons to work? I know this was long winded..but I wanted to make sure you all knew where i was comming from...here's a few code snippits to give you the idea... html (Toggle Plain Text) Directory Tree: <br/><br/> Name of File/Dir/Reg Ex:<input type="text" id="DFRName"/> <ul id="dirTree"> <li id="studDir"> Student Working Dir: <button onClick='addDir(this.parentNode.parentNode, document.getElementById("DFRName").value)'>Add a Dir</button> <button onClick='addFile(this.parentNode, document.getElementById("DFRName").value)'>Add a File/Reg Ex</button> </li> </ul> </p> Directory Tree: <br/><br/> Name of File/Dir/Reg Ex:<input type="text" id="DFRName"/> <ul id="dirTree"> <li id="studDir"> Student Working Dir: <button onClick='addDir(this.parentNode.parentNode, document.getElementById("DFRName").value)'>Add a Dir</button> <button onClick='addFile(this.parentNode, document.getElementById("DFRName").value)'>Add a File/Reg Ex</button> </li> </ul> </p> javascript function (Toggle Plain Text) function addDir(location, dirName){ if(dirName == ""){ alert("You must specify the name of the directory!"); return; } //creates the list to place the directory and buttons in var newUL = document.createElement("ul"); //list element to hold the name of the dir and the buttons var newLI = document.createElement("li"); //the contents of the li element var newText = document.createTextNode(dirName); var newDirButton = document.createElement("button"); var newFileButton = document.createElement("button"); var newRemoveButton = document.createElement("button"); //the text for the button elements var dirButtonText = document.createTextNode(dirText); var fileButtonText = document.createTextNode(fileText); var removeButtonText = document.createTextNode(removeText); //append the text to the buttons newDirButton.appendChild(dirButtonText); newFileButton.appendChild(fileButtonText); newRemoveButton.appendChild(removeButtonText); //set the onClick attributes for the buttons. Since IE does not //support the setAttribute function in the DOM, IE's own //attach event is used if the broweser is IE. if(navigator.appName == "Microsoft Internet Explorer"){ newDirButton.attachEvent("onClick", addDir(this.parentNode.parentNode, document.getElementById(\"DFRName\").value) ); newFileButton.attachEvent("onClick", addFile(this.parentNode, document.getElementById(\"DFRName\").value)); newRemoveButton.attachEvent("onClick", remove(this.parentNode.parentNode,this.parentNode)); } else{ newDirButton.setAttribute("onClick", dirButtonEvent); newFileButton.setAttribute("onClick", fileButtonEvent); newRemoveButton.setAttribute("onClick", removeButtonEvent); } //append the text and button nodes to li, and then append li to the ul newLI.appendChild(newText); newLI.appendChild(newDirButton); newLI.appendChild(newFileButton); newLI.appendChild(newRemoveButton); newUL.appendChild(newLI); location.appendChild(newUL); clearField(document.getElementById("DFRName")); return; } function addDir(location, dirName){ if(dirName == ""){ alert("You must specify the name of the directory!"); return; } //creates the list to place the directory and buttons in var newUL = document.createElement("ul"); //list element to hold the name of the dir and the buttons var newLI = document.createElement("li"); //the contents of the li element var newText = document.createTextNode(dirName); var newDirButton = document.createElement("button"); var newFileButton = document.createElement("button"); var newRemoveButton = document.createElement("button"); //the text for the button elements var dirButtonText = document.createTextNode(dirText); var fileButtonText = document.createTextNode(fileText); var removeButtonText = document.createTextNode(removeText); //append the text to the buttons newDirButton.appendChild(dirButtonText); newFileButton.appendChild(fileButtonText); newRemoveButton.appendChild(removeButtonText); //set the onClick attributes for the buttons. Since IE does not //support the setAttribute function in the DOM, IE's own //attach event is used if the broweser is IE. if(navigator.appName == "Microsoft Internet Explorer"){ newDirButton.attachEvent("onClick", addDir(this.parentNode.parentNode, document.getElementById(\"DFRName\").value) ); newFileButton.attachEvent("onClick", addFile(this.parentNode, document.getElementById(\"DFRName\").value)); newRemoveButton.attachEvent("onClick", remove(this.parentNode.parentNode,this.parentNode)); } else{ newDirButton.setAttribute("onClick", dirButtonEvent); newFileButton.setAttribute("onClick", fileButtonEvent); newRemoveButton.setAttribute("onClick", removeButtonEvent); } //append the text and button nodes to li, and then append li to the ul newLI.appendChild(newText); newLI.appendChild(newDirButton); newLI.appendChild(newFileButton); newLI.appendChild(newRemoveButton); newUL.appendChild(newLI); location.appendChild(newUL); clearField(document.getElementById("DFRName")); return; } I won't bother to include the code for the addFile button, since it looks A LOT like the above...well...any thoughts? Thanks! ^_^

Dec 3rd, 2005, 6:36 AM	#2
Agent 47 Hobbyist Programmer Join Date: Nov 2005 Posts: 122 Rep Power: 3	It is hard to test as you have not given us all of the code, but I think I've got it. 'this' operates on a global scope, so where you try to use 'this.parentNode', it is throwing an error. To get round it, you can use an anonymous function like so: [also, onclick should be lower case ] (Toggle Plain Text) newDirButton.attachEvent("onclick", function(){addDir(this.parentNode.parentNode, document.getElementById('DFRName').value)}); newFileButton.attachEvent("onclick", function(){addFile(this.parentNode, document.getElementById('DFRName').value})); newRemoveButton.attachEvent("onclick", function(){remove(this.parentNode.parentNode, this.parentNode)}); newDirButton.attachEvent("onclick", function(){addDir(this.parentNode.parentNode, document.getElementById('DFRName').value)}); newFileButton.attachEvent("onclick", function(){addFile(this.parentNode, document.getElementById('DFRName').value})); newRemoveButton.attachEvent("onclick", function(){remove(this.parentNode.parentNode, this.parentNode)}); --47. __________________ "I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet"

Dec 5th, 2005, 11:42 AM	#3
MegaArcon Programmer Join Date: Aug 2005 Posts: 66 Rep Power: 0	Thanks Agent, but unfortunatlly IE dosen't like that either. I did some googleing (per the insperation you gave me) and it turns out that "attachEvent" makes this completely useless. Since the event handling function is referenced and not copied, "this" dosen't apply to what you want it to. I instead tryed to use: (Toggle Plain Text) newDirButton.onclick = addDir(this.parentNode.parentNode, document.getElementById(\"DFRName\").value) newDirButton.onclick = addDir(this.parentNode.parentNode, document.getElementById(\"DFRName\").value) When I use getAttribute("onClick"), it shows that the above has been assigned...but the function dosen't fire off when the button is clicked. I still seem to be missing something.....

Dec 5th, 2005, 1:34 PM	#4
Agent 47 Hobbyist Programmer Join Date: Nov 2005 Posts: 122 Rep Power: 3	How bout using the anonymous function there too? (Toggle Plain Text) newDirButton.onclick=function(){addDir(...)}; newDirButton.onclick=function(){addDir(...)}; __________________ "I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet"

Dec 5th, 2005, 1:49 PM	#5
MegaArcon Programmer Join Date: Aug 2005 Posts: 66 Rep Power: 0	Ah, O.k. I tried out the anonymous function and it blew up again. However! When I did it and attached something simple like: (Toggle Plain Text) newDirButton.onclick = function(){alert("foo");}; newDirButton.onclick = function(){alert("foo");}; It works as expected. The new button will open a popup with the word "foo" in it. So, it seems to have a problem with the function that its attaching. I think its caused by the parameters to the function. More specifically, with the this.parentNode.parentNote parameter. So....in other words....I may have to try and re-write the function so that the node that should be passed by the this.parentNode.parentNode is somehow done within the method instead of being passed....or something along those lines....aw, crap....

Dec 6th, 2005, 8:31 AM	#6
MegaArcon Programmer Join Date: Aug 2005 Posts: 66 Rep Power: 0	Blech....I got my script to work....I really didn't want to do it this way...but after all the farting around I've done trying to get IE to work, I guess I'm left with little choice...I used shudder innerHTML to get the job done, and just put the buttons in directly...lika so... (Toggle Plain Text) if(navigator.appName == "Microsoft Internet Explorer"){ newLI.appendChild(newText); newUL.appendChild(newLI); location.appendChild(newUL); var button1 = "<button onclick = \'" + dirButtonEvent + "\'>" + dirText + "</button>" var button2 = "<button onclick = \'" + fileButtonEvent + "\'>" + fileText + "</button>" var button3 = "<button onclick = \'" + removeButtonEvent + "\'>" + removeText + "</button>" newLI.innerHTML = dirName + button1 + button2 + button3 } else{ //set the onclick attributes newDirButton.setAttribute("onClick", dirButtonEvent); newFileButton.setAttribute("onClick", fileButtonEvent); newRemoveButton.setAttribute("onClick", removeButtonEvent); //append the text and button nodes to li, and then append li to the ul newLI.appendChild(newText); newLI.appendChild(newDirButton); newLI.appendChild(newFileButton); newLI.appendChild(newRemoveButton); newUL.appendChild(newLI); location.appendChild(newUL); } if(navigator.appName == "Microsoft Internet Explorer"){ newLI.appendChild(newText); newUL.appendChild(newLI); location.appendChild(newUL); var button1 = "<button onclick = \'" + dirButtonEvent + "\'>" + dirText + "</button>" var button2 = "<button onclick = \'" + fileButtonEvent + "\'>" + fileText + "</button>" var button3 = "<button onclick = \'" + removeButtonEvent + "\'>" + removeText + "</button>" newLI.innerHTML = dirName + button1 + button2 + button3 } else{ //set the onclick attributes newDirButton.setAttribute("onClick", dirButtonEvent); newFileButton.setAttribute("onClick", fileButtonEvent); newRemoveButton.setAttribute("onClick", removeButtonEvent); //append the text and button nodes to li, and then append li to the ul newLI.appendChild(newText); newLI.appendChild(newDirButton); newLI.appendChild(newFileButton); newLI.appendChild(newRemoveButton); newUL.appendChild(newLI); location.appendChild(newUL); } I'm not proud of it...and it grossly goes against standards...but it works....Thanks for the help Agent....now I need to go take a shower...

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

IE and dynamic button creation