locked
Show Ajax ModalPopupDialog on selection in Drop Down List RRS feed

  • Question

  • User-718146471 posted

    Hey folks, I have been fiddling with getting this popup modal dialog to appear. It works fine if I use a linkbutton click; what I am trying to do is show the modal box when I select Add Application. What I am seeing is the command $find apparently does not have .show() as an available option. Here is my code (only including the part I'm trying to fix):

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
        <title>New Request</title>
        <script type="text/javascript">
            function ddlAppNameOnChange(ddl) {
                if (ddl.value == "Add") {
                    $find("mdlpopup2").show();
                    return false;
                }
            }
        </script>
    
        ...
    
        <div>
            <asp:LinkButton ID="btnAddNewApp" runat="server" Text=""></asp:LinkButton>
            <ajax:ModalPopupExtender ID="mdlpopup2" BackgroundCssClass="modalbackground" runat="server" TargetControlID="btnAddNewApp" PopupControlID="pnlModalAddApp" CancelControlID="lnkCloseAddApp" Y="250">
            </ajax:ModalPopupExtender>
            <asp:Panel ID="pnlModalAddApp" runat="server" BorderColor="ActiveBorder" CssClass="modalpopup" BorderStyle="Solid" BorderWidth="1px" Width="650px" BackColor="White">
                <asp:DetailsView ID="dvAddNewApp" runat="server" AutoGenerateRows="False" DefaultMode="Insert" Width="650px" BackColor="White">
                    <Fields>
                        <asp:TemplateField HeaderText="Application Name" SortExpression="AppName">
                            <InsertItemTemplate>
                                <asp:TextBox ID="txtAddNewApp" runat="server" Text='<%# Bind("AppName") %>' Width="560px" />
                            </InsertItemTemplate>
                            <HeaderStyle Wrap="False" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Application Notes">
                            <InsertItemTemplate>
                                <asp:TextBox ID="txtAddAppNotes" runat="server" Rows="5" TextMode="MultiLine" Width="100%" Text='<%# Bind("AppNotes") %>' />
                            </InsertItemTemplate>
                            <HeaderStyle Wrap="False" />
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <InsertItemTemplate>
                                <asp:LinkButton ID="lnkInsertApp" runat="server" CausesValidation="false" CommandArgument="-1" OnCommand="addApp_Command"><img src="Images/insert.jpg" width="25px" height="25px" border="0" alt="Insert" />
                                </asp:LinkButton>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                            </InsertItemTemplate>
                        </asp:TemplateField>
                    </Fields>
                    <InsertRowStyle HorizontalAlign="Left" VerticalAlign="Top" Wrap="False" />
                </asp:DetailsView>
                <asp:LinkButton ID="lnkCloseAddApp" runat="server" OnClick="lnkCloseAddApp_Click">Close</asp:LinkButton>
            </asp:Panel>
        </div>
    
        ...
    
        <tr>
            <td class="auto-style6" style="vertical-align: top; text-wrap: none;">*App Name:</td>
            <td class="auto-style4" style="vertical-align: top;">
                <asp:DropDownList ID="ddlAppName" runat="server" OnChange="return ddlAppNameOnChange(this)" AutoPostBack="True" DataSourceID="dsAppListing" DataTextField="AppName" DataValueField="AppID" AppendDataBoundItems="True" OnSelectedIndexChanged="ddlAppName_SelectedIndexChanging">
                    <asp:ListItem Selected="True">-- SELECT --</asp:ListItem>
                    <asp:ListItem Text="Add Application" Value="Add"></asp:ListItem>
                </asp:DropDownList>
                <asp:SqlDataSource ID="dsAppListing" runat="server" ConnectionString="<%$ ConnectionStrings:ConnStr %>" SelectCommand="SELECT [AppID], [AppName] FROM [Applications]"></asp:SqlDataSource>
            </td>
        </tr>

    I'm using a modified version of this example:

    http://www.aspforums.net/Threads/208022/Show-AJAX-Modal-Popup-on-DropDownList-Item-selection-in-ASPNet/

    Tuesday, June 13, 2017 3:45 PM

Answers

  • User-718146471 posted

    I found the answer at this thread: https://forums.asp.net/post/4470697.aspx

    One thing I had to add was this to code behind page load:

    ddlAppName.Attributes.Add("onchange", "return Show()");
    

    Then this in the head:

    <script type="text/javascript">
         function Show() {
         document.getElementById('<%=lbAddNewApp.ClientID%>').click();
    }
    </script>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 14, 2017 5:12 PM

All replies

  • User-271186128 posted

    Hi bbcompent1,

    It works fine if I use a linkbutton click; what I am trying to do is show the modal box when I select Add Application. What I am seeing is the command $find apparently does not have .show() as an available option. Here is my code (only including the part I'm trying to fix):

    From your code, since the ModalPopupExtender control's TargetControl is the LinkButton, I suggest you could modify your code as below:

    Trigger the LinkButton click event and display the modal box.

        function ddlAppNameOnChange(ddl) {
            if (ddl.value == "Add") {
                var button = document.getElementById("btnAddNewApp");
                button.click();
                return false;
            }
        }
    

    Best regards,
    Dillion
     

    Wednesday, June 14, 2017 6:19 AM
  • User-718146471 posted

    Ok, I'll try that and get back to you shortly. Thank you!

    Wednesday, June 14, 2017 1:34 PM
  • User-718146471 posted

    Ok, tried that but got a JS error:

    0x800a138f - JavaScript runtime error: Unable to get property 'click' of undefined or null reference

    The code at this point looks like this:

            <script type="text/javascript">
                function ddlAppNameOnChange(ddl) {
                    if (ddl.value == "1") {
                        var button = document.getElementById("btnAddNewApp");
                        button.click();
                        return false;
                    }
                }
        </script>
    
    ...
    
            <asp:LinkButton ID="btnAddNewApp" runat="server" Text="Add Application" />
            <ajax:ModalPopupExtender ID="mdlAddNewApp" runat="server" PopupControlID="pnlModalAddApp" 
                TargetControlID="btnAddNewApp" CancelControlID="btnClose" 
                BackgroundCssClass="modalBackground" Y="250">
            </ajax:ModalPopupExtender>
            <asp:Panel ID="pnlModalAddApp" runat="server" BorderColor="ActiveBorder" CssClass="modalpopup" BorderStyle="Solid" BorderWidth="1px" Width="650px" BackColor="White">
    

    Wednesday, June 14, 2017 1:43 PM
  • User475983607 posted

    The script probably did not find the link button.  Try using the ClientID property.

    var button = document.getElementById("<%=btnAddNewApp.ClientID%>");

    Wednesday, June 14, 2017 2:07 PM
  • User-718146471 posted

    Is there a way to do this without postback? I have validation scripts that might be inhibiting the proper execution of the dropdownlist change call to the JS.

    Wednesday, June 14, 2017 2:54 PM
  • User-718146471 posted

    Ok, looking at this again, tried the change you suggested, still gives me a JS error:

    0x800a139e - JavaScript runtime error: Sys.ArgumentNullException: Value cannot be null.
    

    And the code:

            <script type="text/javascript">
                function ddlAppNameOnChange(ddl) {
                    if (ddl.value == "1") {
                        var btn = document.getElementById("<%=lnkAddNewApp.ClientID%>");
                        btn.click();
                        return false;
                    }
                }
        </script>
    ...
        <ajax:ToolkitScriptManager ID="tlkt1" runat="server"></ajax:ToolkitScriptManager>
    ...
        <div>
            <asp:LinkButton ID="lnkAddNewApp" runat="server" />
            <ajax:ModalPopupExtender ID="mdlAddNewApp" runat="server" PopupControlID="pnlModalAddApp" 
                TargetControlID="lnkAddNewApp" CancelControlID="btnClose" 
                BackgroundCssClass="modalBackground" Y="250">
            </ajax:ModalPopupExtender>
            <asp:Panel ID="pnlModalAddApp" runat="server" BorderColor="ActiveBorder" CssClass="modalpopup" BorderStyle="Solid" BorderWidth="1px" 
    Width="650px" BackColor="White"> <asp:DetailsView ID="dvAddNewApp" runat="server" AutoGenerateRows="False" DefaultMode="Insert" Width="650px" BackColor="White"> <Fields> <asp:TemplateField HeaderText="Application Name" SortExpression="AppName"> <InsertItemTemplate> <asp:TextBox ID="txtAddNewApp" runat="server" Text='<%# Bind("Vuln_Name") %>' Width="560px"></asp:TextBox> </InsertItemTemplate> <HeaderStyle Wrap="False" /> </asp:TemplateField> <asp:TemplateField HeaderText="Application Notes"> <InsertItemTemplate> <asp:TextBox ID="txtAddAppNotes" runat="server" Rows="5" TextMode="MultiLine" Width="100%"></asp:TextBox> </InsertItemTemplate> <HeaderStyle Wrap="False" /> </asp:TemplateField> <asp:TemplateField> <InsertItemTemplate> <asp:LinkButton ID="lnkInsertApp" runat="server" CausesValidation="false" CommandArgument="-1"
    OnCommand="addApp_Command"><img src="Images/insert.jpg" width="25px" height="25px" border="0" alt="Insert" />
    </asp:LinkButton> &nbsp;&nbsp;&nbsp;&nbsp; </InsertItemTemplate> </asp:TemplateField> </Fields> <InsertRowStyle HorizontalAlign="Left" VerticalAlign="Top" Wrap="False" /> </asp:DetailsView> <asp:LinkButton ID="lnkCloseAddApp" runat="server" OnClick="lnkCloseAddApp_Click">Close</asp:LinkButton> </asp:Panel> </div>

    Wednesday, June 14, 2017 3:02 PM
  • User-718146471 posted

    I found the answer at this thread: https://forums.asp.net/post/4470697.aspx

    One thing I had to add was this to code behind page load:

    ddlAppName.Attributes.Add("onchange", "return Show()");
    

    Then this in the head:

    <script type="text/javascript">
         function Show() {
         document.getElementById('<%=lbAddNewApp.ClientID%>').click();
    }
    </script>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 14, 2017 5:12 PM