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>