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.
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?
If something can be built using javascript, it will eventually be done.
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?
If something can be built using javascript, it will eventually be done.
Member
5 Points
34 Posts
Identifying the div based on partial id
May 11, 2020 05:30 PM|learning_to_code|LINK
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?
All-Star
47471 Points
20838 Posts
Re: Identifying the div based on partial id
May 11, 2020 05:39 PM|mgebhard|LINK
The syntax is...
$("#<%=dAddressUSBilling.ClientID%>").hide();Member
5 Points
34 Posts
Re: Identifying the div based on partial id
May 11, 2020 06:02 PM|learning_to_code|LINK
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"; } }Member
5 Points
34 Posts
Re: Identifying the div based on partial id
May 11, 2020 06:24 PM|learning_to_code|LINK
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?
All-Star
55544 Points
14272 Posts
Re: Identifying the div based on partial id
May 11, 2020 06:29 PM|bruce (sqlwork.com)|LINK
as javascript files are not processed, the following only works for javascript in the aspx file.
also if code behind set visible=false, the div will not render and the code will not work.
Member
5 Points
34 Posts
Re: Identifying the div based on partial id
May 11, 2020 07:55 PM|learning_to_code|LINK
That is correct. This javascript file is used by 6 other aspx files.
All-Star
47471 Points
20838 Posts
Re: Identifying the div based on partial id
May 11, 2020 09:52 PM|mgebhard|LINK
You can also use a class selector rather than an ID.
Member
5 Points
34 Posts
Re: Identifying the div based on partial id
May 14, 2020 06:19 PM|learning_to_code|LINK
Yes. That is correct, but the partial Id selection is now working for me. I will try that out in some other project.