How to access id attribute of any element in Raphael

Question

I'm using Raphael for drawing some elements on a website. The elements include rectangle, line (path). I have given an id to the path element and trying to access it in the onclick event of that line. but when I do an alert of the id, nothing is visible. Following is the code snippet

function createLine() 
{ 
  var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight);
  t.attr('stroke-width','3');
  t.attr('id','Hello');
  t.node.onclick = processPathOnClick; 
}

function processPathOnClick() 
{
    alert($(this).attr("id"));
}

Can anyone please tell me what is the problem with the above code. Any pointer will be helpful.

Thanks

Solution 1

Are you sure you don't want to write $(t.node).attr('id','Hello'); instead?

Update: someone just downvoted this answer. And I truly feel obligated to point out this way of setting the id isn't particularly good. You would be better off using:

t.node.id = 'Hello';

I wish there was a way to credit Juan Mendes, other than upvoting his comment to this answer.

Solution 2

Try this:

function createLine()  { 
    var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight);
    t.attr('stroke-width','3');
    t.id = 'Hello';
    t.node.onclick = processPathOnClick;
}

function processPathOnClick() {
    alert($(this).id);
    alert(this.id); // This should work too...
}

Basically you are creating a new property called "id" on your Raphael line instance variable "t". It's kind of hacking, in my opinion, but it does the trick just fine.

Solution 3

Try setting the handler using jquery

function createLine() 
{ 
  var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight);
  t.attr('stroke-width','3');
  t.attr('id','Hello');
  $(t.node).click(processPathOnClick);
}

function processPathOnClick() 
{
    alert($(this).attr("id"));
}

Comments

[sgbharadwaj]

Hi Juan, Setting the handler didnt work. I changed setting attribute to t.node.setAttribute('id',pathId); and accessing it to alert($(this).attr('id')); this worked

[Ruan Mendes]

Well, then that tells you that setting id on the Raphael object does not set it on the node. No need to use jquery to set the id. Your code would be much simpler by doing t.node.id='my-id', and your handler could just use alert(this.id)

[Ruan Mendes]

This should work, but I'm baffled as to why people use jquery to set the id of a node, lots of noise. Compare that to t.node.id = 'Hello'

[Zecc]

@sgbharadwaj Huh, I just tried and it worked for me. Did you then rewrite to $(this.node).attr('id') in the handler? Anyway, like it's been said, you can just write t.node.it = "Hello" and alert(this.id) in the handler-

[XaolingBao]

According to a comment by Dmitry Baranovskiy (Raphael's creator) in this post stackoverflow.com/questions/3613636/using-jquery-with-raphae‌​l node should never be accessed, but what else could we use then? I am having an issue trying to use multiple raphael shapes and manipulate them using Jquery.