What is the best way to conceal the jqgrid entirely while it is still loading?

Having an issue with my jqgrid. As I load the table and fetch a large amount of data from the database, the loading process naturally takes a few seconds. However, during this time, I can see the column headers without any rows or styles applied to the jqgrid.

https://i.sstatic.net/plH2r.jpg Once the data is fully loaded, the jqgrid magically changes to my desired style. I have even added a loading image to the ".ui-jqgrid .loading" class, which appears rotating during that waiting period, but the column headers still remain visible in the background.

Is there a way to completely hide the column headers and footer while the data is loading?

Thank you in advance

jquerycssjqgrid

Answer №1

If you provide a code snippet, I may be able to assist you further.

Alternatively, you can try the following approach: Hide the table initially by adding a hidden class to it, then use jQuery to remove the hidden class once the data is loaded.

CSS:

.hidden { display: none; }

HTML:

<table id="jqgrid" class="hidden"><!-- content --></table>

jQuery script:

 $(function () {
     $('#jqgrid').removeClass('hidden');
 });

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

What is the best way to keep track of the number of checked checkboxes and add them to a separate div?

I need to select multiple checkboxes from different sections, count them, and then append the same number of sections to another div. ...

javascriptjqueryhtml

AngularJS flip card animation

Exploring the new AngularJS method for animations during page transitions, I am keen on integrating a card flip effect (resembling http://jsfiddle.net/nicooprat/GDdtS/) body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: ...

javascriptcssangularjsng-animate

Toggle the menu using jQuery on unordered list items

Below is the HTML code I am using : <ul class="main-block"> <li class="firstLevel"> <a href="#category">EXAMPLE CATEGORY 1</a> <ul class="dijete"> <li class="child"> <a href="some-sub-categ ...

javascriptjqueryhtmlcss

How can I determine which component the input is coming from when I have several components of the same type?

After selecting two dates and clicking submit in the daterange picker, a callback function is triggered. I have two separate daterange pickers for SIM dates and Phone dates. How can I differentiate in the callback function when the user submits dates from ...

javascriptjqueryhtmlangularjs

Exploring a React JS option for filtering repeated elements, as an alternative to Angular

While using Angular JS, I came across the 'filter' option within ng-repeat which is useful for live search. Here's an example: <div ng-repeat="std in stdData | filter:search"> <!-- Std Items go here. --> </div> &l ...

javascriptjqueryangularjsreactjs

I am experiencing difficulties with opening an email attachment after it was successfully sent from the SMTP server in MVC

When I send a file using Ajax in FormData to the controller, I then proceed to send an email with an attachment. The email is sent successfully, but when I attempt to view it in my email account, I encounter an error message preventing me from opening the ...

jqueryajaxasp.net-mvc-5smtpclient

I am currently using jQuery autocomplete in an attempt to display the value in the textbox as a table. The data is not being retrieved from a JSON source using Ajax directly in the text

Attempting ajax with json for autocomplete using Jquery for the first time, aiming for auto-complete appearance but table-like structure. Below is the jquery code snippet: $("document").ready(function (){ $(function () { $.ajax({ url: "dum ...

javascriptjqueryjsonajaxautocomplete

Utilize jQuery function within an HTML form

I am trying to integrate my jQuery function with an HTML tag for my login form that connects to an Azure database. I want a modal pop-up to appear when the client presses the Login button, displaying a specific message based on whether the user is in the d ...

javascriptjqueryhtmlformsfunction

Find out the index of a div within an array

Curious about determining the position of a div in an argument? For instance, if there are multiple divs with the same name: <div class="woot"></div> <div class="woot"></div> <div class="woot"></div> <div class="woot ...

javascriptjqueryhtmljquery-selectors

How can I apply an underline effect when hovering over navigation links in a responsive menu?

I've successfully added an underline effect on hover for the navigation menu. However, I encountered an issue with the responsiveness of the menu. When viewed on screens smaller than 600px, the underline effect covers the entire width of the block ins ...

javascripthtmlcsswordpress

Is there a method to communicate with controls via a web interface?

I've been exploring the possibility of interacting with ASP controls from within a webmethod. My initial thought was that I could achieve this by identifying the page where the webmethod was called from and then locating and updating controls on that ...

c#jquery.netajaxwebmethod

What steps can be taken to create a seamless navigation experience that effectively emphasizes the user's current location?

Is there a way to dynamically add the "current" class to the navigation menu based on the user's current location on the page? This would make it easier for users to see which section of the site they are viewing as they scroll through. Check out this ...

javascripthtmljquery

Tips for improving the styling of a django form with mixed elements

Here are two different forms I am working with: class InitialForm(Form): trn = IntegerField(widget=NumberInput, required = False) klient = ChoiceField(choices=KLIENTS, required = False) class SecondForm(Form): faktura = CharField(max_length = ...

cssdjangodjango-forms

Using jQuery to pass multiple data-id attributes via AJAX

Having various tooltip links with distinct "data-id" attributes is a common scenario. <a href="" class id="tooltip" data-id="125">Link</a> <a href="" class id="tooltip" data-id="38">Link 2</a> In such instances, the "125" or "38" f ...

javascriptjquery

Flask does not display images in CSS files

Starting with the frontend (HTML, CSS) of my project, I then proceeded to create a Flask file with the following code: from flask import Flask, render_template app = Flask(__name__) @app.route("/", methods=["GET"]) def index(): return render_templa ...

pythonhtmlcssflask

Error message in JS and HTML is totally bizarre

My expertise in JavaScript is very limited, so the terms I use might not be entirely accurate. However, I'll do my best to explain the issue at hand. I'm facing a peculiar problem... I've been attempting to modify someone else's JS scr ...

javascriptjqueryhtmlcssapi

"Learn the process of converting a string to Time with the help of jQuery

I am working with a string that looks like this: "8:00 Am". My goal is to convert it into a time format using jQuery. Can anyone help me achieve this? ...

jqueryasp.net

Submitting a form using jquery in HTML

Below is the code I have created. It consists of a text-input field and a 'Search' button within a form. Upon clicking the search button (submitting the form), it should trigger the .submit function to carry out the necessary processing. HTML CO ...

jqueryhtmlajaxformssubmit

Guide on how to align multiple divs at the center of a container using CSS

Experimenting with centering a divider in the style of Windows metro. .container { height: 300px; width: 70%; background: #EEE; margin: 10px auto; position: relative; } .block { background: green; height: 100px; width: 10 ...

htmlcss

The jQuery show/hide functionality is malfunctioning

In my PHP code, I have the following loop: foreach ($sid as $key => $value) { $sql = " a sql query "; $vehicle->rowQuery($sql); $numRows = $vehicle->rows; while ( $data = $vehicle->result->fetch_assoc()) { $ ...

javascriptphpjquery