unable to assign value to `visibility` or `display` properties

Question

unable to assign value to `visibility` or `display` properties

I am having an issue with a dropdownlist box in the datagrid that I need to hide or show. I can retrieve the element, but when I try to hide it, I encounter an error 'Unable to set property 'display' of undefined or null reference.' I have also attempted using visibility, but encountered a similar error. Can someone please provide guidance on how to achieve this? Thank you.

Here is my control:

<asp:dropdownList ID="dropID" runat="server" cssclass="selectColor w175 show"/>

The corresponding class in my style sheet:

.show   {
display: normal;
}    

.selectColor {
color: #333333; }       

.w175 { width:175px; }

This is my JavaScript function:

function NeedChange(id) {
 var dropID = document.getElementById(id);
  if (dropID!=undefined ){
    //dropID.style.visibility="hidden";
    dropID.style.display='none';
}
 }

javascript asp.net

Answer 1

Answer №1

Your current method faces a challenge because the ID dropID does not actually exist on the page, making it inaccessible to your JavaScript code. In asp.net, IDs for elements that display repetitive data (such as GridView, ListView, Repeater, etc.) are converted into a format like

ContentPane1_GridView1_DropDownList1_0

. As a result, in order to show or hide a specific DropDownList, you first need to determine the row number and then construct the full element ID using this pattern:

<script type="text/javascript">
    var myElement = "<%= GridView1.ClientID %>_dropID_" + rowNumber;
    // This will be transformed into something like ContentPane1_GridView1_dropID_24

    document.getElementById(myElement).style.display = "none";
</script>

The process of obtaining the row number can be complex and will vary based on the structure of your grid and the specific criteria for hiding the dropdown element.

Answer 2

Your current method faces a challenge because the ID dropID does not actually exist on the page, making it inaccessible to your JavaScript code. In asp.net, IDs for elements that display repetitive data (such as GridView, ListView, Repeater, etc.) are converted into a format like

ContentPane1_GridView1_DropDownList1_0

. As a result, in order to show or hide a specific DropDownList, you first need to determine the row number and then construct the full element ID using this pattern:

<script type="text/javascript">
    var myElement = "<%= GridView1.ClientID %>_dropID_" + rowNumber;
    // This will be transformed into something like ContentPane1_GridView1_dropID_24

    document.getElementById(myElement).style.display = "none";
</script>

The process of obtaining the row number can be complex and will vary based on the structure of your grid and the specific criteria for hiding the dropdown element.

Answer 3

Answer №2

Here is a solution that should be effective

function ModifyElement(identifier) {
var element = document.getElementById(identifier);
if (element !== undefined ){
//element.style.visibility="hidden";
$("#element").removeClass("show");
}
}

Answer 4

Here is a solution that should be effective

function ModifyElement(identifier) {
var element = document.getElementById(identifier);
if (element !== undefined ){
//element.style.visibility="hidden";
$("#element").removeClass("show");
}
}

unable to assign value to `visibility` or `display` properties

Answer №1

Answer №2

Similar questions

What is the best way to retrieve information from nested JSON objects?

What is the purpose of the .Class method in ng.core.component within ES5?

Getting the value of text from a textbox inside a FormView within an ascx file can be accomplished by accessing it in the ascx.cs file

Fluctuating Values in Array Distribution

Stop ckeditor from triggering set callback when the text is modified by an external source

Attempting to integrate a three.js OBJLoader within an HTML canvas

Generating an array by iterating through each object within an array of objects

Vuetify's v-badge showcasing an exceptionally large number in style

Guidelines for adjusting canvas dimensions based on parent div attributes

Interested in integrating Mockjax with QUnit for testing?

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

Ways to incorporate various styles on a mobile screen for a javascript-generated function

Cystoscape has ventured beyond the limits of the canvas border

Learn the steps to designing a responsive class using Angular2's ngClass feature

Uncovering the Power of Shadow DOM within HTML

Identifying the class name of SVGAnimatedString

Organize my JavaScript code by implementing a function

What is the best way to transform a string into React components that can be displayed on the screen?

Facilitate the exchange of updates and information between the server and client

Initial value preselected for radio button