Hide and show loading gif not working

Asked Jan 24 '18 at 11:01

Active Jan 24 '18 at 12:10

Viewed 228 times

I want to display a loading gif before load and hide it after load. Right now I have this:

<div id="loading-image" style="display: none">
  <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
  <span class="sr-only">Loading...</span> 
</div>

$("#82348").submit(function(event) {
  event.preventDefault();
  var form = $(this);

  $.ajax({
    type: "post",
    url: "{{ url('search') }}",
    dataType: "json",
    data: form.serialize(),
    beforeSend: function() {
      $('#searchResults').empty(); $("#loading-image").show(); 
    },
    success: function(data) {
      $("#loading-image").hide();
      // rest of ajax

However this is not working. Nothing is happening. Any suggestions?

edited Jan 24 '18 at 11:05

Rory McCrossan

331,213
40
305
339

asked Jan 24 '18 at 11:01

harunB10

4,823
15
63
107

1

Is your `.submit()` event even firing? You should probably check using `console.log()` – Mrigank Pawagi Jan 24 '18 at 11:03
And from there check that the request you send is coming back with a success code. – Rory McCrossan Jan 24 '18 at 11:04
The AJAX is working. I didn't include the whole code because it is big. My only problem is hiding and showing the div with loading animation. – harunB10 Jan 24 '18 at 11:08
Possible duplicate of [How to show loading spinner in jQuery?](https://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery) – Hamza Zafeer Jan 24 '18 at 11:10

Hide and show loading gif not working

0 Answers0