locked
How to get client id of child object in asp:panel/ASP:formview RRS feed

  • Question

  • User358235190 posted

    I have an aspx page like so:

        <ASP:panel......>

    <ASP:formview......>

    <ASP:dropdown......>

    etc.

    I can trap onchange event of dropdown and fire javascript code.

    However, within code I need to get the value of the selected item in the dropdown and use it to enable/disable another dropdown on the same page (same ASP:formview control).

    I am developing in .net 4.5 so tried using clientidmode=static but that didn't work.

    And, because the controls are in the formview within the panel, they are not visible to the javascript code:

    var id = '<%= ("ddlDropDown").ClientID%>' 

    I've even tried FindControl() but either get a null reference error or the function returns a null.

    Can someone help me find the right path to get client ids for web server controls within other controls?

    Thanks,

    Thursday, September 22, 2016 7:27 PM

Answers

  • User283571144 posted

    Hi majorlacy,

    As far as I know, "me.parentNode.getElementsByTagName("select")[6];" this codes will focus the seventh dropdown's object.

    If you want to focus the second dropdown, I suggest you could try to use below codes:

    function EnableDPASProgID(me) {
                 var secondDdl = me.parentNode.getElementsByTagName("select")[1]; //second dropdown
                 //secondDdl.disabled = true;
                 var msg = secondDdl;
                 alert(msg);
             }

    Best regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 26, 2016 4:12 AM

All replies

  • User283571144 posted

    Hi majorlacy,

    Can someone help me find the right path to get client ids for web server controls within other controls?

    As far as I know, if you set the control inside a formview, it will changed the id show in the browser.

    Like below:

    <select name="FormView1$DropDownList1" id="FormView1_DropDownList1">
    				<option value="aaaa">aaaa</option>
    				<option value="bbbb">bbbb</option>
    			</select>

    So if you want to get this client id.

    I suggest you could use jquery end selector.

     $("[id$=_DropDownList1]")

    More details, you could refer to follow codes and link:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../scripts/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                $("[id$=_DropDownList1]").change(function () {
                    var result = $("[id$=_DropDownList1] option:selected").val();
                    alert(result);
                });
    
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel1" runat="server">
                <asp:FormView ID="FormView1" runat="server" DataKeyNames="Id" DataSourceID="SqlDataSource1">
                    <EditItemTemplate>
                        Id:
                        <asp:Label ID="IdLabel1" runat="server" Text='<%# Eval("Id") %>' />
                        <br />
                        name:
                        <asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
                        <br />
                        password:
                        <asp:TextBox ID="passwordTextBox" runat="server" Text='<%# Bind("password") %>' />
                        <br />
                        CityId:
                        <asp:TextBox ID="CityIdTextBox" runat="server" Text='<%# Bind("CityId") %>' />
                        <br />
                        <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update" />
                        &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        name:
                        <asp:TextBox ID="nameTextBox" runat="server" Text='<%# Bind("name") %>' />
                        <br />
                        password:
                        <asp:TextBox ID="passwordTextBox" runat="server" Text='<%# Bind("password") %>' />
                        <br />
                        CityId:
                        <asp:TextBox ID="CityIdTextBox" runat="server" Text='<%# Bind("CityId") %>' />
                        <br />
                        <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert" Text="Insert" />
                        &nbsp;<asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
                    </InsertItemTemplate>
                    <ItemTemplate>
                        Id:
                        <asp:Label ID="IdLabel" runat="server" Text='<%# Eval("Id") %>' />
                        <br />
                        name:
                        <asp:Label ID="nameLabel" runat="server" Text='<%# Bind("name") %>' />
                        <br />
                        password:
                        <asp:Label ID="passwordLabel" runat="server" Text='<%# Bind("password") %>' />
                        <br />
                        CityId:
                        <asp:Label ID="CityIdLabel" runat="server" Text='<%# Bind("CityId") %>' />
                        <br />
                        <asp:DropDownList ID="DropDownList1" runat="server">
                            <asp:ListItem Text="aaaa"></asp:ListItem>
                            <asp:ListItem Text="bbbb"></asp:ListItem>
                        </asp:DropDownList>
                    </ItemTemplate>
                </asp:FormView>
                <br />
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:UserConnectionString %>" SelectCommand="SELECT * FROM [UserInfo]"></asp:SqlDataSource>
            </asp:Panel>
        </div>
        </form>
    </body>
    </html>
    

    Link:https://api.jquery.com/attribute-ends-with-selector/

    Best Regards,

    Brando

    Friday, September 23, 2016 6:07 AM
  • User527778624 posted

    Hi,

    Lets assume your FormView has 2 dropdown controls, you can use getElementsByTagName() to select the second dropdown.

    function onChange(me){
    	//your condition here
    	var secondDdl = me.parentNode.getElementsByTagName("select")[1]; //second dropdown
    	secondDdl.disabled=true;
    }
    


    call onChange(this) from your first dropdown's change event.

    //code not tested.



    Friday, September 23, 2016 9:43 AM
  • User358235190 posted

    That appears not to work in my situation.

    Here is my function:

            function EnableDPASProgID(me) {
                var secondDdl = me.parentNode.getElementsByTagName("select")[6]; //second dropdown
                //secondDdl.disabled = true;
                var msg = secondDdl;
                alert(msg);
            }

    It is called correctly but the alert shows: undefined

    Friday, September 23, 2016 12:14 PM
  • User527778624 posted

    Hi,

    It is called correctly but the alert shows: undefined

    Try alert the parent and select childs count.

    function EnableDPASProgID(me) {
                //var secondDdl = me.parentNode.getElementsByTagName("select")[6]; 
                //secondDdl.disabled = true;
                //var msg = secondDdl;
                alert(me.parentNode.tagName); //parent should be form 
                alert(me.parentNode.getElementsByTagName("select").length); //child selects count
            }

    based on alert information you can adjust the code to get the required select control.

    Friday, September 23, 2016 1:28 PM
  • User283571144 posted

    Hi majorlacy,

    As far as I know, "me.parentNode.getElementsByTagName("select")[6];" this codes will focus the seventh dropdown's object.

    If you want to focus the second dropdown, I suggest you could try to use below codes:

    function EnableDPASProgID(me) {
                 var secondDdl = me.parentNode.getElementsByTagName("select")[1]; //second dropdown
                 //secondDdl.disabled = true;
                 var msg = secondDdl;
                 alert(msg);
             }

    Best regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 26, 2016 4:12 AM