Javascript Code for toggling the visibility of a panel

I need help with a JavaScript code that can show or hide a panel depending on the data in a grid. If the grid has data, the panel should be displayed, but if the grid is empty, the panel should be hidden.

I attempted to use the following code, but it did not work as expected:

<script language="javascript" type = "text/javascript">
    var gridview = (document.getElementById("#<%= gridview1.ClientID %>")) ? true : false;
    if (gridview) {
        document.getElementById("Panel1").style.display = 'inline';
    }
    else {
        document.getElementById("Panel1").style.display = 'none';
    }
</script>
c#javascriptasp.net

Answer №1

Replace the # with the proper syntax in 

document.querySelector("<%= document.querySelector('gridview1').clientIdentifier %>")
.

Answer №2

When writing your code, consider this adjustment:

Instead of referencing ("#<%= gridview1.ClientID %>"), simply use the direct id of your grid like this:

var gridview = (document.getElementById("gridview1")) ? true : false;

Give it a try and see how it works!

Answer №3

Although I'm not well-versed in C#, my insights on the JavaScript part of the code are as follows:

  1. When using getElementById, keep in mind that it doesn't return a boolean value, but rather an object. To convert it into a boolean, use !!.
  2. Remember that getElementById only fetches the specified DOM object and not the value within it. To check for the content, look for innerText (IE, Chrome, Safari) or textValue (Firefox, Chrome, Safari). If utilizing jQuery, verify if .val() or .text() is empty.
  3. For getElementById, use the element's name without the # symbol. jQuery, however, requires the # symbol.

Hoping this clarification proves beneficial,
Maria :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to protect against form hacking on the client-side

As I contemplate the benefits and drawbacks of utilizing frameworks like VueJS, a question arises that transcends my current coding concerns. Specifically, should form validation be executed on the client side or through server-side processing by a control ...

javascriptvue.jssecurityclient-side

When jQuery is used to move rows between tables, it can interfere with

When moving rows between tables, everything seems to work fine. However, once the row is moved to the other table, all JavaScript functions related to that row stop working, and the reason remains unknown. The JavaScript code is simple - it involves takin ...

javascriptjqueryhtmltablesorter

The function parameter in Angular's ngModelChange behaves differently than $event

How can I pass a different parameter to the $event in the function? <div class='col-sm'> <label class="col-3 col-form-label">Origen</label> <div class="col-4"> <select ...

javascriptangulartypescriptfilterngfor

My desire is for every circle to shift consecutively at various intervals using Javascript

I'm looking to draw circles in a sequential manner. I am trying to create an aimbooster game similar to . Instead of drawing all the circles at once, I want each circle to appear after a few seconds. The circles I've created currently do not g ...

javascripthtmlcss

Understanding the process of reading long values within a JSON object using JSON.NET

Below is an example of a JSON object: "bookshelf": { "shelfId": 5752814017970176, "shelfName": "Novels", "description": null, "bookOrder": "[5720369633689600, 5631072867975168, 5765651641663488, ...

c#asp.netarraysjsonjson.net

creating infowindows on the fly for numerous markers

I'm struggling to populate Google InfoWindows with dynamic content. My current approach involves loading 60 markers and attaching a click event handler to each one. Upon clicking a marker, I aim to retrieve the corresponding data from a fusion table b ...

javascriptgoogle-mapsgoogle-fusion-tables

What is the best way to visually highlight the selected item in a list with a special effect?

I have a list that I'd like to enhance by adding an effect to the selected item after a click event. For instance, after clicking on the first item 'Complémentaire forfait', I want to visually highlight it to indicate that it has been selec ...

javascriptjqueryhtmlbootstrap-4

Struggling with updating state using splice method within an onClick event in React Hooks

CODE DEMO I'm facing an issue with my code snippet where it appears fine when I console.log it, but fails to set the state. The goal is to delete a box by using splice when clicked, however, something seems to be preventing it from working properly. ...

javascriptreactjsreact-hooksslice

Tips for ensuring that your website can recall which call-to-action (CTA) has been selected for redirection

I'm attempting to create a bilingual webpage in Spanish and English. My goal is to have a main page where the user selects the language, and once chosen, the page remembers the language preference for future visits instead of prompting the choice agai ...

javascripthtmlcssbutton

Using JavaScript to retrieve and compare element values for a total sum

Given two arrays, the goal is to determine if any two numbers in the array add up to 9. The function should return either true or false. For example: array1 [1, 2, 4, 9] has no pair that sums up to 9, so it returns false array2 [1, 2, 4, 5] does have a ...

javascriptarrays

Utilizing Angular's factory and $resource in your project

For my first app using Angular, I have defined my service as: angular.module('mean.testruns').factory('Testruns', ['$resource', function($resource) { return $resource('testruns/:testrunId', { testrunId: ...

javascriptangularjs

In order to perform the ListEdgeNodes operation in the Azure REST API, what specific permission needs to be granted?

Utilizing the Azure SDK for .NET, I am attempting to retrieve the list of IP addresses for CDN edge nodes. To start, I generated a service principal using this Azure CLI command: az ad sp create-for-rbac --sdk-auth The code snippet I have written is as fo ...

c#.netazurecdn

Troubleshooting date format errors when parsing two parameters in a jQuery AJAX request

Does anyone have advice on how to make an ajax call with two parameters - number and date? I encountered the following error: Warning: date_format() expects parameter 1 to be DateTimeInterface, boolean given in... Here is the HTML code involved: <di ...

javascriptphpjqueryajax

The call function in Tween.js fails to execute after adding an EventListener

I encountered an issue while using tween.0.6.2. The following code snippet (borrowed from the tween.js Getting Started page and slightly simplified) works perfectly: createjs.Tween.get(circle) .to({x: 400}, 1000, createjs.Ease.getPowInOut ...

javascripthtmltween

Exploring Entity Framework with Guids

Consider the following scenario: var foo = new Foo { Id = Guid.NewGuid(); } var id = foo.Id; // have access to the id here context.Add(foo); context.SaveChanges(); How does Guid.NewGuid() ensure that it does not produce a duplicate GUID already in my d ...

c#.netentity-frameworkguid

React causing issues when displaying PNG images on browser

Running into an issue with my React app where I am unable to render a PNG file from the "src" folder. The error message pops up on Google Chrome browser, showcasing the problem: https://i.stack.imgur.com/y8dJf.png Unfortunately, my project doesn't ha ...

javascriptreactjs

The functionality of the dropdown does not seem to be working properly when the checkbox is

So, I have a simple task where if a checkbox is selected, a drop-down should appear. If the checkbox is unselected, the dropdown should not show up. However, it seems like there's an issue with my code. Here's a snippet below to give you an idea ...

javascriptphpjqueryhtml

Error: The term "OrbitControls" is not recognized in the three

When attempting to import OrbitControls.js, I encounter the following issue: The error message Cannot use import statement outside a module is displayed. To resolve this, I add: <script type="module" src="OrbitControls.js">< ...

javascriptthree.js

How can we display the first letter of the last name and both initials in uppercase on the JavaScript console?

I'm a new student struggling with an exercise that requires writing multiple functions. The goal is to create a function that prompts the user for their first and last name, separates the names using a space, and then outputs specific initials in diff ...

javascriptarraysfunctionconsole

What sets apart +variable+ and ${variable} in JavaScript?

Just starting to code and eager to learn. While I was taking in a lecture, I came across this interesting snippet of code: var coworkers = ['go', 'hello', 'hi', 'doit']; <script type="text/javascript&q ...

javascripthtml