Ajax loader

Ajax loader implemented to show alert at the time of page loading

cydiapomonella/templates/cydiapomonella/index.html

@@ -73,6 +73,17 @@
         $('#idTxtDateInput').removeClass('hasDatepicker');
     });
 
+    $(document).ajaxStart(function(){
+        // Show image container
+        $("#divIdAjaxLoader").show();
+    });
+
+    $(document).ajaxComplete(function(){
+        // Hide image container
+        $("#divIdAjaxLoader").hide();
+    });
+
+
     /* Function for check whether the choosed weather station is within special category (e.g. devis) */
     function isSpecialWeatherStation(paramStationId)
     {
@@ -564,6 +575,7 @@
                             resultData              = [];
                             if($.trim(data))
                             {
+                                $('#idTableWeather').show();
                                 $('#idDivHeatSum').show();
 
                                 resultData                  =   data;
@@ -587,7 +599,7 @@
                         },
                         error : function(xhr, status, error)
                         {
-                            
+                            $('#idTableWeather').hide();
                             $('#idDivHeatSum').hide();
                             alert('Please try later');
 
@@ -656,7 +668,10 @@
 
 {% block content %}
 
- 
+<div class="col-sm-10">
+    <div id='divIdAjaxLoader' class="alert alert-warning alert-dismissable" style="display: none;" ><span class=".glyphicon .glyphicon-minus-sign"></span> <center><b>Loading weather data !! If it takes long time. Talk to administrator</b> </center></div>
+</div>
+<div class="clearfix"></div>
 
 <div class="col-md-12" >
     <h1>{% trans "Calculate the risk of attack by the coddling moth" %}</h1>
@@ -710,7 +725,7 @@
     
         <div class="row">
             <div class="col-sm-10">
-                <table id="idTableWeather" class="table table-striped table-bordered dt-responsive nowrap collapsed " style="width:fit-content;">
+                <table id="idTableWeather" class="table table-striped table-bordered dt-responsive nowrap collapsed " style="width:fit-content; display: none;">
                     <thead>
                         <tr>
                             <th>{% trans "Date" %}</th>
@@ -745,7 +760,7 @@
         </form>
     </div>
     <div class="row alert alert-warning">
-    	{% trans "Heat sum, with a base temperature of 10 degrees Celcius, calculated for" %} <span id='idSpanWeatherStationName'>-</span>  {% trans "weather station for the period starting with" %}  <span id="idSpanStartDate">-</span> {% trans "and ending with" %} <span id="idSpanEndDate">--</span>  (<span id="idSpanDateDifference">-</span> {% trans "days" %}) {% trans "is" %} : <span class="label label-primary" id="idDivResultNonNegative"></span> {% trans "day degrees" %}
+    	{% trans "Heat sum, with a base temperature of 10 degrees Celcius, calculated for " %} <b><span id='idSpanWeatherStationName'>-</span></b>  {% trans "weather station for the period starting with" %}  <b><span id="idSpanStartDate">-</span></b> {% trans "and ending with" %} <b><span id="idSpanEndDate">--</span></b>  (<b><span id="idSpanDateDifference">-</span></b> {% trans "days" %}) {% trans "is" %} : <span class="label label-primary" id="idDivResultNonNegative"></span> {% trans "day degrees" %}
     </div>
 </div>