• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 336
  • Last Modified:

I need to dynamically attach the Parameterized Funtion with the OnClick event of IMG Tag.

I am dynamically add the row to the table on the click of "Add Row" button. There are 2 columns in the table, one is for Input box and another one is for image(delete.gif). I want to delete the whole row on the click of the delete image.

Currently i am able to add the row with the delete image. Now i want to attach the funtion with onClick event of the image(for that i am using the function attachEvent) . But the problem is that attachEvent function of the image object is not accepting my function because my function is using the parameter(means it is the parameterized function). I need the object of the current image in the function so that i can get the id to delete the row.

Please tell me that how can I attach the parameterized function to dynamically added tag(i.e. img tag). It is very urgent...

0
anmeet
Asked:
anmeet
2 Solutions
 
TkoManCommented:
Please post your code and HTML so that we can get an idea of what you are doing.
0
 
TkoManCommented:
Im not sure if I'm understanding your question properly, but here is a solution that may work. You can try "recasting" the function with a dummy function. In the dummy function you can pull the obj from the event source and pass as the obj in the real function.

obj.attachEvent('onclick',DummyReCast);

function YourFunction(thisObj) //Your real function
{
      alert(thisObj.id);
}

function DummyReCast() //The dummy recast funtion get the obj from the event object.
{
      YourFunction(event.srcElement);
}
0
 
BatalfCommented:
If you need to refer to the Image, you could probably do this by the srcElement of the event.

Example:


<html>
<head>
<script>
      function deleteObject(){
            var e = event; // reference to the event.
            var obj = e.srcElement; // reference to the image
            var tdTag = obj.parentNode; // reference to the TD
            var trTag = tdTag.parentNode; // reference to the TR
            var tableTag = trTag.parentNode; // Reference to the table
            tableTag.removeChild(trTag);
            
            
      }
</script>
<body>
A table
<table border="0">
      <tr>
            <td><input type="text"></td>
            <td><img src="image.gif" onclick="deleteObject()"></td>
      </tr>
      <tr>
            <td><input type="text"></td>
            <td><img src="image.gif" onclick="deleteObject()"></td>
      </tr>
</table>
</body>
</html>

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
BatalfCommented:
And as dynamic added events.

<html>
<head>
<script>
      function deleteObject(){
            // The line below could also be written var obj = event.srcElement
            var obj = this.tagName; // reference to the image -             
            var tdTag = obj.parentNode; // reference to the TD
            var trTag = tdTag.parentNode; // reference to the TR
            var tableTag = trTag.parentNode; // Reference to the table
            tableTag.removeChild(trTag);
            
            
      }
      
      function applyEvents(){
            var images = document.getElementsByTagName('IMG');
            for(var no=0;no<images.length;no++)images[no].onclick = deleteObject;
      }
      
</script>
<body onload="applyEvents()">
A table
<table border="0">
      <tr>
            <td><input type="text"></td>
            <td><img src="image.gif"></td>
      </tr>
      <tr>
            <td><input type="text"></td>
            <td><img src="image.gif"></td>
      </tr>
      <tr>
            <td><input type="text"></td>
            <td><img src="image.gif"></td>
      </tr>
</table>
</body>
</html>
0
 
BatalfCommented:
typo -

var obj = this.tagName;

should be read

var obj = this;

in my last post.
0
 
devicCommented:
example:
==========================================
<img src=http://oldlook.experts-exchange.com:8080/images/logoWhiteSmall.gif id=myImage>

<script>
function parameterizedFunction(obj)
{
      alert(obj.outerHTML);
}


//debug
function runit()
{
      document.getElementById("myImage").onclick= new Function("parameterizedFunction(this)");
}
</script>
<button onclick=runit()>runit</button>
0
 
ZvonkoSystems architectCommented:
What Batalf demostrated in his example but did not stated explicitley is this: you need NOT to pass the image object reference to the onclick handler in function parameters.
The image object reference is passed inline to the called function trough the functions "this" inline reference.
So when your deleteRow() function is called with or without parameters by clicking on the image does the reference "this" in that function reference to the clicked image object.

0
 
anmeetAuthor Commented:
Hello Batalf,

Thanks for your reply. I read your code it is totally different from my code. But i think it should be work. I'll try your code.
0
 
Cem TürkSenior Software EngineerCommented:
No comment has been added to this question in more than 21 days, so it is now classified as abandoned..
I will leave the following recommendation for this question in the Cleanup topic area:

Split between Batalf and Zvonko

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

cem_turk

EE Cleanup Volunteer
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now