Перезагрузка контента в div с определенным интервалом с помощью jQuery и вкладок - PullRequest
Новая
       2

Перезагрузка контента в div с определенным интервалом с помощью jQuery и вкладок

0 голосов
/ 16 февраля 2011

У меня было несколько вкладок, которые при нажатии использовали jquery для загрузки данных в div.Мне нужны данные для перезагрузки с 5-секундным интервалом, но только информация из конкретной вкладки.Итак, вот что у меня есть ... Я думаю, что мне нужно запустить setInterval при нажатии на вкладку, а затем остановить его при нажатии на другую.Вот мой код для вкладок: 

<script type="text/javascript">    
$(document).ready(function(){
  $("#xicon1").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     $("#actionlist").load("alcurrent.php");
     });
  $("#xicon2").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     $("#actionlist").load("alpending.php");
     });
  $("#xicon3").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     $("#actionlist").load("alpast.php");
     });
});
</script>

Так, например, когда нажата # xicon1, мне нужно загрузить alcurrent.php в #actionlist (я могу это сделать), но мне нужно перезагрузить егоэто каждые 5 секунд.Затем, когда я нажимаю другую вкладку, мне нужно, чтобы она загружалась каждые 5 секунд.Итак, какая бы вкладка ни была активной, мне нужно, чтобы содержимое загружалось каждые 5 секунд.

Я пробовал setInterval ... но не играли в кости.

Спасибо.

Редактировать:

Вот что я сделал, и я думаю, что это работает ... 

<script type="text/javascript">
$(document).ready(function(){
  $("#xicon1").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon1() {
     $("#actionlist").load("alcurrent.php");
     }
     setInterval(xicon1, 5000);
     });
  $("#xicon2").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon2() {
     $("#actionlist").html("<p>2</p>")
     }
     setInterval(xicon2, 5000);
     });
  $("#xicon3").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon3() {
     $("#actionlist").html("<p>3</p>")
     }
     setInterval(xicon3, 5000);
     });
});
</script>

Edit2: это может быть немного красивее: 

<script type="text/javascript">
$(document).ready(function(){
  $("#xicon1").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon1() {
     $("#actionlist").load("alcurrent.php");
     };
     $(function() {
     setInterval(xicon1, 5000);
     };
  });
  $("#xicon2").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon2() {
     $("#actionlist").html("<p>2</p>")
     };
     setInterval(xicon2, 5000);
  });
  $("#xicon3").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon3() {
     $("#actionlist").html("<p>3</p>")
     };
     setInterval(xicon3, 5000);
  });
});
</script>

Хорошо, япросто хочу быть уверен: когда кто-то нажимает на другую вкладку, она останавливает обновление содержимого другой вкладки каждые 5 секунд?

Ответы [ 2 ]

2 голосов
/ 16 февраля 2011

Каков синтаксис вашего setInterval, вы пробовали это так? 

setInterval(function() {
      // Do something every 5 seconds
}, 5000);
0 голосов
/ 16 февраля 2011

Я думаю, вам просто нужно очистить интервал при нажатии на новую вкладку и сбросить его, как это: 

<script type="text/javascript">
$(document).ready(function(){
  var the_interval = 0;

  $("#xicon1").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");

     if (the_interval) {
        clearInterval(the_interval);
     }
     xicon1();  // I would call it here, to load newest data as soon as tab is clicked

     function xicon1() {
     $("#actionlist").load("alcurrent.php");
     };
     $(function() {
     the_interval = setInterval(xicon1, 5000);
     };
  });
  $("#xicon2").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");

     if (the_interval) {
        clearInterval(the_interval);
     }
     xicon2();  // I would call it here, to load newest data as soon as tab is clicked

     function xicon2() {
     $("#actionlist").html("<p>2</p>")
     };
     setInterval(xicon2, 5000);
  });
  $("#xicon3").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");

     if (the_interval) {
        clearInterval(the_interval);
     }
     xicon3();  // I would call it here, to load newest data as soon as tab is clicked

     function xicon3() {
     $("#actionlist").html("<p>3</p>")
     };
     setInterval(xicon3, 5000);
  });
});
</script>

Надеюсь, это работает для вас.

...