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
35 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.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.
How can I get this to work?
All-Star
53101 Points
23659 Posts
Re: Identifying the div based on partial id
May 11, 2020 05:39 PM|mgebhard|LINK
The syntax is...
Member
5 Points
35 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!
Member
5 Points
35 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
58254 Points
15675 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
35 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
53101 Points
23659 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
35 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.