Calling VB sub from JqueryDialog

Question

So what I have is a form and part of this form will be used to create a jquery dialog. From that dialog is a button, created from asp server control, that I will click. The server control has a function in the code behind that will be called when clicked. The problem I have is that the function in the code behind is not being called. Is there something fundamental that I am missing? Here is what the aspx page look like, stripped down to the bare minimum

<head>
<script>        
     function PreviewForm() {              
            $("#emailPreview").attr("style", "");
            $("#emailPreview").dialog({
                title: "Preview",
                width: "890px",
                modal: true
            });
        }               
</script>
</head>
<body>
<form id="EmailSend" method="post" runat="server">  
    <table>
        <tr>
            <td style="text-align:right">                                                   
                <input type="button" onclick="PreviewForm();" value="Preview" />                                                   
            </td>
        </tr>
    </table>    
    <div id="emailPreview" align="center" style="display:none">
        <fieldset>
           <table>
                <tr class="Row">
                    <td class="required">Subject:</td>
                    <td><asp:Label ID="lblSubj" Runat="server" /></td>
                </tr>
                <tr>
                    <td class="field" colspan="2" style="text-align:center">                       
                       <input id="btnBack" class="button" type="button" onclick="closeDialog(false);" value="Close" />&nbsp;                           
                       <asp:Button ID="Send" class="button" Runat="server" Text="Send"/>
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>              
</form>

and the function in the code behind

Private Sub CmdSendClick(ByVal sender As System.Object, ByVal e As EventArgs) Handles Send.Click
    lblSubj.Text.Trim(), pBody)
End Sub

When I try debugging the code not thing happens, the break point was not being hit. If I were to make the button visible and click from outside the dialog box that I created then it would work fine.

EDIT

I also tried it where I hide the button outside of the dialog and then click the button once the dialog is closed. so the closeDialog function will look like this with a new input button

function closeDialog(send) {
    console.log(send);
       if (send) {
           $("#emailPreview").dialog("close");
           GetFormControl('<%=Send.ClientID%>').click();  
           console.log(send + " TRUE");
        } else {
            $("#emailPreview").dialog("close");
            console.log(send + " false");
        }                
 }


<div id="emailPreview" align="center" style="display:none">
        <fieldset>
           <table>
                <tr class="Row">
                    <td class="required">Subject:</td>
                    <td><asp:Label ID="lblSubj" Runat="server" /></td>
                </tr>
                <tr>
                    <td class="field" colspan="2" style="text-align:center">                                 
             <input id="btnBack" class="button" type="button" onclick="closeDialog(false);" value="Close" />&nbsp;
             <input type="button" onclick="closeDialog(true);" value="Send Email" />

                    </td>
                </tr>
            </table>
        </fieldset>
    </div> 
        <asp:Button ID="Send" class="button" Runat="server" Text="Send"/>             
</form>

I actually get the error

SCRIPT5007: Unable to get property 'click' of undefined or null reference

EDIT 2

As requested, also I do know about using eval, the no no of it, but I am maintaining some else's code here. So let's pretend it is ok

 function GetFormControl(fControlName) {
            var oControl = eval('document.EmailSend.' + fControlName);
            if (oControl == null)
                oControl = GetPageElement(fControlName);
            return oControl;
        }

well, since the error says the result of your GetFormControl is null/undefined, can you try replacing that with `document.getElementById('<%=Send.ClientID%>').click();`? — attila, May 06 '14 at 23:43
@attila I still get the same error. I also reied using jquery `$('#<%=Send.ClientID%>')` — Jack Thor, May 06 '14 at 23:50
I think the next step is to view the rendered html/javascript source. I don't see anything obviously wrong with the code, but you might want to double check what asp.net is actually outputting. also, I would recommend using firebug or something like that to view any other errors. — attila, May 06 '14 at 23:57
@attila I amy have found a possible solution here. http://forums.asp.net/t/1678781.aspx?How+can+we+use+server+side+controls+inside+a+JQuery+modal+popup+ — Jack Thor, May 07 '14 at 00:03

score 0 · Answer 1 · edited May 23 '17 at 12:21

The problem is that the jQuery UI Dialog function is appending the HTML for the dialog box outside of the form element. See the following question for the solution: jQuery UI Dialog with ASP.NET button postback

Answer: Change

$("#emailPreview").dialog({
    title: "Preview",
    width: "890px",
    modal: true
});

to

var diag = $("#emailPreview").dialog({
    title: "Preview",
    width: "890px",
    modal: true
});
diag.parent().appendTo(jQuery("form:first"));

Calling VB sub from JqueryDialog

1 Answers1