2016-09-14 3 views
0

Хорошо, коротко короткая история, я пытаюсь скрыть div внутри функции успеха Ajax в зависимости от того, является ли она видимой или нет. Но не понимаю, почему он не работает. Я могу настроить его, чтобы скрыть просто и который работает, но в консоли, когда я проверяю, я обнаружил, что он продолжает устанавливать div на display:none, даже если он уже скрыт.Проверка видимости div, не работающего внутри функции успеха ajax

JS

$(document).ready(function() { 
      $('#loading').show(); 
      setInterval(function() { 
       $.ajax({ 
        type: "GET", 
        url: "generate_list.php", 
        success: function (result) { 
         //$('#loading').hide(); 
         $('#loading:visible').hide(); 

         if(result != '') { 
          $('#empty_storage').hide(); 
          $('#file_list').html(result); 
         } 
         else { 
          $('#file_list').html(''); 
          $('#empty_storage').show(); 
         } 
        } 
       }); 
      }, 1700); 
     }); 
+2

Просто Любопытно, вам действительно нужно проверить ': visible'? – Satpal

+1

Вы можете просто '.hide()' элемент – Sasikumar

+0

@Satpal, хотя это и не требуется, я могу просто использовать hide. но если вы проверяете консоль, она постоянно устанавливает видимость для скрытия каждый раз. – Ayan

ответ

1

Переключить видимость

$(document).ready(function() { 
     $('#loading').css('visibility': 'visible'); 
     setInterval(function() { 
      $.ajax({ 
       type: "GET", 
       url: "generate_list.php", 
       success: function (result) { 

        if ($('#loading').css('visibility') == 'visible') { 
         $('#loading').css('visibility','hidden'); 
        } 

        if(result != '') { 
         $('#empty_storage').hide(); 
         $('#file_list').html(result); 
        } 
        else { 
         $('#file_list').html(''); 
         $('#empty_storage').show(); 
        } 
       } 
      }); 
     }, 1700); 
    }); 

CSS: Первоначально загрузчик будет скрыт

#loading { 
    visibility : hidden; 
} 

Так что с видимостью собственности, если вы хотите, чтобы проверить видимость. Но если вы хотите использовать .hide() или .Show() то это зависит от дисплея собственности

Видимость: http://www.w3schools.com/cssref/pr_class_visibility.asp

Дисплей: http://www.w3schools.com/cssref/pr_class_display.asp

Sample Demo: https://jsbin.com/jiluren/11/edit?html,css,js,output

Надеюсь, это поможет. Благодаря !

+0

см. Мой комментарий выше. – Ayan

+0

Пробовал, что тоже, но не работал. – Ayan

+0

Обновлен мой ответ о видимости, а также функция hide() или fadeOut() изменит свойство отображения, но не видимость. Поэтому, если вы хотите изменить видимость, я собираюсь обновить свой ответ, подождите! – KrishCdbry

0

Возможно, проблема заключается в том, что вы неправильно указали показание индикатора загрузки. Вы вызываете $('#loading').show(); только один раз, перед началом итерации setInterval. Итак, первый раз, когда ваш #loading будет скрыт, он останется скрытым навсегда. Вы должны позвонить $('#loading').show(); перед каждым ajax звоните вот так.

$(document).ready(function() { 
      setInterval(function() { 
       $('#loading').show(); 
       $.ajax({ 
        type: "GET", 
        url: "generate_list.php", 
        success: function (result) { 
         //$('#loading').hide(); 
         $('#loading:visible').hide(); 

         if(result != '') { 
          $('#empty_storage').hide(); 
          $('#file_list').html(result); 
         } 
         else { 
          $('#file_list').html(''); 
          $('#empty_storage').show(); 
         } 
        } 
       }); 
      }, 1700); 
     }); 

Кроме того, обратите внимание, что для такого загрузки показания, что лучше, чтобы скрыть его в always обратного вызова обетования возвращенного $.ajax. Таким образом, панель загрузки будет скрыта также при возникновении ошибки, и обратный вызов успеха не будет вызван. Я имею в виду что-то вроде ти.

$("#loading").show(); 
$.ajax({ ... }) 
.always(function() { 
    $("#loading").hide();  
    }); 
+0

Мне нужно показать значок загрузки только один раз, и это каждый раз, когда страница загружается, а не на каждый вызов ajax. – Ayan

+0

Понятно, тогда я действительно не понимаю вашу проблему, извините. –

0

Если я понимаю ваши требования, вы должны показать значок загрузки до Ajax вызова и скрыть его, как только Ajax вызов завершает

В этом случае есть предопределенные функции обратного вызова в Карелии

beforeSend: function (xhr) { 
    $("#loaderforsearch").show() 
    }, 

        complete: function() 
        { 
         $("#loaderforsearch").hide(); 
        }, 
Смежные вопросы