Having some problems trying to get a rather simple UI working properly. Thought maybe someone here could lend some advice and point me in the right direction. Here's what I've got going on.

1) Pulling in a JSON string (multidimensional array) from a PHP page using getJSON. 2) Using 2 jQuery.each statements to iterate through JSON data and display the data to the page. The first jQuery.each creates my side navigation (lists computer lab names). The second jQuery.each creates a data table with the machines, their status, and a date.

So where I'm running into a problem is I want to my side navigation to act as tabs and tab through the data table. I can get that working fine. Here is where I run into a problem.....I want my JSON data to refresh every 2 mins so I'm using setInterval to go out and get the JSON string again. This ends up breaking down my tabs/navigation. I understand why it breaks down but I'm kind of lost as far as how to fix it or an alternative way to code this.

The JSON string looks like this.....

{
    "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
        }
    ]
}

---Code so far---

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

---

you might consider using the .live() feature of jQuery.

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

this way each time your DOM elements are refreshed, the event handler will bind the navigation function that you have added.

Hope this will help.

---

fix the constant table appending

html for table

<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 advice

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

---

Old Answer

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