I am attempting to achieve the following:
1 - Use jQuery to update
index.htmlwith the content fromoutput.html(only update when there are differences in data, and ideally only update the parts that have changed).2 - Add two buttons in the header labeled "Left" and "Right" for scrolling left and right across a table.
I have made several attempts to make it work but so far have been unsuccessful. Below is an example of my attempt at step 1 (updating index.html with new content from output.html)
Main HTML (index.html) calling Secondary HTML (output.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>
<style type="text/css">
<!-- @import url("nstyle.css");
-->
</style>
<script>
update_content()
$(document).ready(function (e) {
var refresher = setInterval("update_content();", 250);
})
function update_content() {
$.ajax({
type: "GET",
url: "testoutput.html",
timeout: 10000,
cache: false,
})
.done(function (page_html) {
var currentDoc = document.getElementById("container");
if (page_html != currentDoc.innerHTML) {
var newDoc = document.getElementById("container");
newDoc.innerHTML.write(page_html);
newDoc.close();
}
});
}
</script>
</head>
<body>
<div id="header_container">
<div id="header">
<a href="http://website.com/" target="_blank">
<img src="logo.png">
</a>
</div>
</div>
<div id="container"></div>
<div id="footer_container">
<div id="footer">
<a href="http://webiste.com/" target="_blank">
<img src="logo.png">
</a>
<div id="footer1">
<i>Copyright © 2013 <a href="http://website.com/" target="_blank"><font color=blue>Website</font></a>.</i>
</div>
<div id="footer2">
<i>All Rights Reserved.</i>
</div>
</div>
</div>
</body>
</html>
Secondary HTML (output.html)
<table id="gradient" summary="">
...
(Original code continues)
CSS Snippet
(CSS styling details here)
Function That Generates the Original HTML Page
(Python code generates HTML tables based on provided data)
data Variable Example:
(Example data used in Python function)
If anyone has any suggestions or can provide assistance with this issue, it would be greatly appreciated. I will add a bounty to this post in two days as a token of gratitude.