views:

90

answers:

1

I don't know if this is to do with Raphael, ColorBox or jQuery. Here's my the relevant code:

var image = paper.image(p.url_, tx, ty, img.width, img.height);
image[0].style.cursor = "pointer";
image.node.onclick = function() {
    $.colorbox({
        title: "Some Random Title",
        href: function() {
            $.post("test.php", { arg: p.id_ } );
        }
    });
};      

When watching the click in FireBug console the post is fired twice. It is also fired twice if it is a get as well.

If I change from the href function to a direct call of test.php then there is only a single get issued.

Why is the click event issuing the call twice when using jQuery?

UPDATE: Adding a call to alert in the anonymous function also fires twice so I guess it is something to do with colorbox.

UPDATE 2: Just tried wiring it to an actual page and FireBug spits this error message out in addition to the two get/posts. Which confirms this is a problem in ColorBox. Also it makes progress hard because while both calls complete colorbox sits showing it's throbber.

c is undefined 
    (function(b,gb){var v="none",t="click"...c.settings=eb;b(c.init)})(jQuery,this)

Note: This only attached to the second call and not the first.

+1  A: 

Not terribly familiar with colorbox so I am going out on a limb here. I'm guessing you want colorbox's html to use the result of the post. I would put the post outside of color box. Is there any reason you aren't using $(image.node).click()? Or even $(image).click()? Here's how I would do it

var image = paper.image(p.url_, tx, ty, img.width, img.height);
image[0].style.cursor = "pointer";
$(image.node).click(function() {
    var post_html = $.post("test.php", { arg: p.id_ } );
    $.colorbox({
        title: "Some Random Title",
        html: post_html
    });
});

This may not fix it, but it will tell you if the problem is that colorbox fires the href twice or if the click is being executed twice.

dustynachos
The reason for using the `image.node.click` is because it is provided by Raphael for the purpose of making element clickable and seemed the logical way to go. I will try your way and report back.
graham.reeds
Now with your method the post is fired only once. However the error returned is `c.match is not a function` `(function(b,gb){var v="none",t="click"...c.settings=eb;b(c.init)})(jQuery,this)` which is again in ColorBox.
graham.reeds
Actually you were nearly there. I've corrected your example and given you the tick. However with this method there is a noticeable lag between the click and appearance of the lightbox and also due to the loading be done outside of the box you no longer get the throbber.
graham.reeds