Develop Reference

Show jquery dialog confirm/cancel modal. Form submit on confirm click

I have a jquery-ui modal dialog on my page which I show when a user clicks a Decline button on a control which is contained within an asp.net UpdatePanel, there are many of these controls on the page.
Script:
function confirmDecline(event) {
event.preventDefault();
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Confirm": function () {
$('form').submit();
return true;
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
Pod markup:
<div class="dms-pod">
<ul>
<li><strong><asp:Literal ID="litCompanyName" runat="server" /></strong></li>
<li><asp:Literal ID="litVatNumber" runat="server" /></li>
<li><asp:Literal ID="litTown" runat="server" /></li>
</ul>
<asp:Panel ID="pnlDmsForm" runat="server" CssClass="dms-form" DefaultButton="btnAccept">
<asp:TextBox ID="txtDmsNumber" runat="server" placeholder="DMS number" />
<asp:RequiredFieldValidator ID="reqDmsNumber" runat="server" ErrorMessage="Invalid DMS number" Display="Dynamic" CssClass="error" ControlToValidate="txtDmsNumber" />
<ajaxToolkit:ValidatorCalloutExtender ID="valDmsNumber" runat="server" TargetControlID="reqDmsNumber" HighlightCssClass="error" />
<div class="dms-buttons">
<div class="container">
<asp:LinkButton ID="btnAccept" runat="server" CssClass="btn" Text="accept" OnClick="btnAccept_Click" />
</div>
<div class="container">
<asp:LinkButton ID="btnDecline" runat="server" CssClass="btn-alt" Text="decline" OnClick="btnDecline_Click" OnClientClick="confirmDecline(event)" />
</div>
</div>
<div class="clear"></div>
</asp:Panel>
<div class="clear"></div>
<asp:HiddenField ID="hdnDealershipIRLinkID" runat="server" />
Which is then contained inside an update panel:
<asp:UpdatePanel ID="updPendingDms" UpdateMode="Always" runat="server">
<ContentTemplate>
<asp:Repeater ID="rptPendingDmsRequests" runat="server" OnItemDataBound="rptPendingDmsRequests_ItemDataBound" OnItemCreated="rptPendingDmsRequests_ItemCreated">
<ItemTemplate>
<uc:DmsRegisterPod runat="server" ID="ucDmsRegisterPod" />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
I'm using event.preventDefault() to stop the button action from firing, however, I'd also like to allow the action to continue if the user clicks the Confirm button. I had assumed I could just use:
$('form').submit();
In the dialog Confirm function, but this fires the validators of the other controls in the repeater/update panel. Is there a way to achieve this?

Managed to solve this, posting the answer in case it helps anyone else facing a similar problem.
I pass in the id of the control which triggered the click:
OnClientClick="confirmDecline(event, this.id)"
I then fire off __doPostBack with this id in the dialog Confirm function:
function confirmDecline(event, controlId) {
event.preventDefault();
controlId = controlId.replace(/_/g, '$');
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Confirm": function () {
$(this).dialog("close");
__doPostBack(controlId, '');
return true;
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}

Pagemethods in popuppanel does not load the second time in IE9

I have a main page which has some pagemethod called to perform some activities. A popuppanel(popuppanel content page also have pagemethods) is used within this main page to show some details. If the same is executed multiple times (i.e., opening the popup panel many times), it is working in all other browsers other than IE9 (working even in IE8). However, first time execution is successful. The code that is being used is provided below.
Scriptmanager used as follow:
<ajaxToolkit:ToolkitScriptManager runat="server" ID="TSCM1" EnablePageMethods="true" />
Script In Main Page:
function Clkd(){
var ppnl=document.getElementById("if1");
ppnl.src="Test1.aspx";
$find('<%= MPE.ClientID %>').show();
}
function Clkd2(){
var ppnl=document.getElementById("if1");
ppnl.src="";
$find('<%= MPE.ClientID %>').hide();
}
$(document).ready(function(){
PageMethods.mainPageMethod("MainTest",cbackfn);
});
function cbackfn(str){
alert(str);
}
Page method:
[System.Web.Services.WebMethod(EnableSession = true)]
public static string mainPageMethod(String mainStr)
{
return mainStr + " Ok";
}
Test1.aspx page Details (this is the page loaded inside the popup panel):
Script code below :
$(document).ready(function(){
PageMethods.Testpm("Test",fnd);
});
function fnd(str){
alert(str);
}
Page method:
[System.Web.Services.WebMethod(EnableSession = true)]
public static string Testpm(String alrt)
{
return "Ok";
}
The following error is thrown if the same is executed the second time (in IE9 only)
SCRIPT5007: Unable to set value of the property '_UpdateProgress': object is null or undefined
ScriptResource.axd?........
SCRIPT5007: Unable to get value of the property 'WebServiceProxy': object is null or undefined
Test1.aspx, line 66 character 1
SCRIPT5007: Unable to get value of the property 'DomElement': object is null or undefined
ScriptResource.axd?......, line 2 character 18851
SCRIPT5007: Unable to get value of the property 'add_init': object is null or undefined
Test1.aspx, line 97 character 122
SCRIPT438: Object doesn't support property or method 'Testpm'
Test1.aspx, line 11 character 4
Important Note: if main page does not have any pagemethods then its working fine.
please help me out from this issue..

You should have added relevant HTML, that might have helped others to help you out.
Well I used your code and added missing code and when I runt it, it is working fine in all browsers including IE9.
Please find below code:
Main Page (Default.aspx):
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
function Clkd() {
var ppnl = document.getElementById("if1");
ppnl.src = "test.aspx";
$find('<%= MPE.ClientID %>').show();
}
function Clkd2() {
var ppnl = document.getElementById("if1");
ppnl.src = "";
$find('<%= MPE.ClientID %>').hide();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager runat="server" ID="scriptmanager1">
</cc1:ToolkitScriptManager>
<asp:Panel ID="pnl1" runat="server">
<iframe id="if1"></iframe>
<asp:Button ID="btnHidePopup" runat="server" Text="Hide" />
</asp:Panel>
<asp:Button ID="btnShowPopup" runat="server" Text="Show" OnClientClick="Clkd();" />
<cc1:ModalPopupExtender ID="MPE" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnl1"
DropShadow="true" OkControlID="btnHidePopup" OnOkScript="Clkd2()" CancelControlID="btnHidePopup">
</cc1:ModalPopupExtender>
</form>
</body>
Test.aspx:
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
PageMethods.Testpm("Test", fnd);
});
function fnd(str) {
alert(str);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:ToolkitScriptManager runat="server" ID="scriptmanageriframe" EnablePageMethods="true">
</cc1:ToolkitScriptManager>
Hello World this is game.
</div>
</form>
</body>
Test.aspx.ce (Webmethod):
[System.Web.Services.WebMethod(EnableSession = true)]
public static string Testpm(String alrt)
{
return "Ok";
}
I hope it helps!

U can try with different popUp
for Example:
asp:ModalPopupExtender also available in ajaxtoolkit
jquery dialog popup.

I will prefer you to go with jquery dialog popup instead of ajaxpopup panel using the same web method in c# and jquery code you have written.

Use ClientIdMode="Static" on the MPE and use MPE id directly in $find().
ASPX Code:
<asp:ModalPopupExtender ID="modalpopup" ClientIDMode="Static" runat="server" CancelControlID="btnCancel"
OkControlID="btnOkay" TargetControlID="Button1" PopupControlID="Panel1"
Drag="true" >
</asp:ModalPopupExtender>
Javscript code:
$find('modalpopup').show(); // to show popup
$find('modalpopup').hide(); // to hide popup

IE9 has problem with pagemethods while having pagemethods in bothpage (mainpage,popuppanelpage).
you can use pagemethods in webservice(.asmx) file
i tried like below:
defaultpage.aspx
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function fnd123(str){
alert(str);
}
function objFailed1(data) {
fnd123(data);
}
function objGot1(data) {
fnd123(data.d);
}
function Clkd(){
var ppnl=document.getElementById("if1");
$.ajax({
url: "Testser.asmx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:'{"FileName":"Data from default page"}',
type: 'POST',
success:objGot1,
error: objFailed1
});
ppnl.src="Test1.aspx";
$find('MPE').show();
}
function Clkd2(){
var ppnl=document.getElementById("if1");
ppnl.src="";
$find('MPE').hide();
//PageMethods.clearPageData("/Test1.aspx",fnd1);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" EnablePageMethods="true" EnablePartialRendering="false"/>
<div>
<input type="button" onclick="javascript:Clkd();return false;" value="Click" />
<div>
<asp:ModalPopupExtender ID="MPE" PopupControlID="popupPanel" PopupDragHandleControlID="popupPanel"
runat="server" Enabled="True" TargetControlID="btnOk" CancelControlID="BtnCancel"
BackgroundCssClass="PopupBackground" Drag="True" EnableViewState=true >
</asp:ModalPopupExtender>
<asp:Button Style="display: none" ID="BtnOk" runat="server"></asp:Button>
<asp:Button Style="display: none" ID="BtnCancel" runat="server"></asp:Button>
</div>
<div>
<asp:Panel ID="popupPanel" runat="server" Style="overflow: hidden; z-index: 100000;
display: none; background-color: White; filter: alpha(opacity=100); opacity: 1.0;
height: auto;">
<asp:Panel ID="pnlLoginHeader" runat="server" CssClass="" Style="display: none;">
<table width="100%">
<tr style="text-align: center">
<td style="width: 97%;">
<p class="popupTitle">
<asp:Label runat="server" ID="lblTitle" Text=""></asp:Label>
</p>
</td>
<td style="width: 3%;">
<p style="text-align: right;">
<span id="lblPopupClose" style="cursor: pointer; color: White">Close</span>
</p>
</td>
</tr>
</table>
</asp:Panel>
<iframe id="if1" src="" class="" style=""></iframe>
</asp:Panel>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Redirect" />
</div>
</div>
</form>
</body>
Test1.aspx
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript">
function fnd(str){
alert(str);
}
function objFailed1(data) {
fnd(data);
}
function objGot1(data) {
fnd(data.d);
}
function Clkdwebservice(){
$.ajax({
url: "Testser.asmx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:'{"FileName":"Data from test page"}',
type: 'POST',
success:objGot1,
error: objFailed1
});
}
</script>
</head>
<body>
<form id="form1" runat="server" enableviewstate="false">
<asp:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" EnablePageMethods="true" />
<div>
<input type="button" onclick="javascript:Clkdwebservice();return false;" value="Click" />
<input type="button" onclick="javascript:parent.Clkd2();return false;" value="Close" />
</div>
</form>
</body>
Testser.asmx.cs
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
[ToolboxItem(false)]
public class Testser : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public String GetData(String FileName)
{
string msg = FileName;
return msg;
}
}
its working fine for me.please check it

update panel inside jquery dialog div not working [duplicate]

This question already has answers here:
jQuery UI Dialog with ASP.NET button postback
(17 answers)
Closed 9 years ago.
that's my code :
<div id="AddFriendDiv" style="display: none">
<asp:TextBox ID="FriendParamtxt" runat="server"></asp:TextBox>
<asp:UpdatePanel ID="upd" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SearchFriend_btn" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="SearchFriend_btn" runat="server" OnClick="SearchFriend_btn_Click" Value="Search" />
<asp:Repeater ID="FriendRequestRepeater" runat="server">
<ItemTemplate>
<table border="1">
<tr>
<td>
<img src='<%#Eval("PROFILE_PIC") %>' width="35px" height="35px" alt='<%#Eval("NAME") %>' />
</td>
<td>
<asp:Label ID="Name_lbl" runat="server" Text='<%#Eval("NAME") %>'></asp:Label>
</td>
<td>
<input type="hidden" id="requestFriendID_hf" /><input type="button" id="addFreind"
value="Send Request" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</div>
client side :
function SendFriendRequest() {
var dialogOption = { title: "<u>Add Friend</u>", width: 280, height: 140, modal: false, resizable: false, draggable: true,
maxHeight: 340, autoOpen: true, closeOnEscape: true
};
var DialogExtendOptions = { "close": true, "maximize": false, "minimize": true, "dblclick": 'minimize', "titlebar": 'transparent' };
$("#AddFriendDiv").dialog(dialogOption).dialogExtend(DialogExtendOptions);
$("#AddFriendDiv").show();
}
server side :
protected void SearchFriend_btn_Click(object sender, EventArgs e)
{
DataTable frdrequest= new DataTable();
int clientID =int.Parse( UserID.Value.ToString());
if (FriendParamtxt.Text != "")
{
frdrequest = SQLHelper.GetAllClientByParam(FriendParamtxt.Text, clientID);
if (frdrequest.Rows.Count > 0)
{
FriendRequestRepeater.DataSource = frdrequest;
FriendRequestRepeater.DataBind();
}
}
}
SendFriendRequest is beeing called form an a tag outside but the problem is that the button click event isn't firing when the main div is a dialog but when i changed it to normal div it work fine anyone know a solution for this ?

The problem is that jQuery UI appends the dialog to the body, rather than the form. ASP.Net controls need to be inside the form in order to function, but thankfully this is easy to fix. Modify your jQuery like so:
$("#AddFriendDiv").dialog(dialogOption)
.dialogExtend(DialogExtendOptions)
.parent().appendTo($("form:first"));
$("#AddFriendDiv").show();

This will help you
var dialog = $("#divModal").dialog({
autoOpen: false,
height: 515,
width: 900,
modal: true,
draggable: false,
resizable: false
});
dialog.parent().appendTo(jQuery("form:first"));

Dear friend if you are using ajaxtoolkite and you are using updatepanel or scriptmanager then jquery make a conflict with it so you can use the following 2 method to make your code work properly the bellow code will solve your problem
$(document).ready(function() {
// bind your jQuery events here initially
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// re-bind your jQuery events here
});

How can i handle Jquery tab close in codebehind

i use jquery tabs.
<%# register src="~/UserControls/Order/Control/OrderProductLicense.ascx" tagname="OrderProductLicense" tagprefix="uc1" %>
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
closable: true,
cache: true,
show: function() {
var selectedTab = $('#tabs').tabs('option', 'selected');
$("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
},
selected: <%= hdnSelectedTab.Value %>
});
});
</script>
<table width="100%">
<tr>
<td>
<div id="tabs">
<ul>
<asp:Repeater ID="rptTabs" runat="server">
<ItemTemplate>
<li><a href="#tabs-<%#DataBinder.Eval(Container,"ItemIndex","") %>">
<%#Eval("Id") %></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:Repeater ID="rptTabsSub" runat="server">
<ItemTemplate>
<div id="tabs-<%# DataBinder.Eval(Container, "ItemIndex", "") %>">
<uc1:OrderProductLicense ID="OrderProductLicense1" runat="server" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
</td>
</tr>
</table>
My tabs has got close button. But i want to when a person close my tab after i want to delete some data in my session list with my selected tab text. Forexample.
public void TabClosing(object sender, string tabText)
{
MySession.OrderProductIdList.RemoveAll(p => p.ItemText == tabText);
}
how can write code like this ?
Best Regards

