Utilize CSS styling for elements persistently, even following a postback event triggered by

Question

Utilize CSS styling for elements persistently, even following a postback event triggered by

In my asp.net app, I have multiple hrefs with dynamic Ids that all share the same CssClass called MyClass.

I am looking to hide these buttons based on a certain condition.

Initially, I used the .ready function:

$(document).ready(function() {
  if(condition)
    $('.MyClass').css("display","none");
});

However, the issue arises when there is a postback event since document.ready does not execute in such cases.

During postback, the button becomes visible again even though the code is placed inside the .ready function.

Is there a way to ensure that this line of code $('.MyClass').css("display","none"); persists?

I attempted to use the .live() method on button load but it did not work as expected.

Do you have any suggestions or ideas on how to handle this situation?

Thank you in advance.

asp.net jquery css

Answer 1

Answer №1

To change things up, you could take a different approach by setting the style using CSS like so:

body.specialClass .MyClass { display: none; }

Next, add the specialClass to the <body> element when the document is ready, as shown below:

$(function() {
  if(condition)
    $('body').addClass('specialClass');
});

From now on, any new elements with the class .MyClass within the <body> will have the styling of display: none.

Answer 2

To change things up, you could take a different approach by setting the style using CSS like so:

body.specialClass .MyClass { display: none; }

Next, add the specialClass to the <body> element when the document is ready, as shown below:

$(function() {
  if(condition)
    $('body').addClass('specialClass');
});

From now on, any new elements with the class .MyClass within the <body> will have the styling of display: none.

Answer 3

Answer №2

One way to achieve this is by utilizing the jQuery plugin called livequery. You can find more information about it here:

Keep in mind that live() is only used for binding events. Once you have installed the livequery plugin, you can do the following:

$('.MyClass') 
.livequery(function() { 
    $(this).css("display","none");
});

With this code snippet, any element with the class name MyClass will be hidden whenever they are detected, even if they were dynamically created from an Ajax response. This approach can also replace the current utilization of the ready function.

In certain scenarios, Nick Craver's solution might be more suitable, especially if you need to evaluate a specific condition solely during page load.

Answer 4

One way to achieve this is by utilizing the jQuery plugin called livequery. You can find more information about it here:

Keep in mind that live() is only used for binding events. Once you have installed the livequery plugin, you can do the following:

$('.MyClass') 
.livequery(function() { 
    $(this).css("display","none");
});

With this code snippet, any element with the class name MyClass will be hidden whenever they are detected, even if they were dynamically created from an Ajax response. This approach can also replace the current utilization of the ready function.

In certain scenarios, Nick Craver's solution might be more suitable, especially if you need to evaluate a specific condition solely during page load.

Utilize CSS styling for elements persistently, even following a postback event triggered by

Answer №1

Answer №2

Similar questions

Java has trouble decoding non-ASCII characters sent through Ajax

Updating comment content using Ajax

Running a CSS keyframes animation can be achieved by removing the class associated with it

CustomTooltips in ChartJS allowing for an enhanced visual presentation of data

Maintain scroll position during ajax request

Hide the Bootstrap slide menu with jQuery by clicking anywhere on the screen

Search for documents using jQuery on the page

The application of the Same Origin Policy appears to be ambiguous when utilizing the jQuery AJAX

Utilize GroupBy in JavaScript to categorize JSON data and display it within an optgroup

Switch between GeoJSON layers by using an HTML button within Mapbox GL JS, instead of relying on traditional links

CSS: Alignment of Lists with Three Items

Hover over to reveal the button after a delay

Design featuring a combination of vertical columns and a fixed image placed in

What is the method for determining the numerical worth of the px containers?

Update the value of a td element when a select option is changed in another td element within the same table row

The MVC JQuery Ajax request is not yielding any results, yet there is no error message being returned

When viewing my website on a mobile device in landscape mode, the CSS divs sized at 20% do not match the size of the div set at

How to position one div next to another using CSS and HTML

Is there a way to ajax just specific HTML table rows instead of transmitting all the form inputs?

Having trouble getting HTML to render properly in React JS on localhost using Apache server