CODEWITHSUNDEEP
.netjqueryuser-controlscolorbox
phil crowe
phil crowe

Reputation: 17

usercontrol with colorbox not firing an event

I have a colorbox which shows a hidden div when a link is clicked. within the div being shown in the colorbox is a usercontrol. its basically a subscribe to newsletter form that adds them to our customer db. For some reason the button to submit the form will not work in the colorbox, but it will if i move it outside of the hidden div. This is a problem i have encountered before and got around it by creating a iframe in the hidden div to a blank page with the usercontrol on it, but im sure there must be a simpler solution.

Markup :

<div style='display:none'> 
    <div id='SignUpForm' style='padding:10px; background:#fff;'>
        <umbraco:Macro Alias="SignUpUserControl" runat="server"></umbraco:Macro>
    </div> 
</div>

JavaScript :

$(document).ready(function () {
    $(".openSignUpForm").colorbox({
        width  : "50%",
        inline : true,
        href   : "#SignUpForm"
    });
});

btw. i am using umbraco cms, the macro is the reference to the usercontrol. but i still have the same problem if i add the usercontrol to the page the conventional way.

Upvotes: 0

Views: 752

Answers (2)

phil
phil

Reputation: 781

thanks for the reply. i ended up just writing the colorbox code from scratch myself. it wasnt to hard really! just an absolute position div ontop of everything else that had display none to begin with the just an animate line like $("#mydiv").fadeIn(); or $("#mydiv").show();

Upvotes: 1

Lee
Lee

Reputation: 11

I have no idea if you've managed to fix this since then, considering how long ago this was I'd imagine you've probably moved on!

But for anyone else that has this issue I'd recommend reading this page: http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_26778740.html

If you scroll to the bottom you get to see all the answers that have been posted without having an account.

EDIT: 08/06/2011

Actually just noticed direct linking to the above page doesn't work...

Here's the post I was referring to from that site: " Let us understand how most jquery overlay plugins work: your page structure is like this:

--body>--

--form>--

—-your page contents--

—-div to be displayed in overlay (colorbox div), it is normally hidden using display:none as in this case--

--/form>--

--/body>--

During run-time, while displaying the overlay, structure changes as:

--body>--

--form>--

—-your page contents--

--/form>--

--div> (this is overlay wrapper) —-div to be displayed in overlay (colorbox div), it is normally hidden using display:none as in this case--

--/div>--

--/body>--

Note that your div is moved out of the tag. That's way events are not firing.

Solution is:

It the jquery.colorbox.js file, search for the following line: $('body').prepend($overlay, $box.append($wrap, $loadingBay));

replace it with the following line: $('form').prepend($overlay, $box.append($wrap, $loadingBay));

Everything should start working fine."

I hope that helps!

Upvotes: 1

Related Questions