Rao Rao -4 years ago 91
jQuery Question

Access Raphael path programmatically

I am drawing raphael path and assigning an id to them using " eye.node.id". I am trying to get the id problematically to change the color using:

`var selectedBodyPart = p.getById(1001);
selectedBodyPart.attr('fill', 'blue');`


But it does not work. my fiddle is :
http://jsfiddle.net/RaoBurugula/okgdtzzh/3/
note : i have added the jquery reference but still consol gives me an error "Uncaught ReferenceError: $ is not defined"

HTML

<div id="bodyMapContainer">
</div>


JS

//RAPAEL PAGE
width = 700;
height = 900;
var bodyMapContainer = document.getElementById("bodyMapContainer");
var p = Raphael(20,0,width,height);
//var p = Raphael(bodyMapContainer,"100%","100%");
p.rect(0,0,width,height);
p.setViewBox(0,0,width,height,true);
drawEyes(150,45, 11, "Left Eye");
drawEyes(129,46, 11, "Right Eye");

//ID for the eyes
var eyeId = 1000;
selectEye();

function drawEyes(xCoordinate,yCoordinate, radius, bodyPartName){
var eye = p.circle(xCoordinate,yCoordinate, radius);
eyeId ++;
eye.node.id= eyeId;
eye.title=bodyPartName;
eye.attr ("stroke", "#F3F3FE");
eye.hover(hoverIn, hoverOut);
eye.click(bodyPartClicked);
eye.attr('fill', 'red');
}

// Hover in function
function hoverIn() {

this.attr('fill', 'green');
console.log($(this).attr('id'));
}

// Hover out function
function hoverOut() {

this.attr('fill', 'red');
}

function bodyPartClicked(){
var selectedBodyPart = $(this).attr('title');
console.log($(this).attr('title'));
console.log($(this).attr('id'));
}

function selectEye(){
var selectedBodyPart = p.getById(1001);
selectedBodyPart.attr('fill', 'blue');
}

Answer Source

There are 2 problems here, one with the fiddle, and two with the code.

The fiddle problem, just doesn't have a loadable jquery, so I have added that into the jsfiddle itself on the lhs.

For the code, the problem is that you are defining

 var eyeId = 1000;

after you call drawEyes(), which uses them.

Also for the id, use

    eye.id= eyeId;

rather than using node

Swap them around, and it should work.

eg jsfiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download