kreynolds / RaphaelJS-Infobox

Wrapper for placing dynamic HTML on a RaphaelJS Canvas
http://blog.insidesystems.net/embedding-arbitrary-html-into-raphaeljs
Other
15 stars 5 forks source link

Have to manually call .update() on first creation of infobox #1

Closed mtaufen closed 13 years ago

mtaufen commented 13 years ago

Not that big of an issue because the workaround is mega simple, but worth mentioning anyway.

Unless I manually call .update() on my infobox object right after I first create it, the html I put inside it with the jQuery .html() method doesn't show up. Once .update() is called, the html inside the infobox updates properly whenever changed.

For example:

var paper;
var infoBox;

window.onload = function() {
    paper = new Raphael('canvas_container', 700, 400);

    infoBox = new Infobox(paper, {x: 150, y: 150, width: 200, height: 200});

        infoBox.div.html('<p>first batch of HTML</p>');
        infoBox.show();
        //infoBox.update();
}

function change() {
    infoBox.div.html('<p>changed</p>');
}

does not work, but uncommenting infoBox.update() does.

I also noted that the infoBox should be loaded on document ready, and tried wrapping the infoBox creation inside a $(function() { }), but manually calling .update() was the only way to get the infoBox to display properly.

If I modify raphaeljs-infobox.js to bind .update() to, say, a 'click' event, it will load properly when I click the page, which leads me to believe that the document ready event is either not being caught or not executing its handler.

If it helps, I found this bit in the jQuery documentation for binding the 'ready' event:

"There is also $(document).bind("ready", handler). This behaves similarly to the ready method but with one exception: If the ready event has already fired and you try to .bind("ready") the bound handler will not be executed."

kreynolds commented 13 years ago

Yes, in my use case, the infobox was not supposed to appear until some other action had been taken so it was not enabled by default. The binding is up to the discretion of the implementor, but it will not appear until update() is called by design. I'll add that commented out with an additional comment that if you want the box to appear on page load, it must be uncommented. That might help avoid confusion in the future.