The footer row in jqgrid is experiencing issues with functionality

I am trying to create a jqgrid table with three footer rows to display a total at the end of each grid. Following the guidance in this helpful post from Oleg on How to create two footer rows in jqgrid, I was able to modify the code provided to show three totals lines. It works perfectly on the initial data load, but after clicking on next page or any other action, one of the totals is repeated causing me to lose the second total.

Below is my modified code:


loadComplete: function () {//for showing default edit
    var $this = $(this), ids = $this.jqGrid('getDataIDs'), i, l = ids.length;
    //In order to have three totals
    var $this = $(this),
    $footerRow = $(this.grid.sDiv).find("tr.footrow"),
    $secondFooterRow,$thirdFooterRow;
    var f = '$'+{!optyObj.Otter_FFA_Total_Before_GST__c};
    var m = '$'+{!optyObj.Otter_FFA_Grand_Total_GST__c};
    var l = '$'+{!optyObj.Otter_FFA_Grand_Total_After_GST__c};

    $secondFooterRow = $(this.grid.sDiv).find("tr.myfootrow");
    $thirdFooterRow = $(this.grid.sDiv).find("tr.myfootrow");
    if ($secondFooterRow.length === 0) {
        // add second row of the footer if it's not exist
        $secondFooterRow = $footerRow.clone();
        $secondFooterRow.removeClass("footrow").addClass("myfootrow ui-widget-content");
        $secondFooterRow.children("td").each(function () {
            this.style.width = ""; // remove width from inline CSS
        });
        $secondFooterRow.insertAfter($footerRow);
    }      
    if ($thirdFooterRow.length === 0) {
        // add third row of the footer if it's not exist
        $thirdFooterRow = $secondFooterRow.clone();
        $thirdFooterRow.removeClass("footrow").addClass("myfootrow ui-widget-content");
        $thirdFooterRow.children("td").each(function () {
            this.style.width = ""; // remove width from inline CSS
        });
        $thirdFooterRow.insertAfter($secondFooterRow);
    }                                    
    //FIRST FOOTER ROW
    $this.jqGrid("footerData", "set", {Description1__c: "Total EX GST:", Otter_FFA_Total_Price__c:f});
    //$this.jqGrid("footerData", "set", {Description1__c: "Total XXX GST:", Otter_FFA_Total_Price__c:f});
    //SECOND FOOTER ROW
    $secondFooterRow.find(">td[aria-describedby=" + this.id + "_Description1__c]").text("GST:");
    $secondFooterRow.find(">td[aria-describedby=" + this.id + "_Otter_FFA_Total_Price__c]").text(m);
    //THIRD FOOTER ROW
    $thirdFooterRow.find(">td[aria-describedby=" + this.id + "_Description1__c]").text("Total INC GST:");
    $thirdFooterRow.find(">td[aria-describedby=" + this.id + "_Otter_FFA_Total_Price__c]").text(l);

}

Here is how it looks on the first load of the page:

    Total EX GST:   $1,141.12
    GST:            $114.14
    Total INC GST:  $1255.26

Page 2 of 2
View 11 - 12 of 12

And here is how it appears when I click on next page or take another action:

    Total EX GST:   $1,141.12
    Total INC GST:  $1255.26
    Total INC GST:  $1255.26

Page 2 of 2
View 11 - 12 of 12

Any advice would be greatly appreciated. I'm using this jqgrid in Salesforce, although ultimately it's just an HTML page. Unfortunately, as a new member in the community, I can't upload images.

Thanks.

jqueryhtmlcssjqgridsalesforce

Answer №1

For those facing a similar issue, setting a unique Id allows for easy reference and updates. Below is the solution to the aforementioned problem:


