Colorbox: Calling colorbox.close

Question

I'm working on a project that uses the velocity templating system, so the $ character is reserved, and cannot be used in javascript variable names.

As such, I have to prefix jQuery variables and methods with jQuery, rather than $, e.g. jQuery(document).ready(function() {}); as opposed to $(document)ready(function(){});

This is ordinarily fine, but in this case I am using colorbox.

My code to call colorbox works fine, and looks like this:

jQuery(document).ready(function () {
    jQuery("#addUser").colorbox({
        href:"add",
        width:"500px",
        onClosed: function (message) {
            dataTable.refresh(jQuery("#ajaxResult").text(message));
        }
    })

    ...
})

I have a link inside the colorbox that I want to attach the colorbox.close method to, but when I click the link, I get this error:

Uncaught TypeError: Cannot call method 'close' of undefined

This is my code:

jQuery(document).ready(function () {
    jQuery("a").click(function() {
        jQuery.colorbox.close("User added succesfully");
    });

    ...
})

Can anybody tell me why I cannot close the colorbox?

By the way, the X that comes with colorbox still works to close it.

score 6 · Answer 1 · edited May 23 '17 at 09:58

6

jQuery("#addUser").colorbox.close("User added succesfully");

Also, you should be able to use the $ syntax for jQuery if you choose by using external javascript files <script type="text/javascript" src="my_script_file.js" /> or escaping the $ like \$.

edited May 23 '17 at 09:58

Community

1
1

answered Mar 25 '11 at 18:29

Chris Shouts

5,377
2
29
40

score 2 · Accepted Answer · answered Mar 25 '11 at 18:35

The easiest way to solve this for me was to store jQuery.colorbox as a variable in the global namespace. Yucky, but it works.

Here is what I put in the parent window:

jQuery(document).ready(function () {
    colorbox = jQuery.colorbox;

    ...
})

Then this is how I call it:

jQuery(document).ready(function () {
    jQuery("a").click(function() {
        colorbox.close("User added succesfully");
    });

    ...
})

score 1 · Answer 3 · answered Oct 23 '13 at 08:19

1

This worked for me:

jQuery().colorbox.close();

answered Oct 23 '13 at 08:19

joan16v

5,055
4
49
49

score 0 · Answer 4 · answered Mar 25 '11 at 18:27

0

can you try writing jQuery.fn.colorbox.close("User added succesfully"); instead of jQuery.colorbox.close("User added succesfully");

answered Mar 25 '11 at 18:27

sushil bharwani

29,685
30
94
128

Yeah, I thought of that. The documentation says that's how your supposed to do it from within an iframe. This implementation does not use an iframe. I tried it anyway, and it didn't solve the problem. Thanks, though. – Adam Mar 25 '11 at 18:30

Colorbox: Calling colorbox.close

4 Answers4