Как обновить данные JSON с помощью навигации по вкладкам с помощью jQuery? - PullRequest
Новая
       10

Как обновить данные JSON с помощью навигации по вкладкам с помощью jQuery?

0 голосов
/ 01 сентября 2011

Возникли проблемы с попыткой заставить довольно простой интерфейс работать должным образом. Подумал, что кто-то здесь мог бы дать какой-то совет и указать мне правильное направление. Вот что у меня происходит.

1) Получение строки JSON (многомерного массива) со страницы PHP с помощью getJSON. 2) Использование 2 операторов jQuery.each для итерации данных JSON и отображения данных на странице. Первый jQuery.each создает мою боковую навигацию (перечисляет названия компьютерных лабораторий). Второй jQuery.each создает таблицу данных с машинами, их статусом и датой.

Так что, где я сталкиваюсь с проблемой, я хочу, чтобы боковая навигация выполняла функции вкладок и вкладок в таблице данных. Я могу заставить это работать нормально. Здесь я столкнулся с проблемой ..... Я хочу, чтобы мои данные JSON обновлялись каждые 2 минуты, поэтому я использую setInterval, чтобы выйти и снова получить строку JSON. Это заканчивает тем, что ломало мои вкладки / навигацию. Я понимаю, почему это выходит из строя, но я отчасти заблудился настолько, насколько это можно исправить или альтернативный способ кодирования этого.

Строка JSON выглядит следующим образом ..... 

{
    "Labs": [
        {
            "name": "Computer Lab 1",
            "host": [
                {
                    "name": "c1ms",
                    "status": "up",
                    "date": "8/25/11  02:05 PM"
                }
            ],
            "downcount": 0
        },
        {
            "name": "Computer Lab 2",
            "host": [
                {
                    "name": "berk1",
                    "status": "up",
                    "date": "8/26/11  08:55 AM"
                },
                {
                    "name": "berk2",
                    "status": "up",
                    "date": "8/26/11  08:50 AM"
                },
                {
                    "name": "berk3",
                    "status": "up",
                    "date": "8/26/11  08:50 AM"
                },
                {
                    "name": "berk4",
                    "status": "up",
                    "date": "8/26/11  08:55 AM"
                }
            ],
            "downcount": 0
        },
        {
            "name": "Computer Lab 3",
            "host": [
                {
                    "name": "pc1",
                    "status": "up",
                    "date": "8/26/11  08:50 AM"
                },
                {
                    "name": "pc2",
                    "status": "up",
                    "date": "8/26/11  08:55 AM"
                },
                {
                    "name": "pc3",
                    "status": "up",
                    "date": "8/30/11  12:20 AM"
                },
                {
                    "name": "pc4",
                    "status": "up",
                    "date": "8/26/11  08:50 AM"
                },
                {
                    "name": "pc5",
                    "status": "up",
                    "date": "8/26/11  08:55 AM"
                }
            ],
            "downcount": 1
        },
        {
            "name": "Computer Lab 4",
            "host": [
                {
                    "name": "mac1",
                    "status": "up",
                    "date": "8/22/11  03:05 PM"
                },
                {
                    "name": "mac2",
                    "status": "up",
                    "date": "8/22/11  03:10 PM"
                },
                {
                    "name": "mac3",
                    "status": "up",
                    "date": "8/22/11  03:05 PM"
                },
                {
                    "name": "mac4",
                    "status": "up",
                    "date": "8/23/11  12:20 PM"
                },
                {
                    "name": "mac5",
                    "status": "up",
                    "date": "8/16/11  01:30 PM"
                },
                {
                    "name": "mac6",
                    "status": "up",
                    "date": "8/22/11  03:05 PM"
                }
            ],
            "downcount": 0
        }
    ]
}

--- Код до сих пор --- 

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


 setInterval('$("#table").trigger("getJson")', 3000);

 $("#table").bind("getJson", function(event){
  $.getJSON('json.php', function(data, textStatus, jqXHR){
    $("#table").trigger("drawTable", data);
  });
 })
 $("#table").bind("drawTable", function(event, json){
    //build the table, json is your jsonData from the call
    $.each(json.Service, function(i,object){
        $.each(object.host, function(e,o){
            $('#table').append("<tr><td width='30%'>"+o.name+"</td><td width='10%'><span class='status-"+o.status+"'>"+o.status+"</span></td><td width='60%'>"+o.date+"</td></tr>");
    });
    });
 });
 $(".tableRow").live("click", function(event){
   //sidenavigation code
   $.each(json.Service, function(n, nav) {
      $('#db-sidenav ul').append("<li>"+nav.name+"</li>"); 
   });
 });
});
</script>

Ответы [ 2 ]

0 голосов
/ 01 сентября 2011

исправить добавление таблицы констант

HTML для таблицы 

<table>
  <thead>...</thead> // columns
  <tfoot>...</tfoot> //footer in front of body to help render speed
  <tbody>...</tbody> // content
</table>
<? id="db-sidenav">
  <ul>....</ul>
</?>

JS совет 

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


     setInterval('$("#table").trigger("getJson")', 3000);

     $("#table").bind("getJson", function(event){
      $.getJSON('json.php', function(data, textStatus, jqXHR){
        $("#table").trigger("drawTable", data);
        $("#db-sidenav").trigger("updateNavigation", data);
      });
     });
     $("#db-sidenav").bind("updateNavigation", function(event, json){
        //sidenavigation code
        var sideNav = $(this);
        var ul = $("<ul></ul>");
        $.each(json.Service, function(n, nav) {
         ul.append("<li>"+nav.name+"</li>"); 
        });
        $("ul", this).fadeOut("fast", function(){
          //on animation complete
// warning, this will remove all child nodes, tweak this to remove only the UL we care about if there is more content in the side-nav than just the UL
          $(this).remove();
          ul.appendTo(sideNav);
          ul.fadeIn();
        }); 
      });        
     });
     $("#table").bind("drawTable", function(event, json){
        //build the table, json is your jsonData from the call
        var table = $(this);
        var tbody = $("<tbody></tbody>"); //appending the tr's to an un-attached element prevents DOM thrashing as we rebuild (i have no idea how big this table may get)
        $.each(json.Service, function(i,object){
            $.each(object.host, function(e,o){
               tbody.append("<tr><td width='30%'>"+o.name+"</td><td width='10%'><span class='status-"+o.status+"'>"+o.status+"</span></td><td width='60%'>"+o.date+"</td></tr>");
        });
        $("#table tbody").fadeOut("fast", function(){
          $(this).remove();
          tbody.appendTo(table);
          tbody.fadeIn(); 
        }); 
        });
     });
    });
    </script>

Старый ответ 

<script>
$(document).ready(){


 setInterval('$("#table").trigger("getJson")', 120000);

 $("#table").bind("getJson", function(event){
  $.getJson("myUrl.php", function(data, textStatus, jqXHR){
    $("#table").trigger("drawTable", data);
  });
 })
 $("#table").bind("drawTable", function(event, json){
    //build the table, json is your jsonData from the call
 });
 $(".tableRow").live("click", function(event){
   //sidenavigation code
 });
}
</script>
0 голосов
/ 01 сентября 2011

вы можете рассмотреть возможность использования функции .live () в jQuery.

http://api.jquery.com/live/

таким образом, каждый раз, когда обновляются ваши DOM-элементы, обработчик событий связывает добавленную вами функцию навигации.

Надеюсь, это поможет.

...