I'm trying to get the buttons extension to work, but I keep getting errors when attempting to initialize the table.
included files:
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="assets/js/pdfmake.min.js"></script>
<script src="assets/js/vfs_fonts.js"></script>
<script src="assets/js/jszip.js"></script>
I have tried including these as well, but I also get errors that I assume are cascading from the original problem. I have commented them out at the moment:
https://cdn.datatables.net/buttons/1.0.3/js/buttons.print.min.js
https://cdn.datatables.net/buttons/1.0.3/js/buttons.flash.min.js
https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js
Using method 1 to create the table:
$("#generic-list-table").DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
} );
I get the following error in buttons.min.js:
a.init is not a function
When using the second method:
var table = $('#generic-list-table').DataTable();
new $.fn.dataTable.Buttons( table, {
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
} );
I get this error:
this.c.dom.container is undefined
I'm copying the examples exactly. I'm at a loss as to what I'm supposed to be doing differently.
I used the example code (https://www.datatables.net/extensions/buttons/examples/initialisation/simple.html) and download all the related references to work local and it works well.
Check this link to download the example with local files.
This is the code to initiallise
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
I was experiencing the same issue but i finally figured it out. You have to load the required files in a correct order.
See if this order sorts your issue
<script src="/js/jquery-2.1.1.js"></script>
<script src="/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="/js/plugins/dataTables/dataTables.tableTools.min.js"></script>
<script src="/js/export_data/pdfmake.min.js"></script>
<script src="/js/export_data/dataTables.buttons.min.js"></script>
<script src="/js/export_data/buttons.flash.min.js"></script>
<script src="/js/export_data/vfs_fonts.js"></script>
<script src="/js/export_data/jszip.min.js"></script>
<script src="/js/export_data/buttons.html5.min.js"></script>
Mine worked with this order. It appears like some files use variables in others.
In your case, you will need to have
<script src="assets/js/pdfmake.min.js"></script>
Before
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
Jquery first, pdfmake follows then the others.
check reference in master page and data table page...may be your reference file available in both..remove from one of them is solve problem for me
Related
I am very new to javascript and docsify. I have the following scripts that work fine on a simple html page, but when I use docsify to generate them as a page only one of the script shows the graph. This is true for bunch of different pages I generated with several graphs using vegaEmbed.
<div id="script_1"></div>
<script type="text/javascript">
var spec = "https://raw.githubusercontent.com/gunrock/io/master/plots/gunrock_primitives_tc_avg_process_time.json";
vegaEmbed('#script_1', spec).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>
<div id="script_2"></div>
<script type="text/javascript">
var spec = "https://raw.githubusercontent.com/gunrock/io/master/plots/gunrock_primitives_tc_edges.json";
vegaEmbed('#script_2', spec).then(function(result) {
// Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
}).catch(console.error);
</script>
You can find the page here: https://gunrock.github.io/docs/#/analysis/results_tc
I am including the following:
<!-- Vega and Vega-Lite Includes -->
<script src="https://cdn.jsdelivr.net/npm/vega#5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6"></script>
Per the documentation, only the first script tag is executed: https://docsify.js.org/#/configuration?id=executescript
I'm trying to compose a regular expression to match the following situation:
In a Node.js project I have a multiline string that contains a big HTML code mixed with some JS with this structure:
<html>
<head>
</head>
<body>
<script type="text/javascript">
... more code ...
},
"bookIds" : [
"abc123",
"qwe456",
"asd789"
],
... more code, and in another json:
},
"bookIds" : [
"foo111",
"bar222",
"baz333"
],
... more code ...
</script>
</body>
</html>
My goal is to get the first list of bookIds:
abc123
qwe456
asd789
So, as you can see, the conditions that I'm working with, for now, are:
Search the first "bookIds" : [ appearance and stop at the next ]
I got something like that with: /bookIds" : \[([\S\s]*?)\]/. Yeah, conceptually I though about finding the first string bookIds, start after the first [ after that, and stop before the next ], but I don't know how to do it. I'm now getting documented about lookahead & lookbehinds.
Now I need to search (or loop) inside that match and get what's inside quotes (I know how could I do that individually: /"(.*?)"/)
But unfortunately I've been hours googling and trying and I'm not getting it to work (neither in my Node project nor the tests I'm trying in regex101.com)
Any suggestions will be much appreciated!
You can use "bookIds"\s*:\s*\[([^\]]+?)] Demo
let str = `<html>
<head>
</head>
<body>
<script type="text/javascript">
"bookIds" : [
"abc123",
"qwe456",
"asd789"
],
"bookIds" : [
"foo111",
"bar222",
"baz333"
],
<\/script>
<\/body>
<\/html>`
let op = str.match(/"bookIds"\s*:\s*\[([^\]]+?)]/m)
console.log(op[1].replace(/[\s"]+/g,''))
I want to import files from collection.media that are not sound, image, or video. For example I'd like to import a JSON file.
I put the file _script.jquery-3.3.1.min.js and _data.json in my collection.media folder.
On Anki Desktop (Ubuntu), the following works:
<script src="_script.jquery-3.3.1.min.js"></script>
<script>
$.getJSON('_data.json', function(data) {
// succeeds on Anki Desktop, fails on AnkiDroid
});
</script>
(Note on Anki Desktop 2.0.47 I am using the JS Booster plugin).
On AnkiDroid, the situation is different. JQuery loads just fine in the script tag. However, $.getJSON fails to find the _data.json file.
I'd like to use _data.json on many cards/notes.
How can I import non-media, non-js files from collection.media in javascript, in a way that works both in Anki Desktop and AnkiDroid?
I have found some working answer for this.
To get character data in AnkiDroid card templates. (OFFLINE)
As we can access js and image file using this
<script src="some-js-file.js"></script>
<img src="some-image.png"></img>
To access json
I have tried same steps but getting CORS error so I used next steps.
<!-- It will give CORS error -->
<script src="我.json" type="application/json"></script>
With example,
To access 我.json file
Copy contents of 我.json into a javascript file 我.js, with any variable name,
var char_data = {"strokes":["M 350 571 Q 3....}
Add following tag to access that js file
<!-- Note : file type & name -->
<script src="我.js" type="text/javascript"></script>
Now also change code in _hanzi-writer.min.js
To change code, first beautify code using this https://beautifier.io, then make following change
a) Remove the link to load from internet
b) Change this 200 != r.status and replace/add this
JSON.parse(JSON.stringify(char_data))
( May be more good replacement can be done here )
....
....
// Note : char_data variable come from 我.js file
r.overrideMimeType && r.overrideMimeType("application/json"), r.open("GET", "", !0), r.onerror = function(t) {
....
....
4 === r.readyState && (200 != r.status ? i(JSON.parse(JSON.stringify(char_data))) : 0 !== r.status && n && n(r))
....
....
So final script will be like this
Front side of card
{{Pinyin}}
<div id="character-target-div"></div>
<script src= "我.js" type="text/javascript"></script>
<script>
var data = JSON.stringify(char_data);
console.log(data);
</script>
<script src="_hanzi-writer.min.js"></script>
<script>
var writer = HanziWriter.create('character-target-div', '我', {
width: 150,
height: 150,
showCharacter: false,
padding: 5
});
writer.quiz();
</script>
Above all the steps are for single file 我.js
To access other character repeat the same.
For similar issues view my code
https://github.com/infinyte7/Anki-xiehanzi
https://github.com/infinyte7/hanzi-writer-data-in-javascript
I assume this is related to how AnkiDroid handles collections.media files. If so, this might be a bug. A really hackish workaround could be to rename the file to .svg so that AnkiDroid treats it as an image and lets it through.
The question: How get the unobtrusiv validation of a german date running in MVC?
Because I can't find a running example of using globalize 1.x with MVC 5 to validate a german date I needed two days to get it running.
The problems are the order of the js-files, getting the cldr-data and putting it all together in an way it can be reused.
In the answer I will show my current solution.
In this zip-file (https://www.dropbox.com/sh/75dx6alck7itwia/AABFkcgOQVc1bUXFE_jYfR_da?dl=0) you find all files you need.
It includes
an short todo.txt (de and en)
the cldr-data (jsons) in sub-directories
a custom HTML-Helper-class wich writes the needed HTML/js-Scripts to the view.
It seems, that rendering by the helper not allways works. So if there are problems with that, copy the code to every (edit / new) view.
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<script src="~/Scripts/cldr/unresolved.js"></script>
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/currency.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>
<script src="~/Scripts/globalize/plural.js"></script>
<script src="~/Scripts/globalize/relative-time.js"></script>
<script src="~/Scripts/globalize/unit.js"></script>
<script src="~/Scripts/jquery.validate.globalize.js"></script>
<script>
$(document).ready(function () {
// Use $.getJSON instead of $.get if your server is not configured to return the
// right MIME type for .json files.
$.when(
$.get("/Scripts/cldr/main/de/ca-gregorian.json"),
$.get("/Scripts/cldr/main/de/numbers.json"),
$.get("/Scripts/cldr/supplemental/likelySubtags.json"),
$.get("/Scripts/cldr/supplemental/timeData.json"),
$.get("/Scripts/cldr/supplemental/weekData.json")
).then(function () {
// Normalize $.get results, we only need the JSON, not the request statuses.
return [].slice.apply(arguments, [0]).map(function (result) {
return result[0];
});
}).then(Globalize.load)
.then(function () {
Globalize.locale("de-DE");
});
});
</script>
I hope it helps.
This solution based on the answer to MVC 5 - can not get globalisation running.
If you want to use a bündle, see MVC 5, globalize, validate german date: How to bundle the js-scripts?
I am creating a 3-column tumblr theme and trying to apply infinite scrolling and masonry to the posts. The masonry only applies on the number of 'Posts Per Page' (eg. if it's set to 15, masonry will only apply to the first 15 posts). I've looked everywhere but was unable to find anything. Here is my code:
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js"></script>
{block:IfInfiniteScroll}
<script type="text/javascript" src="http://proto.jp/js/tumblrAutoPager.js"></script>
{/block:IfInfiniteScroll}
<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('#postCnts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div#pgNvgt",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#pgNvgt a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".post",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 10,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('#postCnts').masonry({ appendedContent: $(this) }); }
);
});
</script>
Assistance would be very nice!
You should upgrade to the latest version of the script (v2.1.05). You're using v 1.0.1.
Also you have two masonry.js files, you only need one.
I'd suggest using jqueryInfiniteScroll over tumblrAutoPager and the imagesLoaded plugin instead of $(window).load http://masonry.desandro.com/docs/help.html