title: How to add simple jquery loader/spinner using ajax?
body: <p>I just need a little help here about adding a simple loader/spinner in my form.
  I have a search form in my jquery. I want to include a loader/spinner image while the search is on process. After the process is done the loader will be not visible again.</p>
  
  <p>Here's my code, by the way I am using CodeIgniter.</p>
  
  <p>Here's my code when the search button is clicked:</p>
  
  <pre><code>//search
          $('#search-btn').on('click',function(){
  
              var query = $("#keyword").val();
  
              var image = "&lt;?php echo base_url()."/resources/loading/loading43.gif"; ?&gt;";
  
              $('#loading').html(' + image + ');
  
              var query_url = "&lt;?php echo site_url('item_controller/searchItem'); ?&gt;";
  
              $.ajax({
  
                  type:'POST',
                  url: query_url,
                  data:{query: $("#keyword").val()},
                  dataType:'json',
                  async: false,
                  success:function(d){
  
                      //$('.display').dataTable().fnDestroy( true );
  
                      $("#example tbody").html(""); //HERE'S MY PROBLEM, DOESN'T DISPLAY LOADER WHEN SEARCHING
  
                      for(i in d){
  
                          $("#example tbody").append("&lt;tr&gt;&lt;td style='text-align: center; color:' data-code='TRUE'&gt;" + d[i]['item_code'] + "&lt;/td&gt;&lt;td style='text-align: left' data-name='TRUE'&gt;" + d[i]['item_name'] + "&lt;/td&gt;&lt;td&gt;&lt;div style='text-align: center'&gt;&lt;input type='button' value='ADD' class='k-button' id='" + d[i]['item_code'] + "' data-item=TRUE /&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;");
  
                      }
  
                      //$("#search_result").show('blind');
  
                      $("[data-item]").on('click',function(){
  
                          var code = $(this).parents('tr').find('[data-code]').html();
                          var name = $(this).parents('tr').find('[data-name]').html();
                          // console.log(code,name);
                          $("#grid1 tbody").append("&lt;tr&gt;&lt;td style='text-align: center; width: 20%'&gt;&lt;input type='text' value=" + code + " readonly style='width:50px; background-color: transparent; border-style: none' id=code" + counter_code++ +" /&gt;&lt;/td&gt;&lt;td style='text-align: center; width: 40%'&gt;&lt;input type='text' style='width: 90%; background-color: transparent; border-style: none' value='" + name + "' id=item"+ counter_item++ +" readonly /&gt;&lt;/td&gt;&lt;td style='text-align: center'&gt;&lt;input type='text' name='qty[]' id=qty"+ counter_qty++ +" style='text-align: center; width: 50px;' /&gt;&lt;/td&gt;&lt;td style='text-align: center'&gt;&lt;div align='center'&gt;&lt;select style='width:100px; display: block' name='unit[]' id=unit"+ counter_unit++ +" &gt;&lt;option value=''&gt;----&lt;/option&gt;&lt;option value='pc/pcs'&gt;PC/PCS&lt;/option&gt;&lt;option value='BOX/BOXES'&gt;BOX/BOXES&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/td&gt;&lt;td style='text-align: center'&gt;&lt;input type='text' name='price[]' id=price"+ counter_price++ +" style='text-align: right; width: 100px;' onblur='' /&gt;&lt;/td&gt;&lt;td style='text-align: center'&gt;&lt;input type='text' name='total[]' id=total"+ counter_total++ +" style='font-family: courier; text-align: right; background-color: lightgray; color: red; width: 100px;' readonly='readonly' value='' /&gt;&lt;/td&gt;&lt;/tr&gt;");
  
                          ComputeTotal();
  
                      });
  
                      $('.display').dataTable({
                          "bPaginate": true,
                          "bLengthChange": true,
                          "bFilter": true,
                          "bSort": true,
                          "bInfo": true,
                          "bAutoWidth": false,
                          "bDestroy": true,
                          "bJQueryUI": false,
                          "bRetrieve": true,
                          "sPaginationType": "full_numbers",
                          "iDisplayLength": 25,
                          "destroy": true
                      });
  
                      //$('.display').dataTable().fnDestroy(true);
  
                      //$('.display').children().remove()
  
                  },
  
              });    
  
          });
  </code></pre>
  
  <p>Here's the search form</p>
  
  <pre><code>&lt;div id="loading"&gt;&lt;/div&gt;
  
  &lt;div id="search_result" class="k-content"&gt;
       &lt;div class="k-header" id="item-view-list" align="center"&gt;
  
          &lt;table border="0" style="width: 80%; align: left" cellpadding="10" cellspacing="10" align="left"&gt;
              &lt;tr&gt;
                  &lt;td colspan="3"&gt;
                      &lt;h5&gt;SEARCH ITEM&lt;/h5&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="width: 3%"&gt;
                      &lt;label&gt;Name/Description&lt;/label&gt;
                  &lt;/td&gt;
                  &lt;td style="width: 40%"&gt;
                      &lt;input type="text" name="keyword" id="keyword" style="width: 80%" /&gt; &lt;input type="button" value="SEARCH" id="search-btn" class="k-button" style="font-size: 12px" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;hr /&gt;
  
          &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="font-size:small; width: 100%"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
  
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;CODE&lt;/th&gt;
                      &lt;th&gt;NAME/DESCRIPTION&lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
  
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;br /&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>