Jquery: a Colorbox popup windows with input field. how do i capture input and save it back to page-using usercontrol in asp.net

Question

The following sets my stage

• vb.net
• MasterPages
• Usercontrol with defined events

This is what my usercontrol looks like:

When the user clicks the 'Approve' button, an event is fired in the usercontrol that is then intercepted in the main page to do custom code (database update, mails etc...)

This is the code (in usercontrol)-works perfectly

Protected Sub approvedcsiclicked()
RaiseEvent DCSIdecisionEvent(1)
dcsimanagerstatus = 1
showhidedcsibuttons(False)
dcsidate = String.Format(System.DateTime.Today.Date, "dd-MMM-YYYY")
dcsidatelbl.Visible = True
End Sub

When the user is clicking the 'Deny' button, i'ld like to offer the user the possibilty to enter some feedback as to why it's denied.

I was hoping to use Colorbox plugin for that.

This is what i've got under the deny button click.. -This works too , my Colorbox is getting fired.

Protected Sub denydcsiclicked()
    Page.ClientScript.RegisterStartupScript(Me.GetType, "showerror", "showdenialdcsi();", True)
    dcsimanagerstatus = 2
    showhidedcsibuttons(False)
    dcsidate = String.Format(System.DateTime.Today.Date, "dd-MMM-YYYY")
    dcsidatelbl.Visible = True
End Sub

The Questions remains: How do i get the input data back into my form so i can save and process it before the customEvent is being raised. The CustomEvent is raised after the user clicked OK in the Colorbox plugin- see code at at bottom- it carries out a 'click' on a hidden button.

  Protected Sub Hiddenbutton_Click(sender As Object, e As System.EventArgs) Handles Hiddenbutton.Click
    'this hidden button click is to raise the event of the dcsi denial
    'we can not do it normally as we need to capture first the denyreason and then raise the event
    DcsiDenyreason = denialreasonlbl.Text
    RaiseEvent DCSIdecisionEvent(2)
End Sub

When i do a debugging, i can see my mainpage and usercontrol both being loaded and unloaded

Usercontrol init: 11/08/2011 21:06:56
main Page Load : 11/08/2011 21:06:56
Main page postback : 11/08/2011 21:06:58
Usercontrol postback: 11/08/2011 21:06:58
Usercontrol unLoad : 11/08/2011 21:06:58
Main page unload : 11/08/2011 21:06:58

at the time the Colorbox /Jquery popup is showing.

I can key in data but how do i save it, so when the customevent is fired, i still know what was keyed in?

This is my popup script in codebehind.

If Not (cs.IsClientScriptBlockRegistered(clientscripttype, clientscriptname)) Then
        Dim myscript As New StringBuilder
        myscript.Append("<script type='text/javascript'> ")
        myscript.AppendLine("function showdenialdcsi()  ")
        myscript.AppendLine("{  ")
        myscript.AppendLine(" $(document).ready(function() ")
        myscript.AppendLine("                              {  ")
        myscript.AppendLine("                              $.colorbox({width:'50%' , inline: true, escKey:false, overlayClose:false, href: '#Denialreason', onLoad: function ()")
        myscript.AppendLine("                                                {")
        myscript.AppendLine("                                                $('#cboxClose').remove();")
        myscript.AppendLine("                                                }")
        myscript.AppendLine("                                         });")
        myscript.AppendLine("                               $('[id$=titleOK]').live('click', function (e) ")
        myscript.AppendLine("                                   {")
        myscript.AppendLine("                                   javascript: raisevent(); ")
        myscript.AppendLine("                                   $.fn.colorbox.close();")
        myscript.AppendLine("                                   });")
        myscript.AppendLine(" ")
        myscript.AppendLine(" function raisevent() ")
        myscript.AppendLine(" { ")
        myscript.AppendLine("   var o=document.getElementById('unchangedHidden').getAttribute('value');")
        myscript.AppendLine("   document.getElementById(o).click(); ")
        myscript.AppendLine(" } ")
        myscript.AppendLine("                               }")
        myscript.AppendLine("                   );")
        myscript.AppendLine("}  ")
        myscript.Append(" </script> ")
        cs.RegisterClientScriptBlock(clientscripttype, clientscriptname, myscript.ToString, False)
    End If

This is the html for the colorbox

