Hey,
Ik ben momenteel bezig aan een project waar ik bus informatie krijg zoals de tijd, busnummer en de bestemming van de bus (via een server krijg ik deze informatie) Ik zet alles netjes in een tabel. Het jammere eraan is dat de tabel in een nieuwe pagina wordt getoond en eigenlijk zou ik deze graag in de zelfde tabel weergeven als waar ik mijn functie oproep.
Dit is alvast mijn Javascript code:
Mijn HTML Code
Ik werk ook met WebGL dus in mijn huidige pagina is ook een kubus te zien.
Dus als ik op de link 'Get Timetabele'druk opent hij de tabel in een nieuwe pagina.
Wat moet ik in mijn code veranderen?
Thanks!
Ik ben momenteel bezig aan een project waar ik bus informatie krijg zoals de tijd, busnummer en de bestemming van de bus (via een server krijg ik deze informatie) Ik zet alles netjes in een tabel. Het jammere eraan is dat de tabel in een nieuwe pagina wordt getoond en eigenlijk zou ik deze graag in de zelfde tabel weergeven als waar ik mijn functie oproep.
Dit is alvast mijn Javascript code:
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>Mijn HTML Code
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> <canvas> 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>Ik werk ook met WebGL dus in mijn huidige pagina is ook een kubus te zien.
Dus als ik op de link 'Get Timetabele'druk opent hij de tabel in een nieuwe pagina.
Wat moet ik in mijn code veranderen?
Thanks!
