Checkbox selections are not retained after navigating through pages

Every time I select a checkbox on a listing page, save it, then navigate to another page through pagination and select a checkbox there, the checkbox on my initial page gets unchecked. I've considered using AJAX to store checked checkboxes in Grails session but I'm not sure how to implement it - I am new to JavaScript and working with views. Can someone provide assistance? Here is the section where all companies are listed along with checkboxes in my GSP:

 <g:form name="company-list-form" action="listCompany">

    <div>
        <g:textField id="search-field" name="query" value="${params.query}"/>

        <span>
            <g:checkBox id="only-blockades-box" name="onlyBlockades" class="submit-on-change" value="${params.onlyBlockades}" title="Show only blockades"/>
            <label for="only-blockades-box">Only Blockades</label>
        </span>

        <g:actionSubmit value="${message(code: 'default.buttons.search', default: 'Search')}" action="listCompany" class="button_orange"/>
        <g:link action="listCompany" class="button_gray"><g:message code="default.buttons.clean" default="Clear"/></g:link>
    </div>

    <div class="padding-top">
        <table class="table_td company-list-table">
            <tbody>
            <tr class="gray2">
                <th class="first">Id</th>
                <th style="max-width: 100px;">Name</th>
                ... (remaining code omitted for brevity)
                    if (flash.message) {
                        params.errors = flash.message
                    }
                    [companyInstanceList: companyInstanceList, companyInstanceTotal: count, companySaved: params.companySaved, errors: params.errors]
                }
            

To resolve this issue and retain the checked status of checkboxes after saving, one approach could be to modify the AJAX functionality to store the checkbox state in the Grails session. This way, when navigating between pages, the checkbox selections will remain persistent. You may need to update both the client-side JavaScript and the server-side controller logic to handle this implementation.

Answer №1

When faced with a situation like this, I often turn to using DataTables. However, the approach you take will depend on the volume of data you are working with.

If your dataset is relatively small, say 1000 rows or less, a basic DataTable may suffice. But if you're dealing with larger volumes, it might be more efficient to utilize a server-side processing DataTable.

To implement a DataTable, you can forego Grails pagination altogether, assign an ID to your table, and simply create the table in JavaScript as shown below:

    <script type="text/javascript">
        $(document).ready( function() {
            $( '#companyListTable' ).DataTable();
        } );
    </script>

This way, all pagination functions are managed within the JavaScript code, and checkboxes remain intact when navigating through the table's pages.

Answer №2

If you want to customize your search parameters for pagination, you will need to create them yourself and include them in the request:

<g:paginate total="${instanceTotal}" params="${search}" />

For a more detailed explanation of how to construct these search parameters, you can refer to this post, which includes links within the comments.

In addition, if you are looking to modify pagination using jQuery by adding extra elements dynamically, such as:

var something = $('#somFIeld').val() 

You can learn how to do this by reading this answer.

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

Incorporating HTML content in email messages using a PHP mailer script

I have been exploring a way to incorporate HTML code into the email body using an AJAX PHP Form Mailer I discovered on this website: However, whenever I try to add my own HTML coding into the email body, it just displays the tags instead of rendering them ...

Guide on executing a Python script using Node.js

I have set up a node.js server on Raspberry Pi and encountered an issue when trying to run a python script from it. Despite receiving the correct output from the client, the file fails to execute in this instance involving socket.io. The socket functiona ...

Customize jQuery Autocomplete choices depending on another jQuery Autocomplete input

I need to implement a feature where users can select a company and then an employee from that company. I came across a similar question on this link, but I specifically want both inputs to be autocomplete-enabled. This is the code snippet I currently have ...

Setting the width of individual Views within a ScrollView to adjust accordingly in React Native

Is there a way to ensure that the Views inside my horizontal ScrollView have the same dimensions as the ScrollView itself? I'd like to implement paging so that swiping takes me to the next View within the ScrollView. I attempted using width : "100%" b ...

Having trouble viewing objects' content in the JavaScript console in Visual Studio 2015?

In the past, I was able to see all the content of my JavaScript objects like this: However, for some reason now, the content is not being displayed at all: I am using Visual Studio 2015 Community with Cordova and Ripple emulator. I have tried creating a ...

