I am trying to call ajax on DatePicker bootstrap changeDate event but after trying every possible way I am failed. Please help me. For testing I use console.log.
Script :
$( document ).ready(function() {
$('.date-picker').datepicker();
$('.date-picker').on('changeDate', function() {
var date = $('#date-picker').val();
console.log(123);
return false; // for testing...
});
});
HTML :
<p class="_50">
<label for="TitleID"><strong>Date </strong></label>
<input name="date-picker" id="date-picker" value="" class="date-picker"" type="text" class="required" readonly="readonly"/>
</p>
Be sure that the input has been loaded and then initialize the plugin.
Try on window.load:
$(window).load(function() {
$('.date-picker').datepicker().
.on('changeDate', function() {
// Your ajax call
});
});
Change "changeDate" to "change" simply:
<p>Date:
<input id="datepicker" type="text">
</p>
$("#datepicker").datepicker().on('change', function() {
alert("changed");
});
Demo Fiddle
Related
I am trying to call keyup event using EventListener for input tag but it is not working and I don't know why. below is my code
document.getElementById("ajax").addEventListener("keyup", function() {
alert("called");
});
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist">
<datalist id="json-datalist"></datalist>
Even if I tried JQuery but still it is not working but if I use
document.addEventListener(keyup,function(){
alert("called");
});)
then this is working but this is not what I want
Help will be appriciated
jQuery
$("#ajax").keyup(function() {
alert( "called" )
})
or
$("#ajax").on( "keyup", function() {
alert( "called" )
})
Your JavaScript Code is working
Try Following Using Jquery
$('#ajax').keypress(function(){
alert('called')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist">
<datalist id="json-datalist"></datalist>
You can Try Using jquery Keyup Event
$(document).on('keyup','#ajax',function(){
alert('Called');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist">
<datalist id="json-datalist"></datalist>
Below code snippet has HTML onchange attribute as well as jQuery's change event on the input text. I want only the jQuery's change event to be effective. I tried using both unbind and off without luck.
Could somebody please help?
$(document).ready(function(){
$("#testInput").unbind("change").bind("change",function(){
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');"/>
If you want to remove the "previous" onchange event, use
$("#testInput").removeAttr("onchange")
$(document).ready(function() {
$("#testInput").removeAttr("onchange")
$("#testInput").unbind("change").bind("change", function() {
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');" />
Just remove onchange attribute. removeAttr('onchange') will remove onchange attribute
$(document).ready(function(){
$("input").each(function(){
$(this).removeAttr('onchange');
});
$("input").bind("change",function(){
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');"/>
<input id="testInput2" type="text" onchange="console.log('change');"/>
you could set the onchange to null and add listener, like:
$(document).ready(function(){
//remove inline 'onchange' event by setting it to null
$("#testInput")[0].onchange = null;
$(document).on("change" "#testInput", function(){
console.log("jQuery change");
});
});
try this
$(document).ready(function(){
$(document).on('change','#testInput',function(){
console.log("jQuery change");
});
});
On add more click i am generating multiple date picker but its not working
please help me code is bellow
Html Code
<input type="text" name="end_date[]" class="form-control pull-right" id="datepicker" required>
<input type="text" name="start_date[]" class="form-control pull-right" id="datepicker1" required>
javascript code
$(function () { $("#datepicker").datepicker( {format: 'yyyy-mm-dd'}); });
$(function () { $("#datepicker1").datepicker({format: 'yyyy-mm-dd'}); });
As you have mention that you are creating dynamic text field so you have to use .on function:
Here is the solution:
$(function (){
$('body').on('focus',"#datepicker", function(){
$(this).datepicker({format: 'yyyy-mm-dd'});
});
$('body').on('focus',"#datepicker1", function(){
$(this).datepicker({format: 'yyyy-mm-dd'});
});
});
Feel free to ask if you have any query.
I wanne add multiple users in jQuery. I have the following code but it doesnt work. Does someone knows why?
Thanks!
<script type="text/javascript">
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.html('Gebruiker: <input type="text" name="user[]"><br />');
$(newuser).appendTo('#users');
});
});
</script>
<section>
<span id="add">Nieuwe gebruiker</span><br /><br /><br />
<form action="" method="" id="users">
<input type="submit" name="send" value="verzenden">
</form>
Use simply string in your variable, no jQuery .html() function required. Then change your .appendTo() function to .append() and define the element in jQuery selector.
$( document ).ready(function() {
$('#add').click(function(){
var newuser = 'Gebruiker: <input type="text" name="user[]"><br />';
$('#users').append(newuser);
});
});
In case you are wondering why your current code is not working:
string starting with anything other than "<" is not considered HTML string in jQuery 1.9
http://stage.jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring
Therefore this code will work fine (as it starts with <):
$( document ).ready(function() {
$('#add').click(function(){
$('<input type="text" name="user[]">').appendTo('#users');
});
});
And for your current code to work use $.parseHTML:
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.parseHTML('Gebruiker: <input type="text" name="user[]"><br />');
$(newuser).appendTo('#users');
});
});
$.parseHTML is used to parse the arbitrary HTML so that it is not taken as a selector by jQuery.
Edit: adding delete feature:
$( document ).ready(function() {
$('#add').click(function(){
var newuser = $.parseHTML('<div><label>Gebruiker:</label> <input type="text" name="user[]"><span class="delete">Verwijderen</span></div>');
$(newuser).appendTo('#users');
});
$(document).on('click','.delete', function(){
$(this).parent('div').remove();
console.log('reached');
});
});
jsFiddle Example: http://jsfiddle.net/RtTpN/
yep, there is nothing called $.html() in jQuery. html is a method of set of nodes instead.
You can do something like:
$(document).ready(function () {
$('#add').click(function () {
$('#users').append('Gebruiker: <input type="text" name="user[]"><br />');
});
});
Working Demo
I have a jqueryui datepicker associated with a input text. When i make the input textbox readonly i dont want the datepicker to show up . Is that possible? I would be setting the readonly property to true or false from the code.
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
j$('#chkBoxb').click(function(){
var paramChangeBoxes = j$('input:checkbox.change');
if (j$(this).is(':checked')) {
paramChangeBoxes.removeAttr('checked');
j$('#chkBoxb').attr('checked', 'checked');
j$('#CompleteDate').attr('readonly',false);
j$("#CompleteDate").datepicker();
}
else
{
j$('#CompleteDate').attr('readonly',true);
$( "#CompleteDate:not([readonly])" ).datepicker();
}
});
Updated the code
disable it like this:
$('#dateSelector').datepicker('disable');
and enable it like this:
$('#dateSelector').datepicker('enable');
Here's a working sample: http://jsfiddle.net/CG64h/8/
I ran into this today and unfortunately, the answers provided above did not work. Read the datepicker code, here's how it's done in jqueryui 1.10:
$(selector).datepicker("option", "disabled", true);
Here you go:
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
<script>
$('#chkBoxb').click(function(){
if ($(this).is(':checked')) {
$('#CompleteDate').attr('readonly',false)
.datepicker();
} else {
$('#CompleteDate').attr('readonly',true)
.datepicker("destroy");
}
});
</script>
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDisabled.html
I believe you should use 2 different textbox's and toggle them as needed so that only one is shown at a time. The first one as plain text box and the second one with jquery Datapicker applied.
if($("#").attr("enabled")=="false") {
$("#").attr("disabled","true");
}
Just change the selector and add :enabled
$( "#datepicker:enabled" ).datepicker();