I am trying to fire the onSelect event as shown below but, it is not working.
I need to use datepicker object as per my application design.
var datePickerObject = $('#datepicker').datepicker();
datePickerObject.datepicker(
{
onSelect: function(dateText, inst) { alert("Working"); }
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<input type="text" id="datepicker"/> //Updated as per Oscar jar suggestion
Any suggestion will be greatly appreciated.
Correct me if wrong but I think what you are doing wrong is that your datepicker component is getting initialized two times when invoking the datepicker(...) method for the first time when creating the datePickerObject and then again when adding other configurations (like your onSelect function) to the object that was already initialized (perhaps that's why it isn't working and your function is ignored since it's added in the second time).
So, if you avoid doing that and you only initialize the component for one time and use the configurations needed (see example from below) then you will get it working:
var cfg = {},
cmp = $('#datepicker');
// Add event handlers
cfg.onSelect = onDateSelect;
// Add other configs
cfg.changeMonth = true;
cfg.changeYear = true;
cfg.dateFormat = 'dd-mm-yy';
// Initialize component
cmp.datepicker(cfg);
function onDateSelect(date, cmp) {
console.log('Selected date is: %o', date);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<div id="datepicker"></div>
On the other hand, I wonder why did you have the following in your code snippet:
<div type="text" id="datepicker"></div>
(Since the type attribute is not part of the div element)
If that's what you need then add an input for your datepicker component, like this:
<input type="text" id="datepicker"/>
UPDATE:
I've tested your code and passed your event handler when initializing the component only for the first time and it works:
var datePickerObject = $('#datepicker').datepicker({
onSelect: function(dateText, inst) {
alert('Working');
}
});
Related
I am still learning javascript and Jquery. I am creating simple autocomplete with jQuery:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#nazov" ).autocomplete({
minLength: 2,
source: 'private/search.php',
select: function(event, ui) {
document.getElementById("pocet").value = ui.item.pocet;
}
});
});
<label for="nazov">Názov: </label>
<input id="nazov">
<input id="pocet">
I have some basic JS function to create inputs. Every new input has id="nazov" But autocomplete works only with non-dynamic inputs and every new input that is dynamically created do not work.
I think it is because autocomplete function do not know about new input. It is any way to change autocomple to looking for new inputs and autocomplete each one with different return? I found some deprecated function .live() and .on() but I think I cannot use it here, or I do not know how.
Thanks for any help.
Have a nice day!
As a ID is unique you should not assign a ID twice. Use a class for this instead. So your code would look something like this:
JS:
$(function() {
$(".nazov").autocomplete({
minLength: 2,
source: 'private/search.php',
select: function(event, ui) {
document.getElementByClass("pocet").value = ui.item.pocet;
}
});
});
HTML:
<label for="nazov">Názov: </label>
<input class="nazov">
<input class="pocet">
Hope this helps
I want to call a function whenever user changes date in a datepicker but it is not working. I have already checked link for Question JQuery Datepicker onchange event help! but it didnt help.
Below is my code and what i have tried:
<h:inputText id="animalBornDateId"
value="#{myController.animalBornDate}"
styleClass="dtp dateClass" style="width: 80px !important;" >
</h:inputText>
What i tried:
$("#animalBornDateId").datepicker({
onSelect: function(dateText, inst) {
var date = $(this).val();
var time = $('#time').val();
alert('on select triggered');
}
});
Another:
$('#animalBornDateId').on('input',function(e){
alert('Changed!')
});
The below works when i manually enter date inside textbox and click tab which i dont want.
$('#animalBornDateId').change(function() {
alert("test");
});
I want to call alert function when i select date from the calendar
This is my page which contains both HTML and Javascript code. No matter how I set the initial value of the ID, it only works once. Which I find very strange!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta http-equiv="refresh" content="30" />-->
<title>Relay Trigger</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js></script>
</head>
<body>
<div id="button">
<button id="off">OFF</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#on").click(function(){
document.getElementById("on").innerHTML="OFF";
document.getElementById("on").id="off";
alert(document.getElementById("button").innerHTML)
});
$("#off").click(function(){
document.getElementById("off").innerHTML="ON";
document.getElementById("off").id="on";
alert(document.getElementById("button").innerHTML)
});
})
</script>
</body>
</html>
When you use $("#on").click(function(){/*...*/}, there isn't any element with id on.
Then, that event handler isn't attached.
Moreover, when you use $("#off").click(function(){/*...*/}, you add the event handler to the element that, in that moment, has the id off. It doesn't matter if the id changes, the element is still the same and still has the same event handler.
To get the functionality you want, you can use event delegation to an ancestor with a filtering selector:
$("#button")
.on('click', '#on', function(){
document.getElementById("on").innerHTML="OFF";
document.getElementById("on").id="off";
alert(document.getElementById("button").innerHTML)
})
.on('click', '#off', function(){
document.getElementById("off").innerHTML="ON";
document.getElementById("off").id="on";
alert(document.getElementById("button").innerHTML)
});
Note this can be several times slower.
But a better alternative would be using id="myButton" data-state="off", and
$('#myButton').on('click', function() {
var state = $(this).data('state');
$(this).data('state', state==='on' ? 'off' : 'on');
state = state.toUpperCase();
$(this).html(state);
alert(state);
});
Try using a class instead, ID's should not be used like this.
The reason it happens is because when you registered the event handlers - the #on actually did nothing because there was no #on element in the document in that time
You have 2 options here:
set the handler only after you change the id:
<script type="text/javascript">
$(document).ready(function(){
$("#off").click(function(){
document.getElementById("off").innerHTML="ON";
document.getElementById("off").id="on";
alert(document.getElementById("button").innerHTML)
$("#on").click(function(){
document.getElementById("on").innerHTML="OFF";
document.getElementById("on").id="off";
alert(document.getElementById("button").innerHTML)
});
});
})
use "live" behavior:
the live function of jQuery is deprecated - but you can do it by doing:
instead of
$("#on").click(function);
write
$(document).on("click","#on",function);
You're missing a " in your script src.
All you need is
LIVE DEMO
$(function(){ // DOM ready
$("#on, #off").click(function(){
var io = this.io ^= 1; // Toggler used as 1/0 boolean
$(this).text(io?"ON":"OFF").prop('id', io?"on":"off");
});
});
So inside this simple click function if you need to do more stuff depending on the stored io object value you can do:
PLAYGROUND
if(io){
// do additional stuff if "on"
}else{
// do additional stuff if "off"
}
I'm using a custom JS library called datepicker, that you can find here.
I have it set up and working, but I need some extra functionality from it, and I have absolutely no idea how to get it done.
Here's what I have so far:
<h:panelGroup>
<h:panelGrid>
<input id="depatureDate" value="Departure date" class="datepicker dp1"></input>
<script>
$(".datepicker, dp1").pickadate({
format: "dd/mm/yyyy",
formatSubmit: "dd/mm/yyyy"
})
</script>
</h:panelGrid>
<h:panelGrid id="returnDate">
<input value="Return date" class="datepicker dp2"></input>
<script>
$(".datepicker, dp2").pickadate({
format: "dd/mm/yyyy",
formatSubmit: "dd/mm/yyyy"
})
</script>
</h:panelGrid>
</h:panelGroup>
What I need to do is the following:
If the first datepicker's input is clicked and a date is selected, that datepicker needs to close(it's already doing this, so that's fine) and the second datepicker needs to open, with the date that was selected in the first one marked on it. The user must then select another date on the second datepicker
If anyone has any idea how to do this, advice and pointers would be more than welcome!
Okay, i've done a small example here, working with the close event.
<input type="text" class="datepicker1" />
<br />
<input type="text" class="datepicker2" />
<script type="text/javascript">
// init second picker
var $input = $('.datepicker2').pickadate();
// init first picker
$('.datepicker1').pickadate({
// handle close event
onClose: function() {
var picker = $input.pickadate('picker');
// set unix timestamp to the second picker
// maybe theres a better solution for this...currenlty it works
picker.set('select', this.component.item.select.pick );
picker.open();
}
});
</script>
dont forget to load all pickadate libraries and jquery.....
i've defined 2 divs with classed datepicker1 and datepicker2. then i'm creating
the datepicker objects. the datepicker1 object handles the onClose event.
When the first datepicker is closed, the scripts opens the second and sets the value of datepicker1...
hope this helps
cheers
the datepicker provides an close event, maybe you can use this? Take a look at the API here
http://amsul.ca/pickadate.js/api.htm#method-on
some lines further down, you find
$('.datepicker').pickadate({
onOpen: function() {
console.log('Opened up!')
},
onClose: function() {
console.log('Closed now')
},
onRender: function() {
console.log('Just rendered anew')
},
onStart: function() {
console.log('Hello there :)')
},
onStop: function() {
console.log('See ya')
},
onSet: function(event) {
console.log('Set stuff:', event)
}
})
when entering the close event, open a new datepicker and set default value of the currently closed.
By default http://amsul.ca/pickadate.js/index.htm render the widget when the user click on the input.
I created an icon and I want, when the user click on it, to show the widget. I tried with:
$('#my-icon').on('click', function(){
$("input.dateFormat").pickadate();
$("input.dateFormat").click(); // Tried also with trigger
});
But the calendar does not show.
There is a way?
I don't think triggering a click (the accepted solution) is the right way of going about this. Using version 3 API of pickadate.js, the open/close options are outlined here: http://amsul.ca/pickadate.js/api.htm#method-open-close
The code would then be something like:
var $input = $('.datepicker').pickadate();
var picker = $input.data('pickadate');
$('.calendarIcon').click( function( e ) {
// stop the click from bubbling
e.stopPropagation();
// prevent the default click action
e.preventDefault();
// open the date picker
picker.open();
});
I don't really know this library either, but a quick look at their "api" page makes me think you're probably looking for something like this:
var picker = $("input.dateFormat").pickadate();
$("#my-icon").on('click', function() {
if(picker.get('open')) {
picker.close();
} else {
picker.open();
}
}
This worked for me:
<html><head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<script type="text/javascript" src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.css">
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.date.css">
<link rel="stylesheet" type="text/css" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/classic.time.css">
<script type="text/javascript">
$(window).load(function(){
$('#inputDatetime').pickadate({
//format: 'dd. mmmm yyyy',
format: 'dd-mm-yyyy',
formatSubmit: 'dd-mm-yyyy',
});
});
$(document).ready(function() {
$("#my-icon").click(function(){
$( '#inputDatetime' ).pickadate("open"),
event.stopPropagation(),
event.preventDefault()
});
});
</script></head>
<body>
<input
id="inputDatetime"
name=""
class=""
type="text"
placeholder="Try me…">
<img src='https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/calendar.png' id="my-icon">
</body>
</html>
i don't realy know this lib.
You should try to keep your calandar init outside your handler, and then trigger a click in your input :
$("input.dateFormat").pickadate();
$(document).ready(function() {
$("#my-icon").click(function(){
$( '.input.dateFormat' ).trigger("click")
});
});