leozayas
asked on
loading gif jquery
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
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
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.
ASKER
no there is no specific reason only to be more aesthetically pleasing and to stop any other input while the report is loaded....
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/
jqueryui.com/progressbar/
jqueryui.com/dialog/
ASKER
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/load ing.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(func tion() {
$('#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().appe nd(respons e);
$('#reportTable').dataTabl e({
aLengthMenu: [[10,25,50,100,150,200,300 ,400,800,1 000,100000 ], ['10','25', '50', '100', '150', '200', '300', '400', '800','1000','100000']],
});
$('#loading-div').hide();
}
});
......
#loading-div { display:block; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-image: url(../reports/images/load
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(func
$('#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().appe
$('#reportTable').dataTabl
aLengthMenu: [[10,25,50,100,150,200,300
});
$('#loading-div').hide();
}
});
......
ASKER
chris, i like the progress bar widget, how would i set that to last until the query was done?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks chris :-)