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>
Related
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.
So I was trying to simplify my header and somehow now my local jquery file doesn't load anymore. Other js files load fine but not jquery (i checked with Chrome's DevTools source section).
So I made a test file with a header stripped of most useless things to show you :
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Non-Conformité</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<script type="text/javascript" scr="../bower_components/modernizr/modernizr.js"></script>
<script type="text/javascript" scr="http://{InternalCompanyServer}/nonConforme/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" scr="bower_components/jquery/dist/jquery.js"></script>
<script scr="js/jquery.js"></script>
<script type="text/javascript" src="bower_components/foundation/js/foundation.js"></script>
</head>
<body>
<div class="row topMargin" header>
<img class='small-3 columns logo hide-on-print' src="img/logo-fr.png"/>
<h2 class='small-9 columns' >Formulaire Non-Conformité</h2>
</div>
<div class="row"></div>
</body>
As you can see I tried multiple ways to write the link : Absolute then Relative, I even copied the jquery file to the js folder and tried to link it but no luck.
The foundation.js file just after it loads fine but it gives the : "foundation.js:703 Uncaught ReferenceError: jQuery is not defined(…)" Error. Comment if you need more info I didn't think of putting here.
you put scr forjQuery url instead of src ;)
Edit> just a reflex : https://validator.w3.org/check
Go to direct input, paste you html... and let' go : Line 7, Column 40: there is no attribute "SCR"
I'm having an issue getting started with AngularJS. I have downloaded the minified file and have it living in a JS directory along with a app.js file. Everything works until I try calling the app.js file. Then it breaks. Here's my code.
index.html
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>My App</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app>
<h1>Intro to Data Binding</h1>
<div ng-controller="DBController">
<input type="text" ng-model="userName" />
<p>Hello, {{userName}}.</p>
</div>
</body>
app.js
function DBController($scope) {
$scope.userName;
}
on your body tag do ng-app="app"
then, in your .js file...
angular.module('app', [])
.controller("DBController", function($scope){
$scope.userName = "My Name";
})
It also might be helpful to get a basic understanding of angular
the angular team provides a lot of useful videos and other resources
https://docs.angularjs.org/misc/started
Free Video Tutorials: https://www.codeschool.com/courses/shaping-up-with-angular-js
I am building a webapp using Maven, Spring 4, Angularjs and Thymeleaf. I create some Thymeleaf template ( in directoty templates/fragments ). I have attached a screenshot of my eclipse web project.
The problem i am facing is about referencing libraries and css file, i am getting 404 not found on firebug.
HTML (index.html)
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<script type="text/javascript" href="/js/lib/angular.js" th:src="#{/js/lib/angular.js}"></script>
<script type="text/javascript" th:src="#{/js/lib/ui-bootstrap-tpls-0.11.0.js}"></script>
<title>Jobly - login page</title>
</head>
<body>
<div th:include="templates/fragments/header::header"></div>
<h1>Hello on a second page!</h1>
<p>Click <a th:href="#{/hello}">here</a> to go back.</p>
<div th:include="templates/fragments/footer::footer"></div>
</body>
</html>
Here is the snippet code of header template :
<link th:href="#{/css/bootstrap.min.css}" rel="stylesheet" media="screen"/>
<script type="text/javascript" th:src="#{/js/lib/jquery-1.11.1.min.js}"></script>
<script type="text/javascript" th:src="#{/js/lib/bootstrap.min.js}"></script>
Below the screenshot of 404 error
I've resolved my problem. It was a problem of specifing resources location and mapping in Spring configuration file. I add in app-servlet.xml
<mvc:resources mapping="/**" location="/"/>
I've been trying to add datetimepicker (http://trentrichardson.com/examples/timepicker/) functionality to my form, but first, I created simple html file to test that library. It is not working. Here's my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<title>Test Environment</title>
</head>
<body>
<div>
<form>
<input id="appointment-form" name="app" value="">
</form>
</div>
<script>
$(document).ready(function(){
jQuery('#appointment-form').datetimepicker();
});
</script>
</body>
</html>
And I get
TypeError: e is undefined
...eturn t?u.length:u?nt.error(e):L(e,a).slice(0)}function at(e,t,r){var i=t.dir,s=...
jquery....min.js (line 2)
All libraries loaded in correct order, do not know what else to do
UPDATE:
Added link to the datetimepicker library
I've downloaded again that library and it worked )
Thanks to Alvaro, this silly question can be closed.