Solved

loading gif jquery

Posted on 2013-07-01
7
392 Views
Last Modified: 2013-07-01
I have a php file, and at the top there is a select dropdown where a user chooses a client and then an ajax call is made to the db, however this can sometimes take up to 30 seconds depending on which client they chose.

what i want to do is have a lightbox affect with a loading gif to show that the report is being generated.

any and all help is gratefully appreciated...

thx
0
Comment
Question by:leozayas
  • 4
  • 2
7 Comments
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 39291775
Is there a reason you need to use lightbox?  After all, the easiest way to do this would be just to place a div next to the dropdown with a loading .gif image with display set to none in your CSS.  Then you could use jQuery to simply add a show on click event and use a jquery hide in your AJAX upon completion.
0
 

Author Comment

by:leozayas
ID: 39291827
no there is no specific reason only to be more aesthetically pleasing and to stop any other input while the report is loaded....
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39291842
If you want to prevent access to the page while your AJAX request is running, you could always use a modal dialog from the jQuery UI library. It also includes a ProgressBar widget:

jqueryui.com/progressbar/
jqueryui.com/dialog/
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

Author Comment

by:leozayas
ID: 39291855
I added a div to the css file:

#loading-div { display:block; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-image: url(../reports/images/loading.gif); background-repeat: no-repeat; }

but it never shows.....firebug reported no problems and images is uploaded to server and in correct file

and here is the javascript:

$(document).ready(function() {
      $('#loading-div').hide();

      $('#campaign').change(function() {
            $('#loading-div').show();
            var theCampaign = $(this).val();
                  //alert(theCampaign);
            
        $.ajax({
            type: 'GET',
            url: '_get-main-report-data.php',
            data: 'theCampaign='+theCampaign,
            success: function (response) {
                        console.log(theCampaign);
                console.log(response);
                        $('#results').html('<img src="images/loading.gif" />')
                        $('#results').empty().append(response);
                        
                        $('#reportTable').dataTable({
                              aLengthMenu: [[10,25,50,100,150,200,300,400,800,1000,100000], ['10','25', '50', '100', '150', '200', '300', '400', '800','1000','100000']],
                        });
                        $('#loading-div').hide();
            }
        });
......
0
 

Author Comment

by:leozayas
ID: 39291857
chris, i like the progress bar widget, how would i set that to last until the query was done?
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39291894
You would create the dialog box and progress bar and then before your AJAX call you open the modal dialog. Once the AJAX call is complete, you close the dialog. Something along these lines:

//HTML
<button id="clicker">Open Dialog Box</button>
		
<div id="response">This is the response</div>
		
<div id="myDialog" title="Demo Modal Dialog">
	<div id="progressBar"></div>
	Please wait while we run the ajax code
</div>

Open in new window

//jQuery
$(document).ready(function() {
	//create the dialog box
	var myDialog =  $("#myDialog").dialog({
		modal: true,
		autoOpen: false
	});

	//create the progress bar
	$("#progressBar").progressbar({ value: false });

	$('#clicker').click(function() {
		//open the dialog
		myDialog.dialog("open");

		//make the AJAX call
		$.ajax({ url: "data.php" })
			.done(function(response) {
				//AJAX call is finished so update the DOM
				$('#response').html(response);
				//close the dialog box
				myDialog.dialog("close");
			});
	});
});

Open in new window

0
 

Author Closing Comment

by:leozayas
ID: 39291911
thanks chris :-)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
replacing inline javascript with jquery 4 43
Put POST values into cookies. 14 28
Glitching Slide Show 19 26
Add somewhat of a wildcard to your javascript 12 30
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question