DataTables not displaying content for a simple example - javascript

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'}]

Related

Print a table tag with js

I'm trying to print a table but it captures the whole page and in mobile mode, I would like to just print the addr-table class as below:
HTML
<table class="addr-table">
... table content...
</table>
Print
JS
<script>
$('.js-print-link').on('click', function() {
var printBlock = $(this).parents('.addr-table').siblings('.addr-table');
printBlock.hide();
window.print();
printBlock.show();
});
</script>
I tried many formats including suggestions on SO, this code performed the best, now the last huddle.
How can I capture just the table in normal pc mode not mobile mode
please try it ... it works correctly:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
#media print {
*{visibility:hidden}
.printable,.printable *{
visibility:visible
}
}
</style>
</head>
<body>
<div>
this content is not printable
</div>
<table class="printable">
<tr>
<td>
... table content...
</td>
</tr>
</table>
Print
</body>
</html>

HTML Tags showing up in browser when using CKEditor with ExpressJS

Here's my app.js file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="/css/style.css" rel="stylesheet" type="text/css">
<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
<title>Jo Blog</title>
</head>
<body>
{{{body}}}
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
// CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.replace('content', {
plugins: 'wysiwygarea , toolbar, basicstyles, link',
enterMode: CKEDITOR.ENTER_BR,
autoparagraph: false,
uiColor: '#AADC6E',
removePlugins: 'elementspath'
});
</script>
</body>
</html>
and here is the form I'm wanting it to affect - new.handlebars
<h1>New Blog</h1>
<form method="post" action="/blog">
<label>Title</label><br>
<input type="text" name="title"/><br>
<label>Blog Content</label><br>
<textarea name="content" id="ckEdit"></textarea><br>
<input type="submit" name="submit">
</form>
Now the editor comes up just fine and I can write in it but when I hit submit the HTML tags are still all there eg "< p >Hello World< p >"
I've googled the crap out of this problem, and read everything I can find on here about it and tried everything I have read but nothing is working :/ Any ideas??
I got your code to submit the form content and title without displaying the html tags in the browser.
The file ckeditor.js is loaded twice from two sources, once in the head by a cdn and again in the body. It's possible they are conflicting. I commented out the scripts in the body, and kept the cdn.ckeditor[...]ckeditor.js script in the head.
For testing purposes I removed the handlebars {{{body}}} and inserted the form directly into the html file.
I doubt the problem is in the form's action "/blog", but in order to see the returned result I changed the form's action to "form.php" (included below). The file form.php just sends the submitted content back to the browser. It does show the submitted content and title correctly displayed in the browser.
Here's "form.php" and the modified html files.
Hope this helps a little with trouble shooting.
form.php
<?php
$title = $_POST['title'];
$content = $_POST['content'];
print <<< PRINT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>$title</title>
</head>
<body>
$content
</body>
</html>
PRINT;
?>
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link href="/css/style.css" rel="stylesheet" type="text/css">-->
<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
<title>Jo Blog</title>
</head>
<body>
<!-- changed the form's action from /blog to form.php for demo purposes -->
<form method="post" action="form.php">
<label>Title</label><br>
<input type="text" name="title"/><br>
<label>Blog Content</label><br>
<textarea name="content" id="ckEdit"></textarea><br>
<input type="submit" name="submit">
</form>
<!--
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
-->
<script type="text/javascript">
// CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.replace('content', {
plugins: 'wysiwygarea , toolbar, basicstyles, link',
enterMode: CKEDITOR.ENTER_BR,
autoparagraph: false,
uiColor: '#AADC6E',
removePlugins: 'elementspath'
});
</script>
</body>
</html>

PhantomJS scraping : Get CDATA in script tag

I am trying to extract some JS generated data from a webpage, using PhantomJS.
I am able to get the page.content and I can see that the data I am interested in is enclosed within script and CDATA tags :
<!DOCTYPE html>
<html style="" class="someclass">
<head>
<meta class="meta-class-1">
<meta class="meta-class-1">
<link rel="shortcut" type="image/x-icon" href="/assets/...">
<meta content="width=device-width, initial-scale=1, maximum-scale=1.0" name="viewport">
<title>Page Title</title>
<link rel="stylesheet" media="all" href="/assets/page.css">
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
<script>
//<![CDATA[
window.gon={};gon.data={ "Interesting data":"the data" };
//]]>
</script>
<script src="//anoterscript.js"></script>
</head>
<body>
</body>
</html>
Here is one of my unsuccessful attempts at getting one of the scripts' content :
"use strict";
var page = require('webpage').create();
page.open('https://prioridata.com/apps/monzo-1052238659/country-split', function () {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
var scriptCtnt = page.evaluate(function() {
return [].map.call(document.getElementsByTagName('script')[0].innerHTML, function(data) {
return data;
});
});
console.log('Data is ' + JSON.stringify(data));
phantom.exit()
});
});
I've tried to parse the result in several different ways (libxml and node-phantom, page.content parsing using JQuery), but have been unable to get any script data so far.
Is it possible to achieve this using PhantomJs ? What am I doing wrong here ?
document.getElementsByTagName('script')[0].innerHTML
First look at the tag you are selecting:
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
It doesn't have any content. If you want to get the script, you need to make a new HTTP request to https://www.google-analytics.com/analytics.js.
It looks like you actually want this script:
<script>
//<![CDATA[
window.gon={};gon.data={ "Interesting data":"the data" };
//]]>
</script>
That is not the first script on the page. You need to select the right tag.
Possibly just by using 1 instead of 0.

I have a datatable works standalone but not in IFrame

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.

remove td class using jquery

I have a div in which contains a td class='small' I want to use jQuery to remove this.
<td class="small" style="padding:8px 0;color:#999;vertical-align:middle;">
A bunch of gibberish...
</td>
In my main code I am using jQuery to extract a div from a file then replace the div in the main code with the extracted.
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=500" />
<title>Rooster Teeth News</title>
<link rel="stylesheet" type="text/css" href="site/wwwRand1.css">
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://roosterteeth.com/home.php');
$html->save('site/result.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#postsArea').load('site/result.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
<div id="postsArea"></div>
</div>
The problem I am having is that I can only remove the 'td' after the 'div' has been replaced. If anyone could help me I would really appreciate it. Thank you.
The load() method has a callback function so you could use:
$('#postsArea').load('site/result.htm', function(){
$('#postsArea td.small').removeClass('small')
});

Categories