Markup:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs({
});
$("#tabs span.ui-icon-close").on("click", function () {
var itemId = $(this).data().id;
$(this).closest("li").remove();
$("#tabs-" + itemId).remove();
$("#tabs").tabs("refresh");
$.ajax({
url: '<%= ResolveClientUrl("~/WebForm1.aspx/DeleteRecord") %>',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ id: itemId })
});
});
});
</script>
<div id="tabs">
<ul>
<asp:Repeater runat="server" ID="rptTabs">
<ItemTemplate>
<li><a href='<%# Eval("ID", "#tabs-{0}") %>'>
<%# Eval("Title") %></a> <span class="ui-icon ui-icon-close" data-id='<%# Eval("ID") %>'>Remove Tab</span>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:Repeater runat="server" ID="rptTabsSub">
<ItemTemplate>
<div id='<%# Eval("ID", "tabs-{0}") %>'>
<%# Eval("Content") %>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
Code-behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var dataSource = (from id in Enumerable.Range(0, 10)
select new { ID = id, Title = id.ToString() + " Title", Content = Guid.NewGuid().ToString() }).ToList();
rptTabs.DataSource = dataSource;
rptTabs.DataBind();
rptTabsSub.DataSource = dataSource;
rptTabsSub.DataBind();
}
}
[WebMethod]
public static void DeleteRecord(int id)
{
//delete record by id
}

