Tips for preserving the toggle state of a table row using JQuery when an aspx page undergoes postback?

Question

Tips for preserving the toggle state of a table row using JQuery when an aspx page undergoes postback?

Struggling with JQuery to toggle open/close three table rows in a asp.net web form page, I have managed to use the scripts provided below. However, whenever I click on the "Submit" button causing a postback, the opened table rows close and the page reverts to its initial state. Is there a way to preserve the open table row state after the postback?

(this code utilizes jquery-2.2.4.js and font-awesome 4.7.0)

JQuery script:

<script type="text/javascript">
    $(function () {
        var $table = $("table");
        $table.find(".activator").click(function () {
            $(this).toggleClass("open");
        });
    });
</script>

CSS class:

.filterTable {margin: auto; border: 0px solid #808080;} .activator {cursor: pointer;} .activator.open, .activator:hover {background: #f8f3ba; border:1px dashed #808080} .activator.open .fa-plus-square-o, .activator .fa-minus-square-o, .activator + .hidden-row {display: none;} .activator.open + .hidden-row {display: table-row;} .activator.open .fa-minus-square-o {display: inline-block;}

HTML code:

<div>
    <table class="filterTable">
      <tbody>
        <tr class="activator">
          <td><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i> Row 1</td>
        </tr>
        <tr class="hidden-row">
          <td>Row 1 content<br /> - row 1</td>
        </tr>
        <tr class="activator">
          <td><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i> Row 2</td>
        </tr>
        <tr class="hidden-row">
          <td>Row 2 content<br /> - row 2</td>
        </tr>
        <tr class="activator">
          <td><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i> Row 3</td>
        </tr>
        <tr class="hidden-row">
          <td>Row 3 content<br /> - row 3</td>
        </tr>
       </tbody>
    </table>
    <div style="height:30px;"></div>
    <asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
</div>

Image a - initial page:

image of the initial state of page

Image b - toggled opened (when postback this state cannot maintain)

image of the table-row expanded state of page, which will not maintain after postback

jquery html css asp.net font-awesome

Answer 1

Answer №1

To ensure a javascript function is executed after a postback on an aspx page, you can utilize the following approach:

function pageLoad(){
alert('This message will pop up after each postback')
// This function will trigger after every postback 
// You can set the row state in a hidden field upon clicking a table row, and then check the hidden field value to toggle the rows postback
}

Answer 2

To ensure a javascript function is executed after a postback on an aspx page, you can utilize the following approach:

function pageLoad(){
alert('This message will pop up after each postback')
// This function will trigger after every postback 
// You can set the row state in a hidden field upon clicking a table row, and then check the hidden field value to toggle the rows postback
}

Answer 3

Answer №2

If you want to remember the expanded row's index even after refreshing the page, you can utilize the power of localStorage. By storing and retrieving the index value from localStorage, you can easily toggle the desired class when needed. Here is a simple example demonstrating how to achieve this:

<script type="text/javascript>

    function storeIndex(index){
       let localStorageArray = JSON.parse(localStorage.getItem('expandedRowIndex'));
       if(!localStorageArray){
          localStorageArray = [];
       }

       if(!localStorageArray.includes(index)){
          localStorageArray.push(index)
       }

       localStorage.setItem('expandedRowIndex',JSON.stringify(localStorageArray))


    }

    function removeIndex(index){
       let localStorageArray = JSON.parse(localStorage.getItem('expandedRowIndex'));

       if(localStorageArray){
          localStorageArray = localStorageArray.filter(i => i !== index);
          localStorage.setItem('expandedRowIndex',JSON.stringify(localStorageArray))
       }
    }

    $(function () {
        var $table = $("table");
        $table.find(".activator").click(function () {
            $(this).toggleClass("open");

            const index = $(this).index('.activator')
            if($(this).hasClass("open")){
               storeIndex(index)
            }else{
               removeIndex(index)
            }
        });

        // Read stored index
        const localStorageArray = JSON.parse(localStorage.getItem('expandedRowIndex'));

        if(localStorageArray){
            localStorageArray.foreach((index) => {
                $table.find('.activator').eq(index).toggleClass("open");
            })
        }
    });
</script>

This method has not been tested yet, but it should work seamlessly. Give it a try and see if it meets your requirements. Good luck!

Answer 4

If you want to remember the expanded row's index even after refreshing the page, you can utilize the power of localStorage. By storing and retrieving the index value from localStorage, you can easily toggle the desired class when needed. Here is a simple example demonstrating how to achieve this:

<script type="text/javascript>

    function storeIndex(index){
       let localStorageArray = JSON.parse(localStorage.getItem('expandedRowIndex'));
       if(!localStorageArray){
          localStorageArray = [];
       }

       if(!localStorageArray.includes(index)){
          localStorageArray.push(index)
       }

       localStorage.setItem('expandedRowIndex',JSON.stringify(localStorageArray))


    }

    function removeIndex(index){
       let localStorageArray = JSON.parse(localStorage.getItem('expandedRowIndex'));

       if(localStorageArray){
          localStorageArray = localStorageArray.filter(i => i !== index);
          localStorage.setItem('expandedRowIndex',JSON.stringify(localStorageArray))
       }
    }

    $(function () {
        var $table = $("table");
        $table.find(".activator").click(function () {
            $(this).toggleClass("open");

            const index = $(this).index('.activator')
            if($(this).hasClass("open")){
               storeIndex(index)
            }else{
               removeIndex(index)
            }
        });

        // Read stored index
        const localStorageArray = JSON.parse(localStorage.getItem('expandedRowIndex'));

        if(localStorageArray){
            localStorageArray.foreach((index) => {
                $table.find('.activator').eq(index).toggleClass("open");
            })
        }
    });
</script>

This method has not been tested yet, but it should work seamlessly. Give it a try and see if it meets your requirements. Good luck!

Tips for preserving the toggle state of a table row using JQuery when an aspx page undergoes postback?

Answer №1

Answer №2

Similar questions

Exploring the power of jQuery autocomplete paired with getJSON

Questions and Answers - Expand/Collapse Feature for Accordions

Personalize the File upload with HTML and Javascript

Does "th:each" assign all attributes to the same column?

Transforming data from the HttpRequest.QueryString into an array of objects

Attempting to replace jquery ajax functionality with pure JavaScript fetch. Utilizing fetch to retrieve the response body

Struggling with implementing jquery Ajax and a php script to fetch information from a mysql database

Unable to activate transition-delay property when switching classes

Ways of retrieving data from a JSON file using JavaScript on a local system

Defining a Global Variable using the jQuery $(this)

Automatically populating and submitting a form after receiving search results via ajax

Tips on keeping these elements centered

Utilizing JavaScript and the Document Object Model (DOM) to display images within a

In what way are WCAG guidelines 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast connected to the text within user interface elements?

Having trouble adjusting the image size in the Semantic UI Feed Summary component

Can someone explain the purpose of adding "v=747" at the end of /site_media/base.css?v=747?

Having trouble with your Bootstrap 4 Dropdown Menu?

Clicking on a link to reveal the nearest <OL> list items

Troubleshooting layout problems caused by positioning items at window height with CSS and jQuery

What is the best way to generate a new CSRF token in LARAVEL using ajax?