Dynatree onActivate issue
When Dynatree's onActivate event handler is called it will not always draw image on a canvas. The first attempt always fails, the second attempt succeeds.
HTML
<script src="http://dynatree.googlecode.com/svn/trunk/src/jquery.dynatree.js"></script>
<link rel="stylesheet" href="http://wwwendt.de/tech/dynatree/src/skin-vista/ui.dynatree.css">
<div id="tree"></div>
<div id="nodeTitle"></div>
<canvas id="canvas"></canvas>
JavaScript
$(function(){
$("#tree").dynatree({
children:[
{
"title": "Kittens",
"key": "Kittens",
"isFolder": true,
"children": [
{
"title": "Kitten 1",
"key": "Kitten 1",
"imageUrl": "http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg"
},
{
"title": "Kitten 2",
"key": "Kitten 2",
"imageUrl": "http://austintexas.gov/sites/default/files/files/Animal_Services/cute-kitten-playing.jpg"
}, {
"title": "Kitten 3",
"key": "Kitten 3",
"imageUrl": "http://4.bp.blogspot.com/-cCcPWasNdwQ/URXauW_-ojI/AAAAAAAADU4/jqFHMXkosos/s320/kitten+1.jpg"
},
]
}
],
onActivate: function(node) {
if(!node.data.isFolder) {
loadImage(node);
$("#nodeTitle").text(node.data.title);
//alert("The loadImage function was just called. The image for this node **should** show after you close this alert.");
} else {
clearImage();
$("#nodeTitle").text("");
}
}
});
});
var canvasObj = $("#canvas");
var ctx = canvasObj[0].getContext("2d");
function loadImage(node) {
var imageObj = new Image();
imageObj.onload = function() {
canvasObj.attr("height", imageObj.height + "px");
canvasObj.attr("width", imageObj.width + "px");
ctx.drawImage(imageObj, 0, 0);
};
imageObj.src = node.data.imageUrl;
}
function clearImage() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}