I want to use JQuery and JSEncrypt in my Thymeleaf Page.
From researching I've found that I can achieve this with including the .js files of the libs that are saved in my /static/js/ folder of the spring boot application.
I get the following error:
FolderTree:
My HTML looks like this:
<html ..>
..
..
<link href="../static/css/layout.css" th:href="#{css/layout.css}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" th:src="#{js/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="#{js/jsencrypt.min.js}"></script>
<script type="text/javascript">
function encryptPw() {
var encPw = $('#password').val();
console.log(encPw);
}
</script>
</head>
<body>
<form ...>
...
...
<p>
<label for="password" class="login-hidden-label">Passwort</label>
<input type="password" id="password" name="password" class="login-input-field" placeholder="Passwort" required>
</p>
<button class="login-accept-button" onclick="encryptPassword()" type="submit">Anmelden</button>
</body>
</html>
Solved this by allowing all Requests in the spring web security for
/js/**
in my antMatchers.
httpSecurity.antMatchers("/js/**").permitAll();
fixes it.
Related
as i followed the official docs of flatpickr in this link for some reason the date picker didn't appear
here is what i did
i added this in my html head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
and this in my js file
import flatpickr from "flatpickr";
flatpickr("#myflatpickr", {});
in the html body where i have the input:
<input name="deadline" placeholder="Deadline" id="myflatpickr" required>
You can move it after the element is present in the DOM indeed as Paul T said. Or add a on document ready function to it. Couldn't reproduce the error message you've got.. Maybe just leave out the import/require part?:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</head>
<body>
<div><input name="deadline" placeholder="Deadline" id="myflatpickr" required></div>
<script type="text/javascript">
flatpickr("#myflatpickr", {});
</script>
</body>
</html>
I'm new to node.js and I've been trying to use a function in my chrome extension that uses require - however, even after
installing browserify,
bundling up the modules in content.js into bundle.js,
and trying to make require global with
browserify content.js --standalone Bundle > bundle.js
I'm still getting
Uncaught ReferenceError: require is not defined
The contents of my html file are at https://pastebin.com/JSUk1C0E
The contents of content.js (where my original code was) are at https://pastebin.com/BY7147R3
The contents of bundle.js are at https://github.com/zzirun/clickerance-bundle/blob/master/bundle.js
Any help would be really appreciated, and I'm really sorry if this is a stupid question hahaha
In order for it to work for me I added...
<script type="text/javascript" src="bundle.js"></script>
before the closing body call in my html page. So your html file should look something like...
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title> clickerance </title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="bundle.js"></script>
</head>
<body>
<div class="Title"></div>
<h1> Clickerance </h1>
Dairy : <input type="checkbox" id="Dairy"><br>
Meat : <input type="checkbox" id="Meat"><br>
Corn : <input type="checkbox" id="Corn"><br>
Gluten : <input type="checkbox" id="Gluten"><br>
<p>Which ones you can't eat?</p>
<input id="Submit" type="submit" value="Submit">
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
I would like to use a pdfform.js library(package) within react app. I have tried by using the npm pdfform but no luck.
Any help is much appreciated.
https://github.com/phihag/pdfform.js
Here is a working demo, maybe it will help you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pddform.js demo</title>
<link rel="stylesheet" href="https://phihag.github.io/pdfform.js/docs/demo.css" />
</head>
<body>
<div class="error"></div>
<form class="url_form">
<div>Upload a PDF form file: <label><input type="file" name="file" /></label></div>
<label>or download one: <input type="text" size="40" value="Spielberichtsbogen_2BL.pdf" name="url" /><button role="submit">Download</button></label>
</form>
<form class="cur_file"></form>
<form class="lib_form">
PDF library:
<label><input type="radio" name="pdflib" value="minipdf" checked="checked" />minipdf</label>
<label><input type="radio" name="pdflib" value="pdf.js" />PDF.js</label>
</form>
<form class="fill_form"><button class="fill" disabled="disabled">Fill and download PDF</button></form>
<form class="list_form">
</form>
<div class="loading">Loading (this may take a while since PDF.js is gigantic)</div>
<!-- In a real-life scenario, you want to chose EITHER minipdf (smaller) -->
<script src="https://phihag.github.io/pdfform.js/minipdf.js"></script>
<!-- .. OR pdf.js (huge, but better compatibility).
pdf.worker.js is slightly modified to export the actual classes we care about -->
<script src="https://phihag.github.io/pdfform.js/customlibs/pdf.worker.js"></script>
<script src="https://phihag.github.io/pdfform.js/minipdf_js.js"></script>
<!-- pako and pdfform.js are required either way -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.3/pako.min.js" integrity="sha256-X7u/eQo6oIgWqc5jOmTjQn3loM8Lse0ock76Gkkn/Ro="
crossorigin="anonymous"></script>
<script src="https://phihag.github.io/pdfform.js/pdfform.js"></script>
<!-- FileSaver.js is just needed for the demo, although you'll probably use it in some form as well -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script>
<script src="https://phihag.github.io/pdfform.js/docs/demo.js"></script>
</body>
</html>
Okay, so when I follow the directions here for getting started with Materialize CSS, my input form always turns out like this:
My current index.html file is this:
<!DOCTYPE html>
<html>
<head>
<title>IRS</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="node_modules/materialize-css/css/ghpages-materialize.css">
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="node_modules/materialize-css/js/materialize.js"></script>
</head>
<body>
<div class="input-field">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
</body>
</html>
My electron version is 1.6.6 and node is at 6.10.3
Add "active" class to the tag and try
<div class="input-field">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name" class="active">First Name</label>
</div>
if you want only label animation, remove the placeholder for the <input> tag
Hope it works..
For anyone else with issues using materialize css with electron, here is how to get it to work the right way:
<script type="text/javascript" src="js/hammer.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
The issue is materialize.min.js is requiring hammer.min.js so you need to add it to your project and call it before materilize.min.js
I am trying to understand the basics of templating and have the following problem. When I try to attach ID or/and type attribute to the <script> tag in my HTML code it just doesn't work:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="somescript.js"></script>
</head>
<body>
<script type="text/html" id="template1">
<form name="formXY">
<p>
<label>Field1
<input type="text" name="form_field1" value= "{{field1}}">
</label>
<button type="button">Submit</button>
</p>
</form>
</script>
</body>
</html>
I ran this in chrome/firefox/IE9/Opera and none of them parse the code between the <script> tags. Browsers think it is just a text field. When I remove ID and type attributes it is again parsed correctly.
I am probably missing something very basic...
You need to add a non javascript type to the script tag, as the point is that you don't want the browser to parse it (as javascript), and by using a custom type the browser will ignore it (until you grab it with javascript that is)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="somescript.js"></script>
</head>
<body>
<script type="text/x-handlebars-template" id="template1">
<form name="formXY">
<p>
<label>Field1
<input type="text" name="form_field1" value= "{{field1}}">
</label>
<button type="button">Submit</button>
</p>
</form>
</script>
</body>
</html>
And then in your javascript somescript.js you need to get the contents of that script tag using something like this
var uncompiledTemplate = document.getElementById('template1').innerHtml;
// then pass this template to your templating engine...
// if your using handlebars:
var template = Handlebars.compile(uncompiledTemplate);
And then you can work with your template!
The content of the <script> tag is never parsed into DOM elements, the contents simply appear in the DOM as text (although <script> is display:none; by default so it does not appear on the page). If a type is provided has to be one that the browser recognises before it attempts to execute it. Note that older browsers used the language attribute instead.