CODEWITHSUNDEEP
jqueryasp.netupdatepanelcolorbox
ShelbyZ
ShelbyZ

Reputation: 1504

Jquery Colorbox not showing after close when hosted on control in UpdatePanel

So I have a Colorbox setup for the document.ready function:

$(document).ready(function () {
    $('#btnMyButton').colorbox({
        href: "./Modals/MyModal.aspx",
        iframe: true,
        height: 450,
        width: 550,
        opacity: .60,
        overlayClose: false,
        escKey: false,
        onClosed: function () {
            var mypage = Sys.WebForms.PageRequestManager.getInstance();
            mypage._doPostBack('upGrid', '');
        }
    });
});

On close of the colorbox I do a postback to my update panel (upGrid). In MyModal I have a button that closes the Colorbox as such:

<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="parent.$.fn.colorbox.close(); return false;" CssClass="button cancel" />

The update panel contains a grid and the colorbox leads a user to an upload page. If they succesfully upload a file the program parses the data to fill in the grid. So when the OnClosed of the colorbox is called the grid should be updated.

If the user clicks btnMyButton and proceeds to click btnCancel on the Modal they are unable to click btnMyButton again to have the colorbox load the Modal again. If I move btnMyButton outside of the update panel it functions fine, but I wanted btnMyButton inside the update panel to handle hiding/showing of it depending on if the user has already uploaded a file they shouldn't see it.

Has anyone ran into/solved any issues with colorbox not redisplaying after close inside an ASP.NET update panel?

Upvotes: 1

Views: 1004

Answers (1)

rick schott
rick schott

Reputation: 21127

$(document).ready() and pageLoad() are not the same!

It is also called after every partial postback. It basically functions as a combination of Application.Init and PageRequestManager.EndRequest.

function pageLoad()
{
   $('#btnMyButton').colorbox({
        href: "./Modals/MyModal.aspx",
        iframe: true,
        height: 450,
        width: 550,
        opacity: .60,
        overlayClose: false,
        escKey: false,
        onClosed: function () {
            var mypage = Sys.WebForms.PageRequestManager.getInstance();
            mypage._doPostBack('upGrid', '');
        }
    });

}

Upvotes: 3

Related Questions