How to load gif image while ajax content is loading and javascript

Question

I have been trying to load gif image until ajax load the data and show it. but i am feeling comforted to it.

I hope you can help me out there..this is my code for advance search.

Now i want to add loading gif for this.

$.ajax({
    type: 'POST',
    url: base_rul+'site/advancedsearch',
    data: {
        keyValues: keyValues
    },
    dataType: 'json',
    success: function(data) 
    {

        var content = ['']; 
        if(data.status=='1')
        {

            //for(var k=1;k<=2;k++){

          //for chapter1 starts
          if( data.item.chapter[1] && data.item.chapter[1].length>=1){
               for(i=0;i<data.item.chapter[1].length;i++){
                  var obj = data.item.chapter[1][i];
                  //alert(data.item.chapter[1][0].chapter_row);
                    if(data.item.chapter[1][i].chapter_row==0){
                       content.push('<h3>Chapter 18 New Health Care Occupancy</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter1 ends

         //for chapter2 starts
          if( data.item.chapter[2] && data.item.chapter[2].length>=1){
               for(i=0;i<data.item.chapter[2].length;i++){
                  var obj = data.item.chapter[2][i];
                  //alert(data.item.chapter[1][0].chapter_row);
                    if(data.item.chapter[2][i].chapter_row==0){
                       content.push('<h3>Chapter 19 Existing Health Care Occupancy</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter2 ends

            //for chapter3 starts
            if( data.item.chapter[3] && data.item.chapter[3].length>=1){
                for(i=0;i<data.item.chapter[3].length;i++){
                    var obj = data.item.chapter[3][i];

                    if(data.item.chapter[3][i].chapter_row==0){
                       content.push('<h3>Chapter 20 New Ambulatory Health Care Occupancy</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter3 ends

            //for chapter4 starts
            if( data.item.chapter[4] && data.item.chapter[4].length>=1){
                for(i=0;i<data.item.chapter[4].length;i++){
                    var obj = data.item.chapter[4][i];

                    if(data.item.chapter[4][i].chapter_row==0){
                       content.push('<h3>Chapter 21 Existing Ambulatory Health Care Occupancy</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter4 ends

            //for chapter5 starts
            if( data.item.chapter[5] && data.item.chapter[5].length>=1){
                for(i=0;i<data.item.chapter[5].length;i++){
                    var obj = data.item.chapter[5][i];

                    if(data.item.chapter[5][i].chapter_row==0){
                       content.push('<h3>Chapter 32 New Residential Board and Care</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter5 ends

            //for chapter6 starts
            if( data.item.chapter[6] && data.item.chapter[6].length>=1){
                for(i=0;i<data.item.chapter[6].length;i++){
                    var obj = data.item.chapter[6][i];

                    if(data.item.chapter[6][i].chapter_row==0){
                       content.push('<h3>Chapter 33 Existing Residential Board and Care</h3>');
                     }


                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter6 ends

            //for chapter7 starts
            if( data.item.chapter[7] && data.item.chapter[7].length>=1){
                for(i=0;i<data.item.chapter[7].length;i++){
                    var obj = data.item.chapter[7][i];

                    if(data.item.chapter[7][i].chapter_row==0){
                       content.push('<h3>Chapter 18 New Health Care Occupancies</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter7 ends

            //for chapter8 starts
            if( data.item.chapter[8] && data.item.chapter[8].length>=1){
                for(i=0;i<data.item.chapter[8].length;i++){
                    var obj = data.item.chapter[8][i];

                    if(data.item.chapter[8][i].chapter_row==0){
                       content.push('<h3>Chapter 19 Existing Health Care Occupancies</h3>');
                     }
                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter8 ends

            //for chapter9 starts
            if( data.item.chapter[9] && data.item.chapter[9].length>=1){
                for(i=0;i<data.item.chapter[9].length;i++){
                    var obj = data.item.chapter[9][i];

                    if(data.item.chapter[9][i].chapter_row==0){
                       content.push('<h3>Chapter 20 New Amulatory Health Care Occupancies</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter9 ends

            //for chapter10 starts
            if( data.item.chapter[10] && data.item.chapter[10].length>=1){
                for(i=0;i<data.item.chapter[10].length;i++){
                    var obj = data.item.chapter[10][i];

                    if(data.item.chapter[10][i].chapter_row==0){
                       content.push('<h3>Chapter 21 Existing Amulatory Health Care Occupancies</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter10 ends

            //for chapter11 starts
            if( data.item.chapter[11] && data.item.chapter[11].length>=1){
                for(i=0;i<data.item.chapter[11].length;i++){
                    var obj = data.item.chapter[11][i];

                    if(data.item.chapter[11][i].chapter_row==0){
                       content.push('<h3>Chapter 32 New Residential board</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter11 ends

            //for chapter12 starts
            if( data.item.chapter[12] && data.item.chapter[12].length>=1){
                for(i=0;i<data.item.chapter[12].length;i++){
                    var obj = data.item.chapter[12][i];

                    if(data.item.chapter[12][i].chapter_row==0){
                       content.push('<h3>Chapter 33 Existing Residential board</h3>');
                     }

                    content.push('<ul><li><div>');
                    content.push('<p>'+obj.section_number +' '+ obj.title+'</p>');
                    content.push('</div></li></ul>');

                }//end for each loop
            }//end if
            //for chapter12 ends

            //}//end k loop

        }//if condition ends
        else
        {
            content.push('<ul><li><div>');

            content.push('<p>No records found.</p>');

            content.push('</div></li></ul>');
        }
        $('#advanced_search_display').html(content.join(''));
      $('#filter').css("display","none")  ;
      $('#active_filters').css("display","none");  
    }

}); 


}//end function

You've got a lot of code duplication there. You should try to find a way to avoid that duplication. It looks like you might have tried (the `k` `for` loop), but I think you should continue trying — it'd make your code a lot cleaner. — icktoofay, Apr 05 '13 at 04:56

score 6 · Accepted Answer · answered Apr 05 '13 at 05:01

6

jQuery's ajax has a method called beforeSend, make use of it!

Example:

$.ajax({
    url: someurl.php,
    data: data,
    beforeSend: function() { $('#image_id').show(); },
    success: function() {
        $('#image_id').hide();
        // ...
    }
});

answered Apr 05 '13 at 05:01

francisco.preller

6,559
4
28
39

score 0 · Answer 2 · answered Apr 05 '13 at 05:00

You can add the image to the loading page. When ajax loads it automatically over writes the image and displays the ajax output.

<script>
   var DisplayIMge = document.getElementById("ajaxdiv");
    DisplayIMge.innerHTML = "<img src='cdn/images/ajax-loader.gif' /><h3>Please wait while we load</h3>"
</script>

Hope this will work for you!

score 0 · Answer 3 · answered Apr 05 '13 at 05:00

One way to do this is by:

Just before $.ajax({ });

Write: $("#showImage").html("<img src="url"/>");

In:

$.ajax({
    type: 'POST',
    url: base_rul+'site/advancedsearch',
    data: {
        keyValues: keyValues
    },
    dataType: 'json',
    success: function(data) 
    {
         //here add $("#showImage").html("");
         // your content here
    }
});

Before content loads, added an image and after success call cleared that image.

score 0 · Answer 4 · answered Apr 05 '13 at 05:15

And you can correct your code ( as @icktoofay say ) like this:

var aTitles = [
        'Chapter 18 New Health Care Occupancy',
        'Chapter 19 Existing Health Care Occupancy',
        ...
    ];

var outSomeResults = function(content, data, id) {
       for(var i=0; i < data.length; i++){
          var obj = data[i];
          if( obj.chapter_row == 0 ) {
             content.push('<h3>'+aTitles[id]+'</h3>');
          }

          content.push(
              '<ul><li>' +
              '<div><p>'+obj.section_number +' '+ obj.title+'</p></div>' +
              '</li></ul>'
          );
       }
}

....
success: function(data) {

    var content = ['']; 
    if(data.status=='1') {
        for(var i=0; i<data.item.chapter.length; i++ ) {
            if( data.item.chapter[i+1] && data.item.chapter[i+1].length>=1 ) {
                outSomeResults(content, data.item.chapter[i+1], i);
            }
        }
    }

How to load gif image while ajax content is loading and javascript

4 Answers4

Linked