locked
Identifying the div based on partial id RRS feed

  • Question

  • User1266884534 posted

    Hello All,
    On a ASP .Net Page, I have two <div> elements. I want to hide and show these elements based on an action done by the user in the browser.  This is the ASPX page I have.

    <asp:UpdatePanel runat="server">
    <ContentTemplate>
    <br/>
    <dx:ASPxComboBox Caption="Country:" DropDownStyle="DropDownList" ID="cbBillingAddressCountry"
    IncrementalFilteringMode="StartsWith" runat="server" Theme="MetropolisBlue">
    <Items>
    <dx:ListEditItem Selected="True" Text="USA" Value="1" />
    <dx:ListEditItem Text="Canada" Value="2" />
    </Items>
    <ClientSideEvents SelectedIndexChanged="function(s,e){ onCountrySelectedIndexChangedBilling(s);}"></ClientSideEvents>
    </dx:ASPxComboBox>
    <br/>
    <div id="dAddressCanBilling" style="background-color:orangered" runat="server"> CANADA BILLING</div>
    <br/>
    <div id="dAddressUSBilling" style="background-color: yellowgreen" runat="server">USA BILLING </div>
    <br/><br/>
    </ContentTemplate>
    </asp:UpdatePanel>

    Please note I cannot change the runat="server" tags in the div. I can easily do a $("#dAddressCanBilling").show() to fix the issue. Unfortunately, I am not aware of the div name that will be generated at runtime. Similar code needs to be run on 6 different pages. The only consistency is that the divs will end with the word "dAddressCanBilling" and "dAddressUSBilling". This is my javascript function to show and hide.

    function onCountrySelectedIndexChangedBilling(s) {
        var cId = "0";
        if (s.GetValue() > 0) {
            cId = s.GetValue().toString();
        }
        if (cId === "2") 
    {
            $("#dAddressUSBilling").hide();
            $("#dAddressCanBilling").show();
        } else
        {
            $("#dAddressUSBilling").show();
            $("#dAddressCanBilling").hide();
        }
    }


    Obviously, it doesn't work because it cannot find the div element. There is a jQuery method to identify div based on partial names. I am trying to implement that in my code.

    $("input[id$='dAddressUSBilling']").each(function (i, el) {
             el.show(); //The show hide part doesn't work here.
         });

    How can I get this to work?

    Monday, May 11, 2020 5:30 PM

Answers

  • User1266884534 posted

    Nice!

    I went for the below approach. I will try your approach as well!

    function onCountrySelectedIndexChangedBilling(s) {
        var cId = "0";
        var cdivs = $('[id*="dAddressCanBilling"]');
        var usdiv = $("[id*='dAddressUSBilling']");
    
        if (s.GetValue() > 0) {
            cId = s.GetValue().toString();
        }
        if (cId === "2") {
            cdivs[0].style.display = "block";
            usdiv[0].style.display = "none";
        } else
        {
            cdivs[0].style.display = "none";
            usdiv[0].style.display = "block";
        }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 11, 2020 6:02 PM

All replies

  • User475983607 posted

    The syntax is...

    $("#<%=dAddressUSBilling.ClientID%>").hide();

    Monday, May 11, 2020 5:39 PM
  • User1266884534 posted

    Nice!

    I went for the below approach. I will try your approach as well!

    function onCountrySelectedIndexChangedBilling(s) {
        var cId = "0";
        var cdivs = $('[id*="dAddressCanBilling"]');
        var usdiv = $("[id*='dAddressUSBilling']");
    
        if (s.GetValue() > 0) {
            cId = s.GetValue().toString();
        }
        if (cId === "2") {
            cdivs[0].style.display = "block";
            usdiv[0].style.display = "none";
        } else
        {
            cdivs[0].style.display = "none";
            usdiv[0].style.display = "block";
        }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 11, 2020 6:02 PM
  • User1266884534 posted

    The syntax is...

    $("#<%=dAddressUSBilling.ClientID%>").hide();

    I tried this approach, but it doesn't work for me. Do you suppose, the reason could be that the javascript file containing the function is in an external file in a different folder?

    Monday, May 11, 2020 6:24 PM
  • User-474980206 posted

    as javascript files are not processed, the following only works for javascript in the aspx file.

    <%=dAddressUSBilling.ClientID%>

    also if code behind set visible=false, the div will not render and the code will not work.

    Monday, May 11, 2020 6:29 PM
  • User1266884534 posted

    as javascript files are not processed, the following only works for javascript in the aspx file.

    <%=dAddressUSBilling.ClientID%>

    also if code behind set visible=false, the div will not render and the code will not work.

    That is correct. This javascript file is used by 6 other aspx files. 

    Monday, May 11, 2020 7:55 PM
  • User475983607 posted

    That is correct. This javascript file is used by 6 other aspx files. 

    You can also use a class selector rather than an ID.  

    Monday, May 11, 2020 9:52 PM
  • User1266884534 posted

    learning_to_code

    That is correct. This javascript file is used by 6 other aspx files. 

    You can also use a class selector rather than an ID.  

    Yes. That is correct, but the partial Id selection is now working for me. I will try that out in some other project.

    Thursday, May 14, 2020 6:19 PM