In a page I have a link; clicking on it opens a dialog and sets a textbox value for that dialog.

However, once I click on submit in that dialog, the textbox value is null.

Link:

<a href="#" onclick="javascript:expand('');
jQuery('#openiddialog').dialog('open'); return false;">
<img id="yahoo" class="spacehw" src="/Content/Images/spacer.gif" /></a>

Script:

<script type="text/javascript">
  jQuery(document).ready(function () {
    jQuery("#openiddialog").dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        buttons: {
           "Cancel": function () {
              $(this).dialog("close");
           }
        }
    });
});
function expand(obj) {
    $("#<%=openIdBox.ClientID %>").val(obj);
}

Dialog:

<div id="openiddialog" title="Log in using OpenID">
<p>
    <asp:Label ID="Label1" runat="server" Text="OpenID Login" />
    <asp:TextBox ID="openIdBox" EnableViewState="true" runat="server" />
    <asp:JButton Icon="ui-icon-key" ID="loginButton" runat="server" Text="Authenticate" OnClick="loginButton_Click" />
    <asp:CustomValidator runat="server" ID="openidValidator" ErrorMessage="Invalid OpenID Identifier" ControlToValidate="openIdBox" EnableViewState="false" OnServerValidate="openidValidator_ServerValidate" />
    <br />
    <asp:Label ID="loginFailedLabel" runat="server" EnableViewState="False" Text="Login failed" Visible="False" />
    <asp:Label ID="loginCanceledLabel" runat="server" EnableViewState="False" Text="Login canceled" Visible="False" />
</p>
</div>

In a page I have a link; clicking on it opens a dialog and sets a textbox value for that dialog.

However, once I click on submit in that dialog, the textbox value is null.

Link:

<a href="#" onclick="javascript:expand('https://me.yahoo.');
jQuery('#openiddialog').dialog('open'); return false;">
<img id="yahoo" class="spacehw" src="/Content/Images/spacer.gif" /></a>

Script:

<script type="text/javascript">
  jQuery(document).ready(function () {
    jQuery("#openiddialog").dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        buttons: {
           "Cancel": function () {
              $(this).dialog("close");
           }
        }
    });
});
function expand(obj) {
    $("#<%=openIdBox.ClientID %>").val(obj);
}

Dialog:

<div id="openiddialog" title="Log in using OpenID">
<p>
    <asp:Label ID="Label1" runat="server" Text="OpenID Login" />
    <asp:TextBox ID="openIdBox" EnableViewState="true" runat="server" />
    <asp:JButton Icon="ui-icon-key" ID="loginButton" runat="server" Text="Authenticate" OnClick="loginButton_Click" />
    <asp:CustomValidator runat="server" ID="openidValidator" ErrorMessage="Invalid OpenID Identifier" ControlToValidate="openIdBox" EnableViewState="false" OnServerValidate="openidValidator_ServerValidate" />
    <br />
    <asp:Label ID="loginFailedLabel" runat="server" EnableViewState="False" Text="Login failed" Visible="False" />
    <asp:Label ID="loginCanceledLabel" runat="server" EnableViewState="False" Text="Login canceled" Visible="False" />
</p>
</div>

• asp
• javascript
• jquery

2 Answers 2

I figured:

I have to add this line to append the dialog to the form, as jquery dialog appends to the body:

$("#openiddialog").parent().appendTo(jQuery("form:first"));

The entire script should now look like this:

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#openiddialog").dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        buttons: { "Cancel": function () {
            $(this).dialog("close");
        }
        }
});
$("#openiddialog").parent().appendTo(jQuery("form:first"));
});
function expand(obj) {
    $("#<%=openIdBox.ClientID %>").val(obj);
}

Why you add # before textbox ID? I think you should use :

function expand(obj) {
    $("<%=openIdBox.ClientID %>").val(obj);
}