locked
Unable to show loading image on ajaxstart and ajaxcomplete RRS feed

  • Question

  • User1283221234 posted

    Hi, I am unable to display the loading image during ajax calls, Below is my code. I am using kendo tab strip, generating dynamic html table and appending it to first div 'chart'.

    <center>
                <img id="loader" style="vertical-align: middle;height:70px;width:70px;" src="../../Content/Images/spinner.gif" />
            </center>
       
    <div id="tabStrip">
          <ul>
            <li class="k-state-active">
                Table
            </li>
            <li>
                Chart
            </li>
          </ul>
          <div id="daily_div" style="overflow: auto;">
          <table id="daily_table">
          
          </table>
          
    
    </div>
    <div id="chart">
    <h2>Chart representation for @Request.QueryString["node"]</h2>
    </div>
    </div>
    
    <script type="text/javascript">
        
        $("#tabStrip").kendoTabStrip({
            animation: {
                open: {
                    effects: "fadeIn"
                }
            }
        });
     $(document).ajaxStart(function () {
            $("#loader").show();
        });
    
        $(document).ajaxComplete(function () {
            $("#loader").hide();
        });
    
    $(function () {
          
            // get nodequery variable
            var node= getQueryVariable("node");
    
            var qry_month = getQueryVariable("month");  
    
            var enb_array = node.split(',');
    
            var d = new Date();
            var month = d.getMonth();
            var main_dates = [];
            // if month in qry variable is equal to this month, for loop for todays date -1
            if (qry_month == (month + 1)) {
                // get todays date
                var dt = d.getDate();
                if ((month + 1) < 10) {
                    month = "0" + (month + 1);
                }
                else {
                    month = month + 1;
                }
                // add heading row...
                var heading_row = "<thead><tr><th></th><th></th>";
                for (var i = 1; i <= (dt - 1); i++) {
                    var j;
                    if (i < 10) {
                        j = "0" + i;
                    }
                    else {
                        j = i;
                    }
                    var data_heading = d.getFullYear() + "/" + month + "/" + j;
                    main_dates.push(data_heading);
                    heading_row += "<th style='width:500px;' id='" + data_heading + "'><b>" + data_heading + "</b></th>";
                }
                heading_row += "</tr></thead>";
                $('#daily_table').append(heading_row);
                //$('#loader').show();
    
                load_table(heading_row,enb_array, month, main_dates);    // if commented heading is being populated and loading gif is showing....
            }
            // else if month > this month display null
    
            else {
                alert("No data to display!");
            }
    
            // load high chart too...
        });
    
    function load_table(heading_row, enb_array, month, main_dates) {
            var data_row = "" + heading_row;
    
                for (var enb = 0; enb < enb_array.length; enb++) {
                    var enodeb = enb_array[enb];
                   
                    var url = decodeURIComponent("/Home/GetDates?enodeb=" + enodeb + "&month=" + month);
                    url = url.replace(' ', '');
                    //console.log(url);
                    //$('#loader').show();
                    $.ajax({
                        type: "GET",
                        url: url,
                        async: false,
                        dataType: "json",
                        contentType: "application/json;charset=utf-8",
                       
                        success: function (response) {
                            //$('#loader').hide();
                            console.log(JSON.stringify(response));      // comment later
                            // alert(response.length);
                            for (var i = 0; i < response.length; i++) {
                                var obj = response[i];
                                //..... generate data_rows for table
                                // end of for key obj
                            }   // end of for response.length
    
                            // find heading and compare with DateUTC, if equal insert data else insert'null' and skip
    
    
                            data_row += "<tr><td><a target='_blank' href='GenerateChart?node=" + node + "'><b>" + node + "</b></b></td></tr>";
                            //console.log(data_row);
                            for (var met = 0; met < metrics.length; met++) {
                                // ...generate data row
    
                                for (var i = 0; i < main_dates.length; i++) {
                                    var pos = $.inArray(main_dates[i], DateUTC_array);
                                    if (pos != -1) {
                                        // insert values
                                        switch (metrics[met]) {
                                            
                                        }
                                    }
                                    else {
                                        // insert '-'
                                        data_row += "<td><b> - </b></td>"
                                    }
    
                                } // end of main_dates for
                                data_row += "</tr>";
                            }
    
    
    
                        },   // end of success
                        complete: function () {
                            document.getElementById("daily_table").innerHTML = data_row;
                            //$('#loader').hide();
                        }
    
    
                    }); //end of ajax call              
    
    
                }   //end of for enb length
                //data_row += "</table>";
    
                //$('#daily_table').append(data_row);
                console.log(data_row);
                
    
            }
    

    The multiple ajax calls is taking time, so I want to display a loading gif while the page loads completely...

    Any help appreciated!!Thanks!!

    Tuesday, July 22, 2014 12:33 PM

Answers

  • User1918509225 posted

    Hi aktzc,

    For your kendo UI belong to the  commerical software, I suggest that you can post your question to http://www.telerik.com/forums

     Where you can get a professional suggestion.

    Best Regards,

    Kevin Shen.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 23, 2014 1:50 AM

All replies