Set EnablePageMethods = true in scriptmanager
<input type="button" id="btnClose" value="Close" onclick="DeleteEntryFromSession();"/>
//javascript
function DeleteEntryFromSession()
{
PageMethods.DeleteSessionEntry(para1,function(result)
{
//Success
//your closing code comes here
} ,function(error){ //error});
}
//c#
[WebMetod]
public static string DeleteSessionEntry(string para1)
{
try
{
// HttpContext.Current.Session["sessionName"]; //To Get session
//Delete Entry from Session
return "true"
}
catch(Exception)
{
throw;
}
}

colorbox + asp.net button wont postback

I'm using the colorbox modal plugin (http://colorpowered.com/colorbox/)
I've got a simple form sitting in a master page, for some reason I cannot get the submit button to post back, it doesn't do anything at all.
Seems to be a problem a few people are having, but I cant find a fix.
Here' some code I'm playing with, any clues?
Code in Masterpage
<link href="http://www.communitysectorservices.org.au/css/colorbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.communitysectorservices.org.au/js/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({ transition: "fade" });
$("a[rel='example3']").colorbox({ transition: "none", width: "700px", height: "75%" });
$("a[rel='example4']").colorbox({ slideshow: true });
$(".example5").colorbox();
$(".example6").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 });
$(".example7").colorbox({ width: "80%", height: "80%", iframe: true });
$(".example8").colorbox({ width: "600px", inline: true, href: "#inline_example1" });
$(".example9").colorbox({
onOpen: function () { alert('onOpen: colorbox is about to open'); },
onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
});
</script>
Code in the content page
<div style='display: none'>
<div id='inline_example1' style='padding: 10px; background: #fff;'>
<h2 style="color: #da5f33;">
<asp:Label ID="lblEventTitle" runat="server" Text="Label"></asp:Label></h2>
<p>
Please fill out the following form to sign up for the <b>
<asp:Label ID="lblEventTitle2" runat="server" Text="Label"></asp:Label></b></p>
<blockquote>
<p>
<b>
<asp:Label ID="lblName" runat="server" Text="Your Name" Width="120px"></asp:Label></b>
<asp:TextBox ID="txtName" runat="server" Width="350px"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidatorName" ControlToValidate="txtName"
ValidationExpression="^[a-zA-Z ]+$" runat="server" ErrorMessage="*" Style="font-size: xx-small;
font-family: Arial, Helvetica, sans-serif; color: red;"></asp:RegularExpressionValidator><asp:RequiredFieldValidator
ID="RequiredFieldValidatorName" Style="font-size: xx-small; font-family: Arial, Helvetica, sans-serif;
color: red;" ControlToValidate="txtName" Text="*" runat="server" /></p>
<p>
<b>
<asp:Label ID="lblOrganisation" runat="server" Text="Your Organisation" Width="120px"></asp:Label></b>
<asp:TextBox ID="txtOrganisation" runat="server" Width="350px"></asp:TextBox>
</p>
<p>
<b>
<asp:Label ID="lblEmail" runat="server" Text="Your Email" Width="120px"></asp:Label></b>
<asp:TextBox ID="txtEmail" runat="server" Width="350px"></asp:TextBox><asp:RegularExpressionValidator
ID="RegularExpressionValidatorEmail" ControlToValidate="txtEmail" ValidationExpression="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*#([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$"
runat="server" ErrorMessage="*" Style="font-size: xx-small; font-family: Arial, Helvetica, sans-serif;
color: red;"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorEmail" Style="font-size: xx-small;
font-family: Arial, Helvetica, sans-serif; color: red;" ControlToValidate="txtEmail"
Text="*" runat="server" /></p>
</blockquote>
<p>
<b>Secury Question</b></p>
<p>
You must answer this question correctly so we can make sure you are human.</p>
<blockquote>
<p>
<b>
<asp:Label ID="lblQuestion" runat="server" Text="5 + 5 =" Width="50px"></asp:Label></b>
<asp:TextBox ID="txtAnswer" runat="server" Width="50px"></asp:TextBox><asp:Label
ID="lblValidate" runat="server" Width="10px"></asp:Label></p>
</blockquote>
<p style="text-align: right; padding-right: 10px;">
<asp:Button ID="Button1" runat="server" Text="Register for Event" /></p>

