8

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

sgbharadwaj
  • 395
  • 2
  • 5
  • 9

3 Answers3

14

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.

Zecc
  • 4,220
  • 19
  • 17
  • 15
    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'` – Ruan Mendes Dec 15 '10 at 21:16
  • @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- – Zecc Dec 15 '10 at 21:27
  • According to a comment by Dmitry Baranovskiy (Raphael's creator) in this post http://stackoverflow.com/questions/3613636/using-jquery-with-raphael 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. – XaolingBao Oct 22 '14 at 23:21
3

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.

Guillaume Gervais
  • 1,035
  • 2
  • 14
  • 26
2

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"));
}
Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
  • 1
    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 – sgbharadwaj Dec 15 '10 at 21:02
  • 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 Dec 15 '10 at 21:15