Ajax loading GIF не работает

Question

У меня есть HTML-форма, которая вызывает функцию JS для проверки полей. Эта функция JS возвращает false, если есть какие-либо ошибки, в противном случае возвращает true и добавляет GIF загрузки к надлежащему DIV.

Проблема в том, что GIF для загрузки никогда не появляется в браузере. Он просто показывает пустое место. Правильный путь GIF. Он работает только в том случае, если функция validation возвращает false вместо true после добавления GIF-файла загрузки.

Вот пример того, как мой код выглядит следующим образом:

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 1

Это может зависеть от того, когда называется Validate - если она до $('#loading_div') полностью загружен, то он не будет работать.

В то время как вызовы AJAX являются асинхронными вещами, такими как DOM-рендеринг, нет - что вы пытаетесь сделать, пока отображается gif загрузки?

Из комментариев вы сказали это, как его называют:

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

Этот код означает, что, когда validate() возвращает ложь кнопки ничего не делает, когда он возвращает истину кнопки передачи идет и делает его поведение по умолчанию - т.е. он представляет форму. После начала подачи формы страница будет выгружена и, таким образом, не будет загружать дополнительные ресурсы.

Что вы могли бы попробовать нагружает кок первое, что-то вроде:

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

Вы пытались добавить страницу, чтобы проверить путь к файлу?

Кроме того, хорошая практика для закрытия ваших элементов. Добавьте закрытие косой черты.

Answer 3

У вас есть синтаксическая ошибка. это показывается в вашем вопросе. вы не закрыли селекторную цитату. у вас также есть дополнительные ).

заменить это:

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; 
    } 
} 

по:

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

не А есть ли ) круглые скобки слишком много?

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

Было исправлено еще много ошибок синтаксиса путем повторного редактирования кода. Теперь это должно сработать.

Answer 5

У вас есть синтаксическая ошибка.

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 6

Другим решением может быть, чтобы иметь загрузки GIF в DIV с самого начала, но стилизованного с display: none;, и показать/скрыть это с .toggle()