Develop Reference

jQuery datepicker only loads for first item added by JavaScript

I'm trying to load a jQuery datepicker for input fields which are added using append();
The datepicker is loading fine for the first input field, but for any additional ones added it does not load, see JSFiddle for an example here: https://jsfiddle.net/exsupjy2/1/
HTML:
<button class="add-seasonal-filter button-primary" type="button">Add Date</button>
<div class="seasonal-filter-wrapper-outer"></div>
<div class="seasonal-filter-wrapper" style="display:none;">
<input type="text" name="seasonal-date-from" class="datepicker" />
</div>
JS:
$(document).ready(function() {
"use strict";
function load_datepicker() {
$(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
$(".datepicker").attr("readonly", true);
}
function add_seasonal_filter() {
$(".add-seasonal-filter").on( "click", function() {
$(this).parent().find(".seasonal-filter-wrapper-outer").append($(".seasonal-filter-wrapper").html());
load_datepicker();
});
}
add_seasonal_filter();
});

You just need to update JavaScript 100% working:
Need to removeClass('hasDatepicker') before adding..
See here:
$(".datepicker").removeClass('hasDatepicker').datepicker({dateFormat: "yy-mm-dd"});
JavaScript:
$(document).ready(function() {
"use strict";
function load_datepicker() {
$(".datepicker").removeClass('hasDatepicker').datepicker({dateFormat: "yy-mm-dd"});
$(".datepicker").attr("readonly", true);
}
function add_seasonal_filter() {
$(".add-seasonal-filter").on( "click", function() {
$(this).parent().find(".seasonal-filter-wrapper-outer").append($(".seasonal-filter-wrapper").html());
load_datepicker();
});
}
add_seasonal_filter();
});

$(document).ready(function() {
$('#btnadddate').click(function(){
$('#content').append('<br>a datepicker <input class="datepicker_recurring_start"/>');
});
$('body').on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
});
<button id="btnadddate">add a datepicker</button>
<div id="content">
Add Date <input class="datepicker_recurring_start" name="seasonal-date-from"/>
</div>

JavaScript is not working on my html document

I have a button on my HTML document as listed below
<input type = "submit" value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;" id = "mac">
And I have this block of jQuery at the bottom of the document. It is supposed to fade in the div with the id "gold" when the button is clicked.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeIn('slow');
});
});
</script>
However the code does not seem to work/trigger and nothing happens. Any suggestions to why this is happening is greatly appreciated.
Note: display: none is applied to the "gold" div in css, but I want the div to fade in once the button is clicked.

Split up your script tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeOut('slow');
});
});
</script>
Edit: JSFiddle

Here is working example:
$(document).ready(function () {
$("#mac").click("input", function(){
$('#gold').fadeOut('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "submit" id = "mac"value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;">
<div id="gold">Some content</div>

Change your javascript like this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeOut('slow');
});
});
</script>

If your div#gold is display:none;
you need to update your jQuqery to fadeIn("slow")
$('#mac').click(function(){
$('#gold').fadeIn('slow');
})

try this
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type = "submit" value = "button" class = "col-sm-1" style="white- space:normal;" id = "mac">
<div id="gold" style="display:none">
hello
</div>
<script>
$(document).ready(function () {
$('#mac').click(function(){
$('#gold').fadeIn('slow')
});
});
</script>

Passing variables to nested jQuery functions

I've got two input fields that each dynamically generate a small image with a red cross when they are filled with text. The idea is that the user can clear the text by clicking on that image. The javascript code is exactly the same with the only difference being the alt value of the image and the name attribute of the input box.
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script>
$( document ).ready(function() {
$("input[type='text']").keyup(function(){
var alt = "clear"+$(this).attr("name");
if($(this).val() && !$("img[alt='"+alt+"']").length){
$(this).after("<img src='images/cross.png' alt='"+alt+"'/>");
}
});
$(document).on('click', 'img[alt="clearsource"]' , function(){
$( "input[name='source']" ).val('');
$(this).remove();
});
$(document).on('click', 'img[alt="clearlocation"]' , function(){
$( "input[name='location']" ).val('');
$(this).remove();
});
});
</script>
</head>
<body>
<form>
<input type="text" name="source" placeholder="Source" /><br />
<input type="text" name="location" placeholder="Location" />
</form>
</body>
</html>
I wanted to make a reusable function through which I can pass two variables, and then call it twice. This is my attempt but it's not working. Can someone please help? Is it a scope issue?
Here is the JSFiddle version: https://jsfiddle.net/2bk86w4y/
<script>
$( document ).ready(function() {
$("input[type='text']").keyup(function(){
var alt = "clear"+$(this).attr("name");
if($(this).val() && !$("img[alt='"+alt+"']").length){
$(this).after("<img src='images/cross.png' alt='"+alt+"'/>");
}
});
// == The function below replaces the duplicate functions in the previous code block.
// == Unfortunately it doesn't work. Please help :(
function clearBox(inputname,imagealt){
$(document).on("click", "img[alt='"+imagealt+"']" , function(){
$( "input[name='"+inputname+"']" ).val('');
$(this).remove();
});
}
clearBox("clearsource","source");
clearBox("clearlocation","location");
});
</script>
Many thanks in advance!

You've got your parameters the wrong way round.
https://jsfiddle.net/daveSalomon/2bk86w4y/1/
clearBox("clearsource", "source");
clearBox("clearlocation", "location");
// should be...
clearBox("source", "clearsource");
clearBox("location", "clearlocation");

Jquery change Content link value

Hi I have a group of divs and a next button.
<div class="check" id="a1"> ... </div>
<div class="check" id="a2"> ... </div>
<div class="check" id="a3"> ... </div>
...
<div class="check" id="an"> ... </div>
Next
This is my jquery code:
jQuery( "#next" ).click(function() {
// filter function
});
So when I try to link the address bar value would be http://myhost.com#some-div
Is it possible that I can change it into http://myhost.com#a2 withount changing the #next href value?

jQuery( "#next" ).click(function() {
// filter function
location.hash="a2";
e.preventDefault();
});

jQuery( "#next" ).click(function(e) {
e.preventDefault();
location.hash = "a2"
});

$("#next").click(function (e) {
e.preventDefault();
location.hash = "a2"
});

I would like my id to shake when the user clicks a button

i would like my id to shake when a user clicks it, how can i achieve that? I am a beginner in jquery and am currently finishing up php, I am going to study jquery next.example:https://twitter.com/signup
this is my html:
<input id="sub" type="submit" value="Sign Up">
and this is my js:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$( document ).click(function() {
$( "#sub" ).effect( "shake",{distance:100} );
});
</script>
also if i wanted to implement times and direction would i do this?:
$( "#sub" ).effect( "shake",{direction:right},{distance:100},{times:6} );

Try this out:- http://jsfiddle.net/adiioo7/kx8q8/2/
Use #sub instead of document on click.
jQuery(function ($) {
$("#sub").click(function () {
$(this).effect("shake", {
direction: 'right'
}, {
distance: 100
}, {
times: 6
});
});
});

JSBIN: http://jsbin.com/uGAMulOL/3/
Add the # for the sub id element and put right in quotes. Also the options should be fixed in the object literal.
$("#sub").click(function() {
$(this).effect("shake",{direction:'right',distance:100,times:6000});
});