What methods can a server use to identify if JQuery Ajax's "withCredentials: true" option was utilized for CORS requests?

Currently, I am working on integrating CORS (Cross-origin resource sharing) into a framework. I understand that when an XMLHttpRequest request is made using Jquery's ajax(...) with the withCredentials property set to true, the server must specificall ...

Difficulty with Horizontal Mousewheel Scrolling

Struggling to implement a horizontal scrolling feature (via mousewheel) for both containers in the code below. I want this feature to be easily applied to any future container creations as well. <body> <style> #container { display: flex ...

Encountering a reference error while attempting to troubleshoot streamline.js generated JavaScript code

After successfully setting up streamline.js and generating code using _node --standalone -c stest._js, I encountered an issue. The generated code was not readable and debugging it in tools like Chrome's developer console seemed impossible. However, I ...

Issue with Empty Date Time Format in Vue2 Date-Picker

In our company, we use vue2-datepicker to manage the starting and ending times of meetings. The dates are stored in "YYYY-MM-DD HH:mm" format on the backend, but we convert them to "DD-MM-YYYY HH:mm" format when retrieving the data in the mounted() hook. T ...

The value of $parent.$index will consistently be 0 in all cases

I am currently dealing with a nested ng-repeat situation where I am attempting to determine the parent's index. Due to the fact that it is being arranged post-process, the standard ng-repeat="(step_index, step) in flow" method is not working for m ...

Steps to Export Several Fusion Charts into Individual Image Files

My webpage contains multiple charts created using the Fusion Chart library. There are three different charts on the page, and I want to export each chart as a separate PNG file. However, when I click the export button, it generates separate images of the ...

Vue.js is limited in its ability to efficiently partition code into easily loadable modules

My current issue: I am facing a challenge with splitting my vue.js code into chunks. Despite trying multiple examples from tutorials, I am unable to successfully separate the components and load them only when necessary. Whenever I attempt to divide the c ...

Having issues initializing jQuery knob on a jQuery mobile webpage

I'm trying to implement the jquery knob plugin to showcase a circular rating system, but I'm encountering difficulties in getting it to display properly. Below is the code snippet I'm using - can someone please point out what's causing ...

Attempting to perform recursion on two functions simultaneously may result in one of the functions being undefined

There is a page on my site that clients tend to keep open for long periods of time without refreshing, sometimes over 24 hours. Some of the actions on this page require a valid PHP session, so I created a simple set of functions to check this every 10 minu ...

What are the built-in modules in node.js that handle System calls?

Can you list the built-in modules in Node.js that handle system calls, such as child_process? I'm interested in learning about all the methods within these modules. Thank you! ...

The Chrome extension for the New Tab Page is taking the spotlight away from the address bar

It appears that with the latest version of Chrome, extensions that previously had the ability to override Chrome's New Tab Page and take focus away from the Omnibox no longer have this capability. Is there a different method now to give focus to an i ...

Disappearing a button once the limit is met: Utilizing Jquery

There is a button that allows users to View More Friends in groups of 16: <button class="cancel auto-btn hide-btn" id="viewAllFriends" style="display: visible;">View All Friends</button> The button's initial display setup is as follows: ...

create new Exception( "Invalid syntax, expression not recognized: " msg );

Can someone assist me in identifying the issue at hand? Error: There seems to be a syntax error, and the expression #save_property_#{result.id} is unrecognized. throw new Error( "Syntax error, unrecognized expression: " msg ); Here is the c ...

Exploring the Functionality of Cookies in Nuxt 3 API Endpoints and Middlewares

Can cookies be utilized on the server side in Nuxt 3? For instance, I need to set a cookie in an API and then access its data in middleware: // ~/server/api/testApi.ts export default defineEventHandler(event => { /* setCookie('myCookie', ...

"Efficient Querying with MYSQL XDEVAPI Through Multiple OR (II) Requests

Currently, I am utilizing the XDEVAPI and attempting to incorporate the or(||) statement in JavaScript. However, it appears to malfunction after 1 or/(||) statements have been included. I need to fetch data from the database based on 5 distinct statuses: . ...