I am newbye of grails3. Trying to use jquery basics, I got Jquery not defined in my project. Is jquery no more default for grails?
I try at the beginning of my gsp, but giving me not defined. So I switch to manual refeering.
Is it correct simply put jquery min js file in asset and use <asset:javascript src="jquery-2.2.0.min.js"/>, or should I use another, more basic, way?
In the latest grails as in 3.1.1 I found when it generates
grails-app/views/layouts/main.gsp
It has:
<asset:stylesheet src="application.css"/>
<g:layoutHead/>
</head>
...
<div class="footer" role="contentinfo"></div>
<asset:javascript src="application.js"/>
..
Modify this file and move that application.js under css file:
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<asset:stylesheet src="application.css"/>
<asset:javascript src="application.js"/>
<g:layoutHead/>
</head>
<body>
Try again bob may be your uncle by this point
Related
I have my index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Aerosmith Messenger</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="assets/spinner.css" />
<!--<script src="src/scripts/jquery-1.6.4.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
</head>
<body>
<am-root>
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</am-root>
</body>
</html>
I'm trying to include jquery script. And it does not work when i include it like this (commented line). Help me resolve this issue because i need to include some other scripts.
By "does not work" i mean all the time that commented script is not found in console of a browser.
Make sure you provide the path of "jquery-1.6.4.js" exactly where it is located. Check the src/scripts.
And if it is there then you should include it somewhat like this,
"~/src/scripts/jquery-1.6.4.js".
Assuming you have "src" folder in which "script" folder exists, which has your jquery file.
Try add script and style to angular-cli.json in root project, as follows:
"apps": [{
...
...
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"./styles.css"
],
"scripts": [
"assets/js/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"assets/js/custom.js"
],
Latest version of angular-cli(angular-cli: 1.0.0-beta.19-3) provides an assets folder under src directory. You just need to add src property of an image tag as below,
<img src="./assets/logo.png">
But as turns out i ditn't need to include any scripts to my index.html. The main problem was that sometimes my project didn't detect the changes. I mean - in past i added line to include jquery on index.html, my project didn't detect it and therefore browser didn't show any errors (not found) and after that all the time i thoutht that i was working with jquery because of that included jquery on index.html. But actually jquery was working because i also included it in different way. So be careful about 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"
So I have an index.html file with the following text:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Wade Game Engine</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="wade_1.5.js"></script>
<script src="wade.ifx_1.0.js"></script>
<script src="wade.particles_1.0.1.js"></script>
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
</head>
<body>
<div id="container" style="border:0; width:800px; height:600px;">
<div id="wade_main_div" width="800" height="600" tabindex="1"></div>
</div>
<div id="chromeFix"></div>
<div id="chromeFix2"></div>
</body>
</html>
When I try to run this using a browser (tried with google chrome and internet explorer) it just pops a window saying:
unable to load main app script app.js
So I assume the problem is here:
<script>
$(document).ready(function() {
wade.init('app.js');
});
</script>
But I can't understand what's the problem...
Could anyone help me with this? It's driving me insane!
It could be that there is an error in app.js (so it isn't a valid .js file), or it could be that your browser is not allowing you to load local scripts asynchronously.
With Chrome, you could add --allow-file-access-from-files as a command line argument. Note that you only need to do this if you're using local files - if the files are hosted on a web server, it should just work without all this.
Alternatively, you can include app.js with the other script tags that you have in your HTML file, and just call wade.init() without passing 'app.js' to it
Do you have an app.js file? I haven't used this game engine but looking at its documentation, it appears that the init() method takes a mandatory parameter appScript, containing the filename of the app. In your case this would be app.js.
Make sure that you have the file app.js included in the same directory as your index.html file.
Hope this helps.
how to rename $ and jQuery ?
I have created widget and which is used in 3rd party website.
As i am getting conflict with jQuery with 3rd party website.
And I don't aware about which version of jquery 3rd party is using so i am stuck at this point.
so now if it is possible to rename ,then let me know how to do it in jquery.js library.
Otherwise i have to rewrite whole my script (about 3000+ lines) in native java script. and this is not possible because my script using third party js like fullcalendar, colorbox, validationengine etc. which fully dependent on jquery.
<html>
<head>
</head>
<body>
3rd party website
<script src="jquery-1.5.js"></script>
// My widget code : Start
<script src="http://my-domain.com/my-widget.js"></script>
<div id="my-result"></div>
// My widget code : End
</body>
</html>
EDIT 1
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<div id="my-result"></div>
<script src="js/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('jquery', '1.5');
</script>
<!--<script src="http://code.jquery.com/jquery-migrate-1.2.1.js" type="text/javascript"></script>-->
</body>
</html>
it's not recommended to change code in the jquery file itself, just use no conflict:
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict( true );
// $j will point to your jquery version
$j('#somediv').show();
</script>
after seeing the last edit, you can surround your my-widget.js code with closure that way your code will know $ as your version as jquery:
(function( $ ) {
// all my-widget.js code
})($j);
This is my .cshtml code
<!DOCTYPE Html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>welcome</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.0.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
</head>
<body>...</body>
</html>
Whenever I execute my code it gives the bootstrap requires jquery error. Please suggest what should I do to remove this error.
Make sure that the path is correct and points to jQuery version greater than 1.9
You are using 1.8 which is not compatible with bootstrap
Source:
https://github.com/twbs/bootstrap/blob/v3.1.1/bower.json
Just as Amit Joki said, make sure you link points directly to the jquery file and
the file name is spelt accordingly.
Also ensure that you link jquery js script before you link to the bootstrap js script
<script src="path_to_script/jquery-1.8.0.min.js"></script>
<script src="path_to_script/bootstrap.js"></script>
<link href="path_to_script/bootstrap.css" rel="stylesheet" />