1

The raphael.js documentation seems to warn against using element.node but it seems to be the only way to call an event. I created a jsFiddle that assigns 3 different shapes an id using 3 different methods: .attr, .data, and .node.id.

The .attr method I get an undefined alert for the id and no response for the click event.

The .data method I get the correct alert id but an undefined alert for the click.

The .node.id I get the correct alert id and the correct alert for the click.

Can someone please help me with which method is best to use (and if .node.id is ok) and the correct way to target these shapes using jquery.

html: Square Rectangle Circle

jquery/raphael

var p = Raphael("test");

$(':radio[name="shapes"]').on('click', function () {
var shapeName = $(this).attr('id');

//test attr id
if (shapeName == "square") {
    var test1 = p.rect(10, 10, 40, 40);
    test1.attr('fill', 'black');
    test1.attr('id', 'help1');
    var data1;
    data1 = test1.attr('id');
    alert(data1);
    $(test1.node).click(confirmFunc3, removeOtherNodes);
}
//test node.id
else if (shapeName == "rectangle") {
    var test2 = p.rect(200, 20, 50, 80);
    test2.attr('fill', 'blue');
    test2.node.id='help2';
    var data2;
    data2 = test2.node.id;
    alert(data2);
    $(test2.node).click(confirmFunc);
}
//test data id
else if (shapeName == "circle") {
    var test3 = p.circle(100, 100, 40);
    test3.attr('fill', 'red');
    test3.data('id', 'help3');
    var data3;
    data3 = test3.data('id');
    alert(data3);
    $(test3.node).click(confirmFunc2);
}

function confirmFunc() {
    alert(this.id);
}
function confirmFunc2() {
    alert($(this).data('id'));
}
function confirmFunc3() {
    alert($(this).attr('id'));
}
function removeOtherNodes() {
    $('#help2').remove();
    $('#help3').remove();
}
});

http://jsfiddle.net/adam123/9wUJN/115/

Adam
  • 297
  • 6
  • 20

1 Answers1

3

1) It's OK to do element.node.id = "abc" if you need to access element later via jQuery - $('#abc').on("click", doSomething);

2) But why do you need to use jQuery for event handlers when you can use Raphael?

raphaelElement.mousedown(eventHandlerFunction);

or

raphaelElement.mousedown(function(e){
   ...
});

3) Also you can do this:

raphaelElement.id = "abc";
var thatElement = paper.getById("abc");
thatElement.mousedown(function(e){
   ...
});
Roman
  • 3,799
  • 4
  • 30
  • 41
  • I need to be able to clear all shapes besides the currently selected shape. Thank you for your help!!! – Adam Apr 06 '13 at 16:50
  • What do you mean by "clear"? = remove? That's also possible with native Raphael's methods, without jQuery. – Roman Apr 07 '13 at 07:35