I do not succeed in using Jquery with Symfony.
For information I use Jquery link provided by google.
in my twig file I have the following lines:
<!DOCTYPE html>
<html>
<head>
<title>my title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="{{ asset('/js/myjsfile.js') }}" type="text/javascript"></script>
</head>
<body>
<string class="changecolor red">HELLO<string>
</body>
</html>
in my myjsfile.js I have the following lines: (the file is in folders: Symfony/web/js)
$(document).ready(function(){
$(".changecolor").mouseenter(function(){
$(this).addClass("blue");
}
$(".changecolor").mouseleave(function(){
$(this).removeClass("blue");
$(this).addClass("red");
}
});
my css file is working fine so I do not put it here (just is .blue{color:blue};)
You haven't closed events methods parenthesis. Your JavaScript code should look as follows:
$(document).ready(function(){
$(".changecolor").mouseenter(function(){
$(this).addClass("blue");
});
$(".changecolor").mouseleave(function(){
$(this).removeClass("blue");
$(this).addClass("red");
});
});
Why are you using so old jQuery version? Why don't you make this effect using CSS :hover selector?
Related
Here is working example https://www.codeply.com/go/bp/lxa0FF9yhw# that I need to work in one html file.
I am using this template to merge HTML, Css and javascript:
<html>
<head>
<style type="text/css">
CSS goes here
</style>
<script type="text/javascript">
JS goes here
</script>
</head>
<body>
HTML goes here
</body>
</html>
But as a result I see all lines of table instead of pages.
Is this a problem with Bootstraping? I am including jQuery and javascript
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script src='script.js' type="text/javascript"></script>
I still see all lines in a result. I tried this code in https://jsfiddle.net/tfyqwLkr/. It also shows all lines of table.
How to include all required elements in this case?
Try placing your Javascript just before the body end tag: </body>.
You might be calling DOM elements that haven't been parsed yet.
<html>
<head>
<style type="text/css">
/* CSS goes here */
</style>
</head>
<body>
<!-- HTML goes here -->
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js'></script>
<script src='script.js' type="text/javascript"></script>
<script type="text/javascript">
// JS goes here
</script>
</body>
</html>
EDIT: After posting your code, looks like you are trying to call size(), a deprecated method since jQuery 3.0.
Note: This method has been removed in jQuery 3.0. Use the .length property instead.
That throws some errors in the console. Change children.size() to children.length.
Check the updated Fiddle. (Line 23)
I am trying to build my personal website using express and want to put a datepicker on one of the page.
I tried to change the ejs file of this page, however, nothing works.
I am wondering if it is because that the layout.ejs file exists, and wondering how can I just load jquery-ui in only of the ejs.file? Because I cannot find any related npm to install . Many thanks for answering！XD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
$( "#datepick" ).datepicker();
});
</script>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
There is another similar question, but I think the answer does not works for me.
node.js - DatePicker jquery UI not workinng
When I just use Express and change the index.ejs like the following, it works , but when there are many pages, it seems that it cannot be loaded...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepick').datepicker();
});
</script>
</head>
<body>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
node.js - DatePicker jquery UI not workinng
For whom run into the same problem, this is the reference.
I finally found the answer by checking the code.I was unable to load JQuery for in the layout.ejs, I retyped the following in order to load the bootstrap, but actually by using https://npmjs.org/package/twitter-bootstrap-node twitter-bootstrap-node, there is no-need to load the javascripts again. This may be a common problems for beginners in Node.JS like me.Hope this answer can be helpful to people who run into the same problem and the code is in the answer of the related problem.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/vendor/twitter/less/bootstrap.less"></script>
Hi look at this jsfiddle link http://jsfiddle.net/w7PHj/
you need to use like this....
$('#datepick').datepicker();
I'm quite new to both html/css and jQuery. I'm trying to get a vimeo video to open with fancybox on my page. I've read a bunch of similar questions on stackoverflow and nothing has worked. I've even put my code into JSFiddle and it WORKS. (http://jsfiddle.net/8hMLb/1/)
Heres my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<!-- Fancybox Javascript -->
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript" src="fancybox/source/jquery.fancybox.js"></script>
<script type="text/javascript" language="javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" language="javascript" src="fancybox/source/jquery.fancybox-media.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
</head>
<body>
<a class="fancybox-media" href="http://vimeo.com/70926140">Vimeo.</a>
</body>
I've triple triple checked that source files are correct. It works for images, just not vimeo (or youtube, or any media). It works in JSFiddle. I'm totally stumped here. Any help would be greatly appreciated!
It turned out that the fact that I was working locally was the issue. When I uploaded a test version of the code to the actual site, it worked. I guess my local environment was having trouble getting to vimeo.com or something
Some of my sites are fine but others I go to create from scratch like so:
<?php
define("NAME", "Terrasoft");
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?=NAME?></title>
</head>
<script href="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script href="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("#date").html(Date.parse("today"));
});
})(jQuery);
</script>
<style type="text/css">
#date {
font-weight: bold;
}
</style>
<body>
<div>
Welcome to the <strong>Terrasoft Development Server</strong>. This page was output at a system time of <strong><?=date("g:i:s A")?></strong> on <strong><?=date("F j<\s\u\p>S</s\u\p>")?></strong>. The current local time is <span id="date"></span>.
</div>
</body>
</html>
... and the script elements at the top do not get included and have no content inside Firebug. I am online—that's not the issue. I get jQuery is not defined. Any ideas? Thanks.
Script tags do not have the href attribute, use src.
<script src="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
You should be aware that href attributes are for <a> tags/anchor.
the src attribute specifies the URL of an external script file.
Note: Point to the external script file exactly where the script is written.
Syntax:
<script src="URL">
Html:
<!DOCTYPE html>
<html>
<head>
<SCRIPT language="JavaScript" src="mapbody.js"></SCRIPT>
</head>
<body>
Click for a message..
</body>
</html>
mapbody.js:
function a_message()
{
alert('I came from an external script! Ha, Ha, Ha!!!!');
}
When I pull up the web page and click the link nothing happens. Both files are in the same folder. What am I missing?
Several things:
HTML-elements should all be lower-case.
The language-attribute in the script-tag is obsolete. Use type="text/javascript" instead.
A JavaScript-function call should go into the onclick-attribute, not the href.
A proper implementation might look like this:
<!DOCTYPE html>
<html>
<head>
<title>Is required!</title>
<script type="text/javascript" src="mapbody.js"></script>
</head>
<body>
<a onclick="a_message();" href="#">Click for a message..</a>
</body>
</html>
Also, binding function-calls to an HTML-Element using the onclick (or any other onXX-attribute) is old-school. Library's like jQuery enable you to use CSS-selectors to bind actions on certain HTML-elements, which allows a full separation of HTML and JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
Click for a message..
<script type="text/javascript" src="mapbody.js"></script>
</body>
</html>
Lukas Knuth was faster than me. :)
Works for me (Firefox 8) : http://jsfiddle.net/FCXxU/
Is the URL to your script good?
A simple way to check that is to add an alert('test'); at the beginning of mapbody.js (before the function).