Jquery loading screen to cover a large mysql query via PHP?

Asked
Active3 hr before
Viewed126 times

5 Answers

queryjqueryloadingscreen
90%

Am I right in thinking that as long as I load the html into the page BEFORE running the query, the loading screen should display, and then once the query is finished, I can place another bit of HTML to do a meta refresh to another page (obviously a header redirect is out of the question as the headers would have already been sent).,What I'm wanting to do however is have some sort of jquery loading overlay placed into the page before the query starts, and then when the query finishes, redirect to another page (where the results will be shown).,By clicking on the export-Button of a time-taking XLS-Export a modal overlay showed up and the request for the export was sent. From that moment on, JS was constantly looking for a cookie with a specific name. On the server side the export was generated and after finishing a cookie was sent along with the XLS data. JS recognized the sent cookie and hid the overlay.,You should look into flushing output to the screen using the PHP function flush(). It'll give users an indication that something is actually happening. There are plenty of tutorials and code snippets out there that show you how to set up a JS/JQuery progress bar with flush(). One example:

You should look into flushing output to the screen using the PHP function flush(). It'll give users an indication that something is actually happening. There are plenty of tutorials and code snippets out there that show you how to set up a JS/JQuery progress bar with flush(). One example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Progress Bar</title>
</head>
<body>
<!-- Progress bar holder -->
<div id="progress" style="width:500px;border:1px solid #ccc;"></div>
<!-- Progress information -->
<div id="information" style="width"></div>
<?php
// Total processes
$total = 10;

// Loop through process
for($i=1; $i<=$total; $i++){
    // Calculate the percentation
    $percent = intval($i/$total * 100)."%";

    // Javascript for updating the progress bar and information
    echo '<script language="javascript">
    document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';background-color:#ddd;\">&nbsp;</div>";
    document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
    </script>';

    // This is for the buffer achieve the minimum size in order to flush data
    echo str_repeat(' ',1024*64);

    // Send output to browser immediately
    flush();

    // Sleep one second so we can see the delay
    sleep(1);
}

// Tell user that the process is completed
echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>';
?>
</body>
</html>
88%

You’re well familiar with pagination used with large data in web projects to view records in multiple pages. The Pagination provides quick solution for large data and good user interface but its needs to click next or previous button to view pages. Suppose if you want to view previous page then you need to click again to load previous page. ,We will create table stories to load records to display on page scroll.,In this tutorial you will learn how to load more records dynamically when scroll page using Ajax with PHP and MySQL. We will cover this tutorial in easy steps with live demo. ,We will create a PHP file db_connect.php to make connection with MySQL database.

We will create table stories to load records to display on page scroll.

CREATE TABLE IF NOT EXISTS `stories`(
   `id`
   int(11) NOT NULL AUTO_INCREMENT,
   `description`
   longtext NOT NULL,
   PRIMARY KEY(`id`)
) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 14;
load more v
72%

How to make Login with Google Account using PHP , PHP Login Registration with Email Verification using OTP , Laravel 8 Tutorial - Join Multiple Table using Eloquent Model


--
--Database: `testing`
   --

   -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

   --
   --Table structure
for table `tbl_post`
   --

CREATE TABLE `tbl_post`(
   `id`
   mediumint(8) UNSIGNED NOT NULL,
   `post_title`
   text,
   `post_description`
   text,
   `author`
   varchar(255) DEFAULT NULL,
   `datetime`
   datetime DEFAULT NULL,
   `post_image`
   varchar(150) DEFAULT NULL,
   `post_url`
   varchar(150) DEFAULT NULL
) ENGINE = InnoDB DEFAULT CHARSET = latin1;

--
--Indexes
for dumped tables
--

--
--Indexes
for table `tbl_post`
   --
ALTER TABLE `tbl_post`
ADD PRIMARY KEY(`id`);

--
--AUTO_INCREMENT
for dumped tables
--

--
--AUTO_INCREMENT
for table `tbl_post`
   --
ALTER TABLE `tbl_post`
MODIFY `id`
mediumint(8) UNSIGNED NOT NULL AUTO_INCREMENT;
load more v
65%

If the AJAX request takes more time then at the Client-side there is no visible change is been displayed and the user doesn’t know whether its request is in progress or not.,It is a good idea to show loader on the screen when you are fetching large content from your server. By this, the users know that the request is in progress and wait for completing the request.,Executes when AJAX request finished same as complete it also doesn’t depend on whether it’s successful or not.,You can display a loading image or text message on the page when the AJAX request is in progress and hide it after getting a response.

Syntax –

$.ajax({
   ...
   beforeSend: function() {
         // Statement
      }
      ...
});
load more v
75%

Note: You should also include a -webkit- prefix for browsers that do not support animation and transform properties. Click on the example to see how.,The blue thing that spins around inside the border is specified with the border-top property. You can also include border-bottom, border-left and/or border-right if you want more "spinners" (see example below).,An example of how to place the loader in the middle of the page and show "page content" when loading is complete:,The border property specifies the border size and the border color of the loader. The border-radius property transforms the loader into a circle.

Example Explained

The border property specifies the border size and the border color of the loader. The border-radius property transforms the loader into a circle.

border

Example Explained

The border property specifies the border size and the border color of the loader. The border-radius property transforms the loader into a circle.

border - radius
load more v

Other "query-jquery" queries related to "Jquery loading screen to cover a large mysql query via PHP?"