Im creating a signup page for my website but it is not responding to a click. I have the jQuery in a seperate file called signup.js. I know it is linked properly because an alert works.
Any help would be apreciated. Thanks
html:
<html>
<head>
<title>Sign Up</title>
<script src="JS/jquery-3.1.1.min.js"></script>
<script src="JS/signup.js"></script>
<link rel="stylesheet" href="CSS/signup.css">
<link rel="stylesheet" href="CSS/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<button id="signup-button">Sign Up</button>
</div>
</div>
</body>
</html>
jQuery:
$("#signup-button").click(function() {
alert("clicked");
});
You are trying to get the element before loading the DOM element so it won't get attach the handler to the element since it's not present at that point. To make it works wrap it using document ready handler or move the script tag after the element in the markup.
$(document).ready(function(){
$("#signup-button").click(function() {
alert("clicked");
});
});
Since the latest jquery update, everything is pointed on .on so .click is no longer valid, use
$('#signup-button').on('click', function(){//code here})
instead, and make sure you put it in a DOM ready
Make sure your code is executed on document ready.
$(function(){
$("#signup-button").click(function() {
alert("clicked");
});
});
I recommend you just put your jquery in the head, and the other javascript in the end of your body, because your js file is probably be "read" before your jquery file.
<html>
<head>
<title>Sign Up</title>
<script src="JS/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="CSS/signup.css">
<link rel="stylesheet" href="CSS/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<button id="signup-button">Sign Up</button>
</div>
</div>
<script src="JS/signup.js"></script>
</body>
</html>
and change your js file to:
$(function(){
$("#signup-button").click(function() {
alert("clicked");
});
});
because the $(function(){}); waits until the DOM is load and can be manipulated.
Related
I'm using Bootstrap 3 DateTimePicker but having some minor issues.
Basically, on the dp.show event, how do I get the source control? As far as I can tell, there is no parameter sent with the event, so I'm having a hard time figuring out which control actually showed.
(I have many pickers in my application)
Standard JQuery would tell me I could use e.Target, but there is no e sent with the event :(
How do I handle this?
You can attach a handler to your datepicker collection
$('.datepicker').on('dp.show', function() {
// this here will refer to the currently showing widget
console.log(this);
});
This is the standard bootstrap way of dealing with events.
EDIT: if you read the source code, the event is bound to the element with which the datepicker is initialized: https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstrap-datetimepicker.js#L451
you can use events like below
<script src="//code.jquery.com/jquery-2.1.3.js" type="text/javascript"></script>
<link href="/css/result-light.css" type="text/css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" type="text/css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js" type="text/javascript"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$('#datetimepicker6').datetimepicker();
$("#datetimepicker6").on("dp.show", function(e) {
console.log(e);// e is event and use console to explore other options
});
}); //]]>
</script>
</head>
<body>
<div class="input-group ">
<input type="text" class="form-control" id="datetimepicker6">
</div>
</body>
</html>
I've checked as many questions as I can and the answer I keep getting is to use javascript or jQuery to do it. So I have my main html file:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<!-- I want to insert a paragraph here -->
<div id="a"></div>
<script>$( "#a" ).load( "insertme.html" );</script>
</body>
</html>
insertme.html
<p>Inserted into another doc!</p>
I found this method here, and as far as I can tell I've implemented it the same way.
So what am I doing wrong here? Why is my code not being inserted?
Firstly, you are missing jQuery. Add this line to your <head></head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Do you have a DOM readiness issue?
Try this:
$(document).ready(function(){
$( "#a" ).load( "insertme.html" );
});
Also, make sure that insertme.html is in the same folder as your index.html file.
I have this simple html file with little bit of jQuery in it but click event is not triggered here:
I am not getting any error and neither the console.log statement that I expect to print when click event is triggered.
Did I miss out on something?
<!doctype html>
<html>
<head>
<title>My WebPage</title>
<link rel="stylesheet" type="text/css" href="Day.css"/>
<link rel="stylesheet" type="text/css" href="Night.css"/>
</head>
<body>
<h1> My website </h1>
<button>Day</button>
<button>Night</button>
<script src="jquery.js"/>
<script>
(function(){
console.log('Inside func');
$('button').click(function() {
console.log('button was clicked');
});
})();
</script>
</body>
</html>
<script src="jquery.js"/>
should become:
<script src="jquery.js"></script>
You can read more about self-closing script tags here: Why don't self-closing script tags work?
I would just use the JQuery CDN in the head section.
Here's a demo
I an currently designing a ajax based navigation website. The problem I encountered is when I try to run jquery on dynamically loaded content it doesn't work.
Here is what I did:
index.html
<html>
<head>
<title>Testing Dynamic Content</title>
<link href="style.css" rel="stylesheet"/>
<script src="http://localhost/jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="main">
<div class="content">
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
<script>
$('.list').greenify();
</script>
</body>
</html>
2.html
<html>
<head>
<title>Testing Dynamic Content</title>
<link href="style.css" rel="stylesheet"/>
<script src="http://localhost/jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="main">
<div class="content">
<span id="hello">Content</span>
</div>
</div>
<script>
$('#hello').on('click',function(){
$('.main').load('index.html .content');
$('.list').greenify();
});
</script>
</body>
</html>
style.css
.list{
color:#f00;
}
main.js
$.fn.greenify = function() {
this.css( "color", "red" );
};
The problem is in the $('list').greenify();. When I load content of index.html on 2.html using .load() the content loads in red color as defined in css. When I run $('list').greenify() on this loaded content it doesn't works.
How can I run mak this happen to run JavaScript on dynamically loaded content?
I need to do this to make a slideshow run on dynamically loaded webpage. And slideshow is not working.
issue is your code run before your page successfully loaded, move your code to document ready event:
$(document).ready(function(){
$('.list').greenify();
})
and jQuery load is async you need to run your javascript in success function
$('.main').load('index.html .content', function() {
//will execute when load successfully
$('.list').greenify();
});
You should bind the events like this then only your script will affect on dynamic DOM elements
$('body').on('click','#hello',function(){
$('.main').load('index.html .content');
$('.list').greenify();
});
I'm not quite sure why it isn't working. I got the jQuery from the Google server and it just wont recognize my fadeOut.
Here's my html File
<!DOCTYPE html>
<html>
<title>Prepare your Jimmies</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<body>
<div id="loading">
<p id="rj">Shh... No tears, Only Dreams Now</p>
</div>
</body>
</html>
Here is the script.js file
// JavaScript Document
$(document).ready(function() {
$('#rj').fadeOut(100,'slow');
});
Any help would be appreciated. Thanks
I think fadeOut takes two parameters, one timeout and one callback. So it should be:
// JavaScript Document
$(document).ready(function() {
$('#rj').fadeOut('slow');
});
or
// JavaScript Document
$(document).ready(function() {
$('#rj').fadeOut(100);
});
http://api.jquery.com/fadeOut/
Your problem is that you're passing both 100 and 'slow' to fadeOut.
As per the docs, the first argument, duration, is:
A string or number determining how long the animation will run.
Simply use "slow" OR 100, and you're fine:
$('#rj').fadeOut('slow');
or
$('#rj').fadeOut(100);
FIDDLE
(You'll notice that I did not include jqueryui in the fiddle.)
As you can see in the documentation, fadeOut take 2 arguments
the first is the duration of the animation, you can put 100 for 100ms or 'slow', the second argument is the function which was execute after your animation.
fadeOut Doc
So you line
$('#rj').fadeOut(100,'slow');
is wrong, you can write :
$('#rj').fadeOut('slow');
or
$('#rj').fadeOut(100);
For easing you also have to include the jquery-ui library:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
It looks like you are using fadeOut wrong, it accepts a speed and a callback function, it looks as if you are trying to do a delay so try:
$(document).ready(function() {
$('#rj').delay(100).fadeOut('slow');
});
Also make sure your script is in the same folder as your HTML page as your source states.
You have no head! ;)
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Prepare your Jimmies</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="loading">
<p id="rj">Shh... No tears, Only Dreams Now</p>
</div>
</body>
</html>