I have a datatable works standalone but not in IFrame
I have a datatable works standalone but not in IFrame
MarkAinsworth
Posts: 6Questions: 3Answers: 1
I have a tale that works fine in a standalone html file. I want to have a scrolling list of links to the left that will load the table with data relative to the selected link (I want it to work something like the W3Schools site). To do this I created a page with two Iframes: One for the list the other with my datatable. The problem is that the datatable stopped working when I loaded it to the Iframe. What am I missing?
Below is my code:
Main page (index):
<html>
<head>
<link rel="stylesheet" type="text/css" href = "css/Custom.css" />
<title>Failed Fax Monitor></title>
</head>
<body>
<iframe id="weeks" src="WeekList.html"></iframe>
<iframe id="requests" src = "Requests.html" name="Requests" ></iframe>
</body>
</html>
.
List frame (weeks)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
<link rel="stylesheet" type="text/css" href = "css/Custom.css" />
<script src="jQuery/datatables.min.js"></script>
<script>
$(document).ready(function() {
}
</script>
</head>
<body>
<!--- hard-coded for now will eventually be populated dynamically -->
<ul>
<a href="php/Data.php?Date=20170123">01/23/2017</a>
<a href="php/Data.php?Date=20170116">01/16/2017</a>
<a href="php/Data.php?Date=20170109">01/09/2017</a>
<a href="php/Data.php?Date=20160102">01/02/2017</a>
<a href="php/Data.php?Date=20161226">12/26/2016</a>
<a href="php/Data.php?Date=20161219">12/19/2016</a>
<a href="php/Data.php?Date=20161212">12/12/2016</a>
<a href="php/Data.php?Date=20161205">12/05/2016</a>
<a href="php/Data.php?Date=20161128">11/28/2016</a>
<a href="php/Data.php?Date=20161121">11/21/2016</a>
<a href="php/Data.php?Date=20161114">11/14/2016</a>
<a href="php/Data.php?Date=20161107">11/07/2016</a>
</ul>
</body>
</html>
Frame with datatable (requests)
<html>
<head>
<link rel="stylesheet" type="text/css" href = "css/Custom.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
<script src="jQuery/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#faxList').dataTable( {
"pageLength" : 50,
fixedHeader: true,
paging: false,
//"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
"ajax": {
"url": "php/data.php",
"dataType": "json",
"cache": false,
"contentType": "application/json; charset=utf-8",
"dataSrc": "transactions"
},
columns: [
{ data: 'PROCESS_DATE' },
{ data: 'PROCESS_STATUS' },
{ data: 'PDF_FILE_NAME' },
{ data: 'REF_ID' },
{ data: 'ADDITIONAL_INFO' }
]
});
});
</script>
</head>
<body>
<h2>NCompass Failed Fax Monitor</h2>
<br>
<table width="100%" class="display" cellspacing="0" id="faxList">
<thead>
<tr>
<th>Process Date</th>
<th>Status</th>
<th>PDF File</th>
<th>Reference ID</th>
<th>Error Description</th>
</tr>
</thead>
</table>
</body>
</html>
This question has an accepted answers - jump to answer
Answers
sorry. some of my code was not formatted correctly I would fix, but editing the post does not appear to be a option.
I solved this by moving the javascript from Requests.html to Index.html