loadComplete: function () {
    var $this = $(this),
        ids = $this.jqGrid('getDataIDs'),
        i,
        l = ids.length;
    
    //Loop through each data ID
    for (i = 0; i < l; i++) {
    }

    //Creating three footer rows
    var $footerRow = $(this.grid.sDiv).find("tr.footrow"),
        $secondFooterRow = $(this.grid.sDiv).find("tr.myfootrow"),
        $thirdFooterRow = $(this.grid.sDiv).find("tr.mythirdfootrow");

    var f = {!optyObj.Otter_FFA_Total_Before_GST__c};
    var m = custFormat({!optyObj.Otter_FFA_Grand_Total_GST__c});
    var l = custFormat({!optyObj.Otter_FFA_Grand_Total_After_GST__c});

    if ($secondFooterRow.length === 0) {
        // create second footer row if it doesn't exist
        $secondFooterRow = $footerRow.clone();
        $secondFooterRow.removeClass("footrow").addClass("myfootrow ui-widget-content");
        $secondFooterRow.attr('id', 'secondFooterRow');
        $secondFooterRow.children("td").each(function () {
            this.style.width = ""; // remove width from inline CSS
        });
        $secondFooterRow.insertAfter($footerRow);
    }      

    if ($thirdFooterRow.length === 0) {
        // create third footer row if it doesn't exist
        $thirdFooterRow = $footerRow.clone();
        $thirdFooterRow.removeClass("footrow").addClass("mythirdfootrow ui-widget-content");
        $thirdFooterRow.attr('id', 'thirdFooterRow');
        $thirdFooterRow.children("td").each(function () {
            this.style.width = ""; // remove width from inline CSS
        });
        $thirdFooterRow.insertAfter($secondFooterRow);
    } 

    //Update values in footer rows
    //FIRST FOOTER ROW
    $this.jqGrid("footerData", "set", {Description1__c: "Total EX GST:", Otter_FFA_Total_Price__c:f});

    //SECOND FOOTER ROW
    $secondFooterRow.find(">td[aria-describedby=" + this.id + "_Description1__c]").text("GST:");
    $secondFooterRow.find(">td[aria-describedby=" + this.id + "_Otter_FFA_Total_Price__c]").attr('id', 'secondFooterRow_Otter_FFA_Total_Price__c').text(m);

    //THIRD FOOTER ROW
    $thirdFooterRow.find(">td[aria-describedby=" + this.id + "_Description1__c]").text("Total INC GST:");
    $thirdFooterRow.find(">td[aria-describedby=" + this.id + "_Otter_FFA_Total_Price__c]").attr('id', 'thirdFooterRow_Otter_FFA_Total_Price__c').text(l);
}
});

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

Implementing a hamburger menu and social media sharing buttons on websites

Currently working on my personal website and delving into the world of Web Development, I have some inquiries for seasoned developers. My first query revolves around incorporating a hamburger menu onto my site for easy navigation to other pages. After att ...

javascripthtmlcsswebhamburger-menu

What is the best way to use a CSS selector to target multiple divs such as block-11, block-12, and so

Here are several block IDs I have: <div id="block-11">content Here</div> <div id="block-12">content Here</div> <div id="block-13">content Here</div> <div id="block-14">conten ...

htmlcss

An innovative countdown clock for WooCommerce that dynamically displays delivery time as a customizable shortcode

After successfully creating a Wordpress shortcode with a JavaScript counter, I encountered an issue: Back End - Counter functions properly: https://i.stack.imgur.com/qyHIL.png Front End - Counter not working (no console errors...): https://i.stack.imgu ...

javascriptphpjquerywordpresswoocommerce

Shifting Elements - Navigation triggers subtle movements in CSS styles as you move across pages

I've noticed a strange issue on my website where certain elements seem to be shifting slightly when navigating between different pages. Here's a quick video clip demonstrating the problem. It appears that these elements are not staying static as ...

cssnavigationwebhtml

The AJAX callback is malfunctioning

Attempted to create a basic callback function to become familiar with it, but encountering an issue where it doesn't work upon page load. $(document).ready(getVideoId(function (response) { alert(response); })); function getVideoId(callba ...

javascriptjqueryajax

These coding languages are becoming more popular; however, the <p> tag is nowhere to be found in the slid

Inspect and Fix the Code: Missing p tag when clicked HTML Slide up/down <div class="slideme" class="center"> <h1>Hello,</h1> <p>Can you see Me</p> </div> <but ...

jquerycsshtml

How can white space be maintained using <select> and <V-for> in Vue.js?

