macguyver 0 Newbie Poster

Hi
I posted previously regarding the use of scripaculous. I managed to resolve the problem I was having but have found a new one when producing droppables within table cells. I create a table in using dom elements in javascript and append it to the document body in a div element. I have created a function that loads on window load, however this does not seem to be doing anything.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>
<HEAD>

  <META name="generator" content="Free Script Editor, see www.freescripteditor.com">

  <TITLE>Email Client</TITLE>
  <link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/>
  <script src="javascript/prototype.js" type="text/javascript"></script>
  <script src="javascript/scriptaculous.js" type="text/javascript"></script>
  <script src="javascript/dragdrop.js" type="text/javascript"></script>
  <script src="javascript/controls.js" type="text/javascript"></script>
  <script src="javascript/effects.js" type="text/javascript"></script>


  <script type="text/javascript">
  var xmlhttp = false;

  //check if we are using IE
  try {
       //If the javascript version is greater than 5.
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
       alert ("You are using Microsoft Internet Explorer.");
       }
  catch(e)
        {
        //if not, then use the older active x object.
        try  {
        //if we are using Internet Explorer
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        alert("You are using Microsoft Internet Explorer");
              }
  catch (E)
         {
         xmlhttp = false;
         }
        }
        //If we are using a non-IE browser, crea a javascript instance of the object
        if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
           {
           xmlhttp = new XMLHttpRequest();
           alert ("You are not using Microsoft Internet Explorer");
           }

        function getmessage(inbox_id)
                 {
                 var object = document.getElementById('content');
                 var server = "getmessage.php?inbox_id=" +inbox_id;
                 xmlhttp.open("GET", server);
                 xmlhttp.onreadystatechange = function()
                         {
                         if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                            {
                            object.innerHTML = xmlhttp.responseText;
                            }
                         }
                 xmlhttp.send(null);
                 }

       window.onload =  function ()
                 {
                 var dv = document.getElementById("right");

                 var table = document.createElement("table");
                 var tbody = document.createElement("tbody");
                 var x = 0;
                 //create the table rows
                 for(var j =0; j <=2; j++)
                     {
                     var row = document.createElement("tr");

                     //create the table columns
                     for (var k =0; k<=4;k++)
                          {

                          x++;
                          var cell = document.createElement("td");
                          var celltext = document.createTextNode(x);
                          cell.appendChild(celltext);
                          cell.setAttribute("className", "droparea");
                          cell.setAttribute("id", "x");
                          row.appendChild(cell);

                          }
                 //add the row to the end of the table body
                 tbody.appendChild(row);
        }
        table.appendChild(tbody);
        dv.appendChild(table);
        table.setAttribute("className", "tbl");
        }

        window.onlaod = function()
                 {
                 var dh;
                 var cells = document.getElementsByTagName('td');
                 for (var z = 0; z <= cells.length; z++)
                      {
                      dh = cells[z].getAttribute('id');
                      if(dh)
                         {
        Droppables.add('dh', {accept:'draggable', hoverclass: 'hover', onDrop: function(dragged, dropped, event) {
    alert('Dragged: ' + dragged.id);
    alert('Dropped onto: ' + dropped.id);
    alert('Held ctrl key: ' + event.ctrlKey);}});
                         }
                         else
                         {
                         alert("does not work");
                         }
                      }
                      }
 </script>

</HEAD>

<BODY>
<div class="container" id="container">
<!--header div - for message 'new', 'reply' -->
<div class="header">
<!--<script type="text/javascript" src="buttons/header_nav.js"></script> -->



</div>
<!-- end of header div-->

<!--Begin the div class left - this will hold the inbox emails for review-->
<div class="left">
<?PHP
include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php');
$str = "id";
$i = 0;
$inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i";
$inbox_result = mysql_query($inbox_query);
while($row = mysql_fetch_array($inbox_result))
  {//start while trainer query
  $inbox_id = $row['0'];
  $to = $row['1'];
  $subject= $row['2'];
  $sent = $row['3'];
  $message = $row['4'];
  $i++;

  echo "<div class='draggable' id='$str$i'>

 $inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$str$i $subject
 $message</a>
  <script type='text/javascript'>
  new Draggable('$str$i', {scroll: window});

  </script>
  </div>";


  }//end while inbox query
  ?>

</div> <!--end left div-->

<!--begin the right div - this is the right side of the screen frame for
postponed email area-->
<div class="right" id="right">

</div>
<!--end the right div element-->
<!--begin the main content div - this will hold sent message-->
<div class="content" id="content" overflow="auto">


<!--end content div-->
</div>
</BODY>
</HTML>

any help appreciated