CODEWITHSUNDEEP
phpjquery
Kam
Kam

Reputation: 6008

pop up until jquery finishes processing

I am new to jquery and I need to figure out how to do the following:

I have a submit button on my page and when clicked a jquery function is executed. The function will load some information from mysql and echo a table with that information.

My problem is that this takes time and meanwhile the user is waiting or even resubmitting.

What I would like is to have a popup screen that will be displayed before I start fetching the data from mysql and removed after the data is echoed onto the page.

What would I be looking for? what is this called? how can I implement such a think.

This is my code:

<script type="text/javascript">
$(document).ready(function(){
$('#form-lecturer-login').submit(function(event){
event.preventDefault();
//I need: Display a pop up

//This is working : Code to fetch mysql data and echo a table

//I need: Remove popup
}

Here's my full code: pastebin.com/JVCfWbLD

Upvotes: 0

Views: 619

Answers (3)

user1781710
user1781710

Reputation:

Since you are actually using jQuery submit and not AJAX, the page is waiting for your server-side handler to process the data. Try this:

Put these two lines in the <header> of your page:

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">

Then modify your code like the following:

<script type="text/javascript">

       $(document).ready(function(){

           $(function() {
                $( "#dialog-modal" ).dialog({
                    height: 140,
                    modal: true,
                    autoOpen: false
           });

           $('#form-lecturer-login').submit(function(event) {
                event.preventDefault();

                $( "#dialog-modal" ).dialog( "open" );

                    //Your working processing code here.

                $( "#dialog-modal" ).dialog( "close" );
           }

       });

Then in the body of your HTML:

<div id="#dialog-modal" title="Stand by...">
  <p>Your data is loading, please stand by...</p>
</div>

Upvotes: 1

웃웃웃웃웃
웃웃웃웃웃

Reputation: 11984

The best way is to use a loading bar when the user submits. Here is a demo

http://bokehman.com/loading

Upvotes: 0

PSR
PSR

Reputation: 40338

use

 .blockUI() in jQuery .

I think this will solve your problem.

block ui

It blocks the screen until you unblock it.It is very good plug in.

Upvotes: 0

Related Questions