<div style='display: none'>
    <div id='Denialreason' style='padding: 10px; background: #fff;'>
        <h3>
            <font color="red"><strong>Denial Reason ? :</strong></font>
        </h3>
        <p style="font-size: larger">
                        Please enter the reason. This will go back to the user. <br /> 
                        <asp:textbox ID="denialreasontxt" runat="server" Font-Bold ="true"  TextMode="MultiLine" Rows="4" Columns="50"></asp:textbox>         <br />
        </p>
        <br />
        <div class="Center_300">
            <asp:Label ID="titleOK" runat="server" CssClass="OverviewLabelGray" Width="200"><span>OK</span></asp:Label>
        </div>
    </div>
 </div>
 <a href="#" class="Denialclass" id="urlnotassigned" runat="server"></a> 

<input type="hidden" id="unchangedHidden" value="<%=Hiddenbutton.ClientID%>" />
<asp:Button ID="Hiddenbutton" runat="server" Text="" />

Answer 1

This is how i fixed it after some trials and errors.

a) popup script in Code Behind changed to

If Not (cs.IsClientScriptBlockRegistered(clientscripttype, clientscriptname)) Then
        Dim myscript As New StringBuilder
        myscript.Append("<script type='text/javascript'> ")
        myscript.AppendLine("function showdenialdcsi()  ")
        myscript.AppendLine("{  ")
        myscript.AppendLine(" $(document).ready(function() ")
        myscript.AppendLine("                              {  ")
        myscript.AppendLine("                              $.colorbox({width:'50%' , inline: true, escKey:false, overlayClose:false, href: '#Denialreason', onLoad: function ()")
        myscript.AppendLine("                                                {")
        myscript.AppendLine("                                                $('#cboxClose').remove();")
        myscript.AppendLine("                                                }")
        myscript.AppendLine("                                         });")
        myscript.AppendLine("                               $('[id$=titleOK]').live('click', function (e) ")
        myscript.AppendLine("                                   {")
        myscript.AppendLine("                                   var a= $('[id$=denialreasonlbl]');")
        myscript.AppendLine("                                   var b= $('[id$=denialreasontxt]');")
        myscript.AppendLine("                                   a.val(b.val().substring(0,150)) ; ")
        myscript.AppendLine("                                   javascript: raisevent(); ")
        myscript.AppendLine("                                   $.fn.colorbox.close();")
        myscript.AppendLine("                                   });")
        myscript.AppendLine(" ")
        myscript.AppendLine(" function raisevent() ")
        myscript.AppendLine(" { ")
        myscript.AppendLine("   var o=document.getElementById('unchangedHidden').getAttribute('value');")
        myscript.AppendLine("   document.getElementById(o).click(); ")
        myscript.AppendLine(" } ")
        myscript.AppendLine("                               }")
        myscript.AppendLine("                   );")
        myscript.AppendLine("}  ")
        myscript.Append(" </script> ")
        cs.RegisterClientScriptBlock(clientscripttype, clientscriptname, myscript.ToString, False)
    End If

b) the Deny button click changed to

Protected Sub denydcsiclicked()
  Page.ClientScript.RegisterStartupScript(Me.GetType, "showerror", "showdenialdcsi();", True)
End Sub

c) the (hidden) javascript click event changed to

Protected Sub Hiddenbutton_Click(sender As Object, e As System.EventArgs) Handles Hiddenbutton.Click
    'this hidden button click is to raise the event of the dcsi denial
    'we can not do it normally as we need to capture first the denyreason and then raise the event
    dcsimanagerstatus = 2
    managerstatus = -1
    showhidedcsibuttons(False)
    showhidemanagerbuttons(False)
    dcsidate = String.Format(System.DateTime.Today.Date, "dd-MMM-YYYY")
    dcsidatelbl.Visible = True
    RaiseEvent DCSIdecisionEvent(2)
End Sub

Bascially, when pressing the 'OK' button in the Colorobx popup I'm searching in the DOM for 2 Id's.

The Denialreasontxt is a textbox that is in the Colorbox popup. This is where i've typed in the reason. The Denialreasonlbl is a label in the mainpage where i want to copy the Colorbox's values in (trimmed to 150 char). Since the postback already happened, Jquery is able to find these objects.

The trick was to specify the denialreasonlbl as a hidden Field, so that the value it got is surviving the postback.

so, in my usercontrol, i've added

<input type="hidden" id="denialreasonlbl" runat="server" />

And then, when i do the RaiseEvent DcsidecisionEvent(2), it causes a postback. In the mainpage, i check on postback if this label contains any value or not.

            If Not IsDBNull(reader.Item("dcsidenialreason")) Then
                Approvalpanel.dcsidenyreason = reader.Item("dcsidenialreason")
                Approvalpanel.showdenialdreason()
            Else
                'check if dcsimanager did a denial and the reasontxt is in the postback page
                If Not Approvalpanel.dcsidenyreason = String.Empty Then
                    Approvalpanel.showdenialdreason()
                End If
            End If

Bingo !