Colorbox after ajax form submit close the colorbox using jquery

Question

I have tried to submit a form while calling ajax script once i submit the form then the colorbox should close and the response will be displayed in the parent window.

I'm getting the response displayed in parent window, but the colorbox not closing after getting response

MY Jquery :

$('#product_cover').live("click", function(e){

        var checked= $('input:checkbox[name=cover_image]:checked').val();
        $.post(baseurl+"ajax_functions/update_product_cover/", {
                    product_cover: checked,
                    product_id:product_id,
                    shop_id :shop_id,
        }, function(response){
        parent.jQuery.colorbox.close();
            $('#product_cover_image').html(response);
        });

    }); 

But i have included all the necessary jquery lib files

Tried the below actions:

parent.jQuery.colorbox.close()

function closebox() {
parent.$.fn.colorbox.close();
}
$.colorbox.close();

Note : The form is located in ajax paged colorbox and the jquery was placed in that pop up new window only

Answer 1

If the form is in a popup window. Place this on the top level or opener:

function closeColorbox(){
    $.colorbox.close();
}

On the window that has the form on it do

$('#product_cover').live("click", function(e){
    var checked= $('input:checkbox[name=cover_image]:checked').val();
    $.post(baseurl+"ajax_functions/update_product_cover/", {
                product_cover: checked,
                product_id: product_id,
                shop_id: shop_id
    }, function(response){
        $('#product_cover_image').html(response);
        window.opener.closeColorbox();
    });
});

If the form in just inside of a colorbox ajaxed page you are accessing the same jQuery object. so just do

$('#product_cover').live("click", function(e){
    var checked= $('input:checkbox[name=cover_image]:checked').val();
    $.post(baseurl+"ajax_functions/update_product_cover/", {
                product_cover: checked,
                product_id: product_id,
                shop_id: shop_id
    }, function(response){
        $('#product_cover_image').html(response);
        $.colorbox.close();
    });
});

You just need to make sure that the colorbox ajaxed page isn't reloading/loading a second jquery or colorbox when the page is loaded.