Hey

I'm currently working on a project where I get businformation like (busnumber, destination and time) from the server. I put everything in a table.

I made a table in Javascript but evertime the event for making the table is being called. He opens the table in a new page. How can I keep the table at the same page?

This is my javascript

Code:
<script type="text/javascript">

     function App() {
         PageMethods.Connect(callback);
     }
     function callback(val) {
         //Title
         var Text = "Bushours:<br/>";
         //Arrays
         var arr = [];
         var busNumber = [];
         var busDest = [];
         var busTime = [];
         var re = /(?:Bus number:)(.*?$)(?:[\s\S]+?Bus destination: )(.*?$)(?:[\s\S]+?Time: )(.*?$)/gm;
         // Shorten this to
         // var re=/(?:.*?:)(.*?$)(?:[\s\S]+?: )(.*?$)(?:[\s\S]+?: )(.*?$)/gm;

         //Unsorted Information (converted from XML to string) from Server
         var str = val;

         //Sort information in the right array
         arr = re.exec(str);

         while (arr !== null) {
             busNumber.push(arr[1]);
             busDest.push(arr[2]);
             busTime.push(arr[3]);
             arr = re.exec(str);
         }

         //Make a table for all the information
         var body = document.getElementsByTagName("Body")[0];

         // creates a <table> element and a <tbody> element
         var tbl = document.createElement("table");
         var tblBody = document.createElement("tbody");

         var rowi = document.createElement("tr");

         var orderArrayHeader = ["Busnumber", "Destination", "Time"];
         var thead = document.createElement('thead');

         tbl.appendChild(thead);

         for (var i = 0; i < orderArrayHeader.length; i++) {
             thead.appendChild(document.createElement("th")).
    appendChild(document.createTextNode(orderArrayHeader[i]));
         }
         
         for (var i = 0; i < 20; i++) 
         {
             var row = document.createElement("tr");

             var cell1 = document.createElement("td");
             var cellText1 = document.createTextNode(busNumber[i]);
             cell1.appendChild(cellText1);
             row.appendChild(cell1);
             
             var cell2 = document.createElement("td");
             var cellText2 = document.createTextNode(busDest[i]);
             cell2.appendChild(cellText2);
             row.appendChild(cell2);
             
             var cell3 = document.createElement("td");
             var cellText3 = document.createTextNode(busTime[i]);
             cell3.appendChild(cellText3);
             row.appendChild(cell3);

             tblBody.appendChild(row);
         }
         // put the <tbody> in the <table>
         tbl.appendChild(tblBody);
         // appends <table> into <body>
         body.appendChild(tbl);
         // sets the border attribute of tbl to 2;
         tbl.setAttribute("border", "2");
     }

 </script>
HTML Code:
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true" />
    <div id="loadingScreen" style="display:none; background-repeat:no-repeat; background-image: url('Styles/modelloading.gif');  background- center; text-align:center; z-index:10000000; background-color:Gray; ;">
        <p style="color:White;">Loading Geometry Manifest. Depending on file size, this may take a while.</p>
    </div>
    <canvas id="scenejsCanvas">
        <p>This example requires a browser that supports the <a href="http://www.w3.or  g/html/wg/html5/">HTML5</a> &lt;canvas&gt; feature.</p>
    </canvas>
    <div id="loadedWrapper">
        <div id="loaded"></div>
        <div id="loadedbar"></div>
    </div>

    <div id="modelmenu" class="dragmenu unselectable">
        <span class="resetBoundary"></span>
        <div class="menuHeader">
            Model Menu
        </div>
        <div id="menu" runat=server>
        </div>
    </div>
    <div id="types" class="dragmenu unselectable">
        <span class="resetBoundary"></span>
        <div class="menuHeader">
            Types
        </div>

        <div class="menuContent">
            <p><a href="#" onclick="ZoomExtents();">Zoom Extents</a></p>
            <p><a href="#" onclick="App();">Get Timetable</a></p>
            <div id="navTreeContainer">
                <div id="navtree"></div>
            </div>
        </div>
    </div>
  <div id="debuginfo" style="display:none; width:100%; height: 200px;"><h1>Debug Info:</h1></div>
</asp:Content>
Maybe one thing extra my project is a based on 3D modelling with WebGL so in that page I have currently a cube:

http://img715.imageshack.us/img715/9390/issue1a.jpg

What do I need to change?

Thanks!