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-859-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>
01/23/2017
01/16/2017
01/09/2017
01/02/2017
12/26/2016
12/19/2016
12/12/2016
12/05/2016
11/28/2016
11/21/2016
11/14/2016
11/07/2016
</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">
<scriptsrc="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>
It works for me. Do you think it might be the typo:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
...in the requests frame should be...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
I figured it out. I had the javascript on the wrong page. Moving it to the main page (instead of in the iframe) solved the problem.
Related
I'm testing Swup.js
As far as I see it doesn't work with relative links. Like this;
Go page
Screenshoot for link in DOM
For this you need to enter the URL with the full path. But this may be undesirable. Relativity is used quite often, especially in designs with HTML content.
It works when I do as follows.
Go page
This was not the case with Turbolinks. What is the reason of this? Do I need to make any adjustments? Thanks.
My index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SWUP INDEX</title>
<link rel="stylesheet" href="">
<script src="swup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="1.css">
<script src="1.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div id="swup">
<h1>INDEX</h1>
Go Page
</div>
<script type="text/javascript">
var options = {
LINK_SELECTOR: 'a',
FORM_SELECTOR: 'form[data-swup-form]',
animationSelector: '[class^="a-transition-"]',
cache: true,
pageClassPrefix: '',
scroll: true,
debugMode: true,
preload: true,
support: true,
disableIE: false,
skipPopStateHandling: function(event){
if (event.state && event.state.source == "swup") {
return false;
}
return true;
},
}
var swup = new Swup(options);
</script>
</body>
</html>
My page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SWUP PAGE</title>
<link rel="stylesheet" href="">
<script src="swup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="2.css">
<script src="2.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body>
<div id="swup">
<h1>PAGE</h1>
Go Index
</div>
<script type="text/javascript">
var options = {
LINK_SELECTOR: 'a',
FORM_SELECTOR: 'form[data-swup-form]',
animationSelector: '[class^="a-transition-"]',
cache: true,
pageClassPrefix: '',
scroll: true,
debugMode: true,
preload: true,
support: true,
disableIE: false,
skipPopStateHandling: function(event){
if (event.state && event.state.source == "swup") {
return false;
}
return true;
},
}
var swup = new Swup(options);
</script>
</body>
</html>
Try to insert that instead of (LINK_SELECTOR: 'a')
linkSelector: 'a[href^="' + window.location.origin +'"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup])',
If I include all the lib jqwidgets/jqx-all.js
it works well, but if I use only the necessary files given in their example : https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm#demos/jqxdropdownlist/defaultfunctionality.htm
then the listing appears at the end of the html file and not just under the widget.
I tried to include all the necessary files, didn't succeed.
Any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait"
];
// Create a jqxDropDownList
$("#jqxWidget").jqxDropDownList({ source: source, placeHolder: "Select Item", width: 250, height: 30});
});
</script>
<br/>
<br/>
<div id='jqxWidget'>
</div>
<hr>
</div>
I figured out the problem
it was the old version that I used : jqwidgets-ver8.0.0.zip
jqwidgets-ver8.3.2.zip solved the issue
So always update to latest version...
Here's the JSON, returned by the web service call, which is successful.
{"items":[{"version_no":"7.6.5.4"}]}
And here's my javascript / HTML. When I load the page, it displays the header and footer properly, and makes the call out to the web service. But it doesn't display the version number contained in the JSON.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Page 1</title>
<link rel="stylesheet" type="text/css" href="lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="lib/dataTables.bootstrap4.min.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="lib/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="lib/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"ajax": {
cache: true,
url: "https://<hostname>/get_version/",
type: "GET"
},
"columns": [
{ "data" : "items.version_no" }
]
} );
} );
</script>
</head>
<body>
<p>
<table id="example" class="table table-striped table-bordered" style="width:"75%">
<thead>
<tr>
<th>Version</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Version</th>
</tr>
</tfoot>
</table>
</body>
</html>
Here's what the browser displays
By default, DataTables expects data returned from AJAX-call formatted in a certain way (array of arrays or array of objects, where each entry corresponds to table row, enclosed, by default, within property data/aaData).
However, if you need to override this behavior, you may use dataSrc property of ajax option to point to your items property:
ajax: {
...
dataSrc: 'items'
}
After that, you may simply refer to version_no within column definition:
columns: [{data:'version_no', title:'Version'}]
I am trying an application to fetch records from db and populate dataTable using the returned json.
My app is working good but I want to refresh my table on every 30 seconds and to repopulated added/modified rows from db.
Ajax reload is not working. I need your suggestion to know where I am making mistake?
Here is my code..
Datatable Script
var table;
function submitData(){
alert('Method Called');
table=$('#table').dataTable({
"pagingType" : 'full_numbers',
"scrollY" : "200px",
"dom" : 'TRlfrCtip',
"colVis" : {
"activate" : "mouseover",
"restore" : "Restore"
},
"tableTools" : {
"aButtons" : ["copy","csv","xls","pdf","print"],
"sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"
},
"ajax" : {
"url" : '../DataTableExample/FetchRows',
"dataType" : "json",
"type" : "POST",
},
"aoColumns" : [ {
"mData" : "id",
"sTitle" : "S. No"
}, {
"mData" : "name",
"sTitle":"Name"
}, {
"mData" : "age",
"sTitle":"Age"
}, {
"mData" : "designation",
"sTitle":"Designation"
}, {
"mData" : "qualification",
"sTitle": "Qualification"
}, ],
"deferRender": true,
"columnDefs":[
{
"targets" : [0],
"visible" : false,
"searchable" : true
}
]
});
$('#table tbody').on('click','tr',function(){
$(this).toggleClass('selected');
});
setInterval( function () {
table.ajax.reload();
}, 30000 );
}
function hideThings(){
$('#table_length').css("display","none");
}
HTML
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>DataTable Example</title>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColVis/css/dataTables.colVis.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/dataTables.colvis.jqueryui.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/dataTables.colVis.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColReorder/css/dataTables.colReorder.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColReorder/css/dataTables.colReorder.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/TableTools/css/dataTables.tableTools.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/TableTools/css/dataTables.tableTools.css">
<!-- Custom Javascript File -->
<script type="text/javascript" charset="utf8" src="jsFiles/DataTableSamplejs.js"></script>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="jqueryFiles/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColVis/js/dataTables.colVis.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColVis/js/dataTables.colVis.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/TableTools/js/dataTables.tableTools.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
</head>
<body>
<input id="submit" type="submit" value="Submit" onclick="submitData()"/>
<table id="table" class="display" cellspacing="0" width="100%">
<tbody></tbody>
</table>
<input id="hideButton" type="submit" value="Hide" onclick="hideThings()"/>
</body>
</html>
OK 2 things,
One change
setInterval( function () {
table.ajax.reload();
}, 30000 );
to
setInterval( submitData , 30000 );
and
table=$('#table').dataTable({
"pagingType" : 'full_numbers',
destroy: true, //ADD DESTROY TRUE
.
.
.
..
This is how I do it fetch every 2 seconds
setTimeout(function(){ $('#table').DataTable().ajax.reload(); },2000);
no need to destroy just reload table.
The following code will reload the datatable every 30 second.
Change
setInterval( function () {
table.ajax.reload();
}, 30000 );
To
setInterval( submitData , 30000 );
I got the solution..
I used event delegation to keep track on the column index in which sort performed and I applied it to "order" option dynamically using that variable. And as you guys suggested I changed ajax.reload to call setInterval(submitData,30000) and inside that function I destroyed the table if found. Its working as expected now..
Thank you all for your support :-)
Not necessary to destroy to reload the data. You can reload only the data
function reloadDatatable () {
$('#example').DataTable().ajax.reload();
};
setInterval( reloadDatatable , 1000 );
I'm using this magnific pop up plug in (http://dimsemenov.com/plugins/magnific-popup/documentation.html)
This is my very basic html, I simply want the button to open a pop up window in that page.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</script>-->
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.magnific-popup.js"></script>
<title>Burn That Burger</title>
<script type="text/javascript" src="js/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="normalize.css" media="all">
<link rel="stylesheet" href="style/unsemantic-grid-responsive.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all">
</head>
<body>
<div id="popup">
test pop up goes here
</div>
<button>create and show popup</button>
</body>
</html>
Javascript:
$(document).ready(function () {
$('button').magnificPopup({
items: {
src: '#popup',
type: 'inline'
}
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/vGAsL/19/
you have applied the popup id to your body, instead of a separate div.
<body>
<div id="popup">
test pop up goes here
</div>
<button> create and show popup </button>
I think you have an issue in your body tag, it should be:
<body>
<div id="popup">
test pop up goes here
</div>