Ajax loading GIF not working

Question

I have a HTML form that calls a JS function to validate fields. This JS function returns false if there are any errors, otherwise returns true and adds a loading GIF to a proper DIV.

The problem is the loading GIF never appears in the browser. It just shows a blank space. The GIF path is correct. It only works if my validation function returns false instead of true after the loading GIF is added.

Here is an example of how my code looks like :

function validate()
{
  if (document.getElementById('email').value === '')
  {
    alert('Please enter your email');
    return false;
  } else {
    $('#loading_div').html('<img src="images/info-loading.gif" />');
    return true;
  }
}

Actual function is more complex, but the logic is just like this above.

Thanks !

Answer 1

It can depend on when the validate is called - if it is before the $('#loading_div') has fully loaded then it won't work.

While AJAX calls are asynchronous things like DOM renders are not - what are you trying to do while the loading gif should be displayed?

From the comments you said this is how it's being called:

<input type="Submit" id="Login" value="Login" onclick="return validate();">

This code means that when validate() returns false the button does nothing, when it returns true the submit button goes on and does its default behaviour - i.e. it submits the form. Once form submission has started the page is going to be unloaded, and so doesn't load any further resources.

What you could try is loading the spinner first, something like:

function validate() {
    if (document.getElementById('email').value === '') {
        alert('Please enter your email');
        return false;
    }  else {
        // Set the loading image
        $('#loading_div').html('<img src="images/info-loading.gif"/>');

        // Submit the form 200ms later
        var $form = $(this).parents('form');
        window.setTimeout(function() {$form.submit();}, 200);

        // Return false so that the form post back doesn't start right away.
        return false;
    }
}

Answer 2

You have syntax error. it showing in your question highlight. you did not close selector quotation. you also have extra ).

replace this:

   function validate {
    if (document.getElementById('email')).value === '') {
      alert('Please enter your email');
      return false;
    }  else {
    $('#loading_div).html('<img src="images/info-loading.gif">');
    return true;
    }
}

by:

   function validate {
    if (document.getElementById('email').value === '') {
      alert('Please enter your email');
      return false;
    }  else {

    $('#loading_div').html('<img src="images/info-loading.gif">');
        return true;
     }
   }

Answer 3

You have syntax error.

 function validate() {
        if (document.getElementById('email').value === '') {
          alert('Please enter your email');
          return false;
        }  else {
        $('#loading_div').html('<img src="images/info-loading.gif"/>');
        return true;
        }
    }

Answer 4

Have you tried adding to the page to test the file path works?

Also, good practice to close your elements. Add a closing slash.

Answer 5

Isn't there a ) parens too much?

if (document.getElementById('email')).value === '') {
                                    ^ what is this?

There were many more syntax errors I corrected by re-editing your code. Now it should work.

Answer 6

Another solution could be to have the loading gif in the div from the beginning, but have styled with display: none;, and show/hide it with .toggle()