Using select and v-for to display values can be tricky when dealing with white space, such as "a a - ". Sadly, most of the white space gets removed when the values are shown and returned to the backend. Here is the code snippet illustrating the i ...

htmlvuejs2

Enabling the use of jQuery with Angular instead of JQLite

According to the angular DOCS, if jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to AngularJS's built-in subset of jQuery, known as "jQuery lite" or jqLite. In an attemp ...

javascriptjqueryangularjsjqlite

What causes the content area of my <input> element to extend beyond the boundaries of its parent <span> element?

Please Note: I've been working on extracting code from a WordPress environment running the Salient theme. As of now, I haven't been able to simplify the issue to its core form. There is a possibility that I might figure it out myself, but I welco ...

htmlcssmarginbox-sizing

Utilizing the :before pseudo-element in input fields

I'm looking to insert some additional content before the first input field in the provided HTML markup without making any changes to the existing structure. I want to achieve this using the :before pseudo-element. Although I've attempted to do s ...

htmlcss

Tips on resolving the Cross-Origin Read Blocking (CORB) error when blocked cross-origin response while using Postman

After making a call to a third party API using Jquery's AJAX function, the console is showing the following error: The Cross-Origin Read Blocking (CORB) protocol has blocked a cross-origin response from https://example.com/assets/front/font/fonts.m ...

jqueryajaxlaravel-5.1jwtcross-origin-read-blocking

Utilize AJAX to send a file within an HTTP request

In my attempt to send a form using an Ajax request, I encountered a challenge with uploading files. Here is a snippet of my form: <form> {{csrf_field()}} <div class="form-group"> <label for="company-name">Co ...

jqueryajaxlaravel-5

JavaScript must be able to detect when the checkbox value is reversed, which is dependent on the user-entered data

Hey there, I come across a situation where users are selecting a checkbox to insert or update a row of data in a MySQL database through SparkJava/ Java. The functionality is working fine except for a minor glitch. The issue arises when the checkbox behav ...

javascriptjqueryhtmlvelocity

Delving Into the Depths of Scope in jQuery

Essentially, I have a function with the following code snippet: (function ($) { // mouseenter event for each menu item $menuItems.bind('mouseenter', function (e) {}); })(jQuery); My goal is to be able to access $menuItems from this fu ...

jqueryscopeglobal-variables

When a Vue.js datepicker is set as required, it can be submitted even if

When using the vuejs-datepicker, setting the html required attribute on input fields may not work as expected. This can lead to the form being submitted without an input value. <form> <datepicker placeholder="Select Date" required></datep ...

javascripthtmlvue.jsvuejs2vuejs-datepicker

Avoiding memory leaks and performance hiccups in canvas applications

Currently, I am utilizing a canvas to present a grid made up of interconnected dots (a common feature in many codepens and experiments), and everything functions smoothly. In order to make the canvas responsive, I encapsulated all my code generation within ...

jqueryhtmlcanvasmemory-leaks

PHP time counting script

Can a countdown script be created using PHP? Websites like 4shared.com or megaupload.com utilize a similar script that starts counting from 20 seconds to 0. I am able to see how many seconds are left on the web page before I can click on the download but ...

phpjqueryhtml

Creating a progress bar that includes hyperlinks: A step-by-step guide

Currently, I am in the process of developing an application form that consists of 9 pages of questions. Initially, I had implemented a progress bar which indicated completion by filling up 1/9 for each page completed. However, I have been informed that thi ...

htmlcssprogress-bar

Ways to display an SVG spinner prior to a substantial UI refresh

I am currently facing an issue with updating 10 apexcharts bar charts simultaneously in a Vue app. When this process occurs, it takes approximately one second to load completely, and during that time, I would like to display an svg spinner. However, the co ...

javascriptcssvue.jssvgvuejs3

What makes a solid HTML object model in Java?

Currently on the search for a Java-based HTML object model that has the capability to parse HTML (though not necessarily required) and encompass all HTML elements, as well as CSS, within an elegant object model. Hoping to find a Java equivalent of Groovy& ...

javahtmlapiobject-model