Thanks to Dynde's lead I was able to fix it:
function appendHTML() {
if (!$box && document.forms[0]) {
init = false;
$window = $(window);
$box = $tag(div).attr({ id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : '' }).hide();
$overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
$wrap = $tag(div, "Wrapper");
$content = $tag(div, "Content").append(
$loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden'),
$loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic")),
$title = $tag(div, "Title"),
$current = $tag(div, "Current"),
$next = $tag(div, "Next"),
$prev = $tag(div, "Previous"),
$slideshow = $tag(div, "Slideshow").bind(event_open, slideshow),
$close = $tag(div, "Close")
);
$wrap.append( // The 3x3 Grid that makes up ColorBox
$tag(div).append(
$tag(div, "TopLeft"),
$topBorder = $tag(div, "TopCenter"),
$tag(div, "TopRight")
),
$tag(div, false, 'clear:left').append(
$leftBorder = $tag(div, "MiddleLeft"),
$content,
$rightBorder = $tag(div, "MiddleRight")
),
$tag(div, false, 'clear:left').append(
$tag(div, "BottomLeft"),
$bottomBorder = $tag(div, "BottomCenter"),
$tag(div, "BottomRight")
)
).find('div div').css({ 'float': 'left' });
$loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none');
$groupControls = $next.add($prev).add($current).add($slideshow);
$(document.forms[0]).append($overlay, $box.append($wrap, $loadingBay));
}
}
The only 2 lines I changed were the at the beginning and the end of the function:
if (!$box && document.forms[0]) {
and
$(document.forms[0]).append($overlay, $box.append($wrap, $loadingBay));

I'm pretty sure this:
http://onefishmedia.com/onefishmedia/post/2010/04/29/Getting-ASPNET-Server-Controls-to-work-within-Fancybox-or-Colorbox-plugins.aspx
is what you're looking for.
It happens because the colorbox div is being created outside of the form tag. There's a quick fix in the link - however, in one of the comments it also says it would be easy to implement a parameter for specifying where in the code, you want colorbox to be created - which is what I'd like to do - but it doesn't appear to me, to be so easy :/

I has the same problem and solved it on the call of colorbox, moving the colorbox element to the asp.net form:
$("a.colorbox").colorbox({
width: 600,
onOpen: function () {
$('#aspnetForm').append($('#colorbox'));
}
});