The JQuery command to set the display property to "block" is not functioning as expected

When trying to toggle the visibility of my TextBox based on a selected value in a RadiobuttonList, I initially wrote the following code:

$("#<%= rbtnIsPFEnabled.ClientID %>").click(function () {
                pfno = $("#<%= txtPFNo.ClientID %>");
                if ($("#<%= rbtnIsPFEnabled.ClientID %> input:checked").val() == "Yes") {
                    pfno.css("dispay") = "block";
                }
                else
                    pfno.css("dispay") = "none";
            });

Although I successfully achieved my goal using JQuery.show() and JQuery.hide(), I was not completely satisfied because I wanted to understand why my initial approach failed. Furthermore, I questioned if it was possible to simplify my code by using something like this instead of repeating 

$("#<%= rbtnIsPFEnabled.ClientID %>")
a second time.

I experimented with $(this+" input:checked").val() and 

$(this.toString()+" input:checked").val()
, but unfortunately, neither worked, so I ended up duplicating the selector in my code.

javascriptjquerycssasp.net

Answer №1

$("#id").css("display", "none");
$("#id").css("display", "block");

If your pfno includes your ID

In that case, this code should do the trick

$(pfno).css("display", "none");
$(pfno).css("display", "block");

It is recommended to use FireBug for debugging purposes

EDIT:

<script type="text/javascript">
    function fun(obj) {

        if ($("#<%= rbtnIsPFEnabled.ClientID %> input:checked").val()=='Yes') {
            $("#<%= txtPFNo.ClientID %>").css("display", "block");
        }
        else {
            $("#<%= txtPFNo.ClientID %>").css("display", "none");
        }
    }


</script>  

<asp:RadioButtonList   ID="rbtnIsPFEnabled"     runat="server" >
    <asp:ListItem Text="Yes" Value="Yes" onchange="fun(this);"> </asp:ListItem>
    <asp:ListItem Text="No" Value="No" onchange="fun(this);"> </asp:ListItem>
    </asp:RadioButtonList>

    <asp:TextBox runat="server" ID="txtPFNo"/>

Answer №2

To solve this problem, you have several options using the jQuery library. For example:

$(pfno).css("display", "none"); // This is used when setting a single CSS property or in a chaining method
$(pfno).css({"display":"none"}); // This is used when setting multiple CSS properties
$(pfno).hide(); // The show/hide function also toggles between display block and none, which is commonly used in scripts

Answer №3

Hey, let's clear up some confusion:

     pfno.css("dispay") = "block";

The code above is incorrect and will not work as intended.

To set a CSS property, use 

pfno.css({ 'display' : 'block' });

Another way to set a CSS property is with pfno.css( 'display' , 'block' );. If it's still not working, check your if statement and click handler by using an alert or writing to the console for confirmation.

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

Steps to eliminate a horizontal scrollbar

It appears that I am working with CSS 2.1 as the style "overflow-x" is not present in my code. In the snippet below, I have defined headings for a grid and set the Id "pageLength" to introduce a vertical scrollbar for the grid's contents. However, thi ...

css

How to perfectly align a full-width div with a div of specific width

Consider this scenario: .d1 { width: 100px; float: left; } .d2 { width: auto; float: left; } <div class="d1">Fixed Content</div> <div class="d2">This content should expand to fill the rest of the page vertically.</div> This setu ...

csshtml

Creating visual content on a website

I'm currently working on a project where I need to showcase the results of a numerical model I am operating. My goal is to gather user input in the form of latitude/longitude coordinates, utilize php (or a similar tool) to trigger a python script that ...

javascripthtmlcssweb

CSS designed for small-screen laptops is also being utilized on iPads running Safari

To specifically target the iPad/Safari browser and accommodate some minor differences in appearance compared to windows/linux browsers, we are implementing the following HTML meta tag and style query: <meta name="viewport" content="width=device-width, ...

cssipadsafari

Modify the parameters of the apps.facebook.com URL using the Facebook API

Is there a way to modify the parameters in the URL for apps.facebook.com using JavaScript? For instance, if a user chooses a photo, can we change the URL to apps.facebook.com/myapp/?photo_id=23234? This would allow the user to easily share the link with a ...

javascriptfacebook

Trouble with React Material Select Options Failing to Populate

After iterating and producing MenuItems, I am able to see the items when I console.log, but in the UI, the dropdown appears empty. I'm puzzled as to why the Select's are not being populated. Any thoughts on this issue? Below is the supplied code ...

javascriptreactjsselectmaterial-ui

Enhance User Experience with ngDialog Modal's Multi-pane Feature for Angular

Looking at the ngDialog example, they showcase a modal with multiple 'panes' that can be scrolled through: . After going through the ngDialog guide, I couldn't find a straightforward way to achieve this. Any suggestions on how to add a butt ...

javascriptangularjsng-dialog

Guide to acquiring the webViewLink using Google Drive Api v3?

I'm having trouble locating the webViewLink. The documentation (https://developers.google.com/drive/api/v3/reference/files) states that I should receive this parameter when requesting gapi.client.drive.files.list(). However, I don't even have a c ...

javascriptvue.jsgoogle-drive-api

Utilize a Web Api controller to authenticate and verify the data input in

Currently, I am working on a web API application that includes the following form: <form id="editForm"> <input id="editid" type="hidden" name="id" /> <p><label>Numéro cnss </label&g ...

javascriptc#jqueryajaxasp.net-mvc

Can a for loop be implemented within a mongoose schema method?

Is there a way to modify this for loop so that it runs through the entire array instead of adding one by one? Any suggestions? EndorsedSkillSchema.methods = { async userEndorsedSkill(arr) { for (var i = 0; i < arr.length; i++) { const skil ...

javascriptmongoose

Updating entire DOM in javascript

Implementing undo-redo functionality in my project has proven to be quite complex, as every change affects numerous elements. I believe that saving and restoring the entire page may be the most effective solution. However, I have encountered issues with mi ...

javascriptdomreplaceundo

Comparison of single-line and multi-line CSS styles placement

There seems to be a debate among CSS developers regarding the preference for multi-line or single-line formatting. Some argue that multi-line is favored for its ease in finding specific properties within the CSS file. However, others believe that single- ...

csscoding-style

Centered iframe within a div

I am trying to center my iframe within a white box and need some assistance with this. I want the iframe to be in the middle of the white box rather than its current position at the moment. game1.html: <html> <head> <title>R ...

javascripthtml

Angular Material: Enhanced search input with a universal clear button

After searching for a cross-browser search control with a clear button similar to HTML5, I found the solution rendered by Chrome: <input type="search> The code that gave me the most relevant results can be found here. I used the standard sample w ...

javascriptcssangulartypescriptangular-material

User retrieval failed following successful passport authentication

After a successful authentication, the user is directed to the "/profile" route, as demonstrated in the code snippet below. app.get( "/auth/google/callback", passport.authenticate("google", { successRedirect: "/profile", failureRedirect: " ...

javascriptnode.jsexpressoauth-2.0passport.js

The JavaScript file failed to load

My HTML code is having trouble loading all the files. The Javascript files UserController.js and RepoController.js are not being loaded, which means they are not displayed in the developer tools source tab. When I press F5 in the network tab, the files are ...

javascripthtmlangularjsangular1.6

Tips for achieving uniform spacing between three buttons in a horizontal alignment using bootstrap 3

Is there a way to make buttons enclosed in a <div> with class="row" and each button having class="span4" only as wide as the text it contains, centered at 25%, 50%, and 75% of the width of the screen? [aaa] [bbb] [ccc] not [ aaa ][ bbb ][ ccc ] ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Having issues with ReactJS - function not functioning properly when invoked within componentDidMount() and componentDidUpdate() lifecycle methods

I have encountered an issue that has left me puzzled, and I'm hoping someone can provide some guidance on how to solve it. The task at hand involves implementing a function that adds .active classes to li elements within a navigation bar if they cont ...

javascriptreactjsadminlte

Each occurrence of a variable update will result in the storing of its value within an

I'm struggling to include a variable in an array without it changing. Every time I try to push the variable to the array, it seems to alter. i = 10; function addToArray() { let b = []; b.push(i); console.log(b); } addToArray(); The variable n ...

javascriptarrays

In a carousel slider, the height and width of divs are not set to specific dimensions

For a code snippet, you can visit this link: here The html: <html lang="en"> <head> <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet"> <link href="https://ma ...

javascriptjqueryhtmlcsstwitter-bootstrap