Change function on datetimepicker not working properly - javascript

I have used datetimepicker in my project. But when I am using the change event to call the ajax function it is being called multiple times.
Also when running the script on browser with an alert on change function it goes into infinite state where the alert doesn't seems to remove even after close button.
Version of Datetimepicker used: 3.1.12
$("#timepickerstartt").change(function(){
alert();
});
Snippet used for datetimepicker
Note: I have tried the onselect event but no luck.
$('#cashing_start_time').datetimepicker({
datepicker:false,
theme:'dark',
format:'H:i',
onChange: function(selectedDate) {
alert();
}
});

you are too close...
you can use this function
$('#timepickerstartt').on('dp.change', function(e){ console.log(e.date); })
see this link for more details
see jsfiddle

Related

Bootstrap slide event not working inside AJAX success

This is my code, 'slide' event inside AJAX success call.
success: function(data) {
$('#my_container').html(data);
// I am getting' #mycarousel' successfully in to #my_container
$('#mycarousel').bind('slid', function(e) {
console.log('hi');
}
// tried 'slid.bs.carousel' too, no change.
// btw, I can see my 'slid' function under event listeners for that element.
// when I paste the above binding code in console again it shows the element too.
});
I want to print the 'hi' to console on slid event, which is not working now.
Thanks
Check whether you have multiple versions of jquery libraries loaded in the page.
Use $.fn.jquery to find the loaded version and cross check it with the jquery version you have included and see both are same.
After loading the carousel dynamically, you have to initialize it (as androbin suggested):
$('#my_container').html(data);
$("#mycarousel").carousel();
$('#mycarousel').bind('slide.bs.carousel', function (e) {
console.log('slide event!');
});
$('#mycarousel').bind('slid', function (e) {
console.log("slid event!");
});
Here you can see it working: http://jsfiddle.net/faw242a8/1/
Make sure the html you are pulling in via ajax contains a valid carousel.
Reference: Carousel - Bootstrap

JQuery month picker on month change/select

Using jQuery UIMonthPicker http://jsfiddle.net/kidsysco/JeZap/ and I'm having difficulty in trying an event on month select. There is no response on either onClose or onSelect function. Here is my code:
j$ = jQuery.noConflict();
j$(document).ready(function() {
j$('#txtDate').MonthPicker({
ShowIcon: false,
MaxMonth: 0,
MinMonth: -120,
onSelect: function() {
alert(j$("#txtDate").val());
}
});
j$("#txtDate").keydown(false);
j$("#txtDate").change(function(){
alert(j$("#txtDate").val());
});
});
According to the docs, you might want OnAfterChooseMonth
j$('#txtDate').MonthPicker({
....
OnAfterChooseMonth: function() {
alert($(this).val());
}
});
The change event will only fire when the input is changed by the user typing into it (and losing focus depending on control) - it doesn't fire when code changes the value.
Updated fiddle (on the first 'default' input)
Update: to address the incorrect edit that was made to this answer and incase it happens again: I rolled back because the question uses j$ = jQuery.noConflict(); and so $() might fail in this context and the ... shows that there needs to be more inside the MonthPicker than just what's here. To the reviewers: don't forget to check the question when reviewing.

Bootstrap 3 modal doesnt always activate ajax code

I'm sure there is a simple answer to this I just don't seem to be able to resolve it.
I am using the bootstrap modal to return ajax content from specified url. (using $.removeData() between loads to remove content).
The problem comes with running JS on content from the form presented in the modal.
I am currently using (simplified) from within the final file (returned by ajax):
$('#myModalLg').on('shown.bs.modal', function(e) {
$(this).on('submit', 'form', function(ev) {
... event handler for form...
});
});
EDIT: along with other event handlers (datepicker for within modal included) but this code is only loaded once and then fails to activate again until the full page is reloaded
On close code:
$('#myModal, #myModalLg').on('hidden.bs.modal', function (e) {
$(e.target).removeData();
$(e.target).off('shown.bs.modal');
$('#myModal, #myModalLg').on('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});
});
I would be expecting the handlers to run each time #myModalLg is shown and then when it is closed it removed what has been entered and restores each time but doesn't seem to work like that.
you never turn off your shown.bs.modal have you looked into the One Event In JQuery:
I'm not sure if this will help but it seems like your redeclaring your shown.bs.modal multiple times you might want to change that to a one instead of on
$('#myModal, #myModalLg').one('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});

JQuery Datepicker error after Postback with Ajax

my Datepicker works fine, but after postback it doesn't work any more. I tried also pageLoad method but it still doesn't work.
I have a List of Items from database. If I click an item of the list, I get the information about it in a table from database (I used POST Method with Ajax).
Jquery:
<script>
$(function() {
var pickerOpts = { dateFormat: $.datepicker.ATOM };
$("#datepicker").datepicker(pickerOpts);
});
</script>
Textfield:
echo("<input type='text' id='datepicker' value='$db[deadline]'>");
I've googled for hours but found nothing that worked for me.
EDIT NOTE: Errors after trying Rahil Wazir's help:
Use this:
<script>
$(function() {
var pickerOpts = { dateFormat: $.datepicker.ATOM }; //Place this inside below .on handler if this also updates.
$(document).on('focus', '#datepicker', function(e){
$(this).datepicker(pickerOpts);
});
});
</script>
You have to use $(document).on handler when dom updates. And add event focus to trigger the datepicker handler.
Edited:
See this answer for further help

jQuery UI datepicker display without action

Is it possible to display jQuery UI datepicker without having to click on anything?
I want the datepicker to be visible when the window loads. Or is this not possible? If not is there another plugin for this or is it best to create a new on my own?
one thing you could do is give focus to the input so that the datepicker shows:
$('#datepicker').focus()
look here http://jsbin.com/agazes/edit#preview
or show it after creating it:
$('#datepicker').datepicker('show')
http://jsbin.com/agazes/2/edit#preview
This does not seem to be possible by passing an option. However, you can call the show method after creating your datepicker:
$(document).ready(function() {
$("#yourElement").datepicker({
// your options...
}).datepicker("show");
});
http://jqueryui.com/demos/datepicker/#method-show
You could call the show method when you want it to open.
In Some jQuery versions show is not available, in that case use:
window.addEventListener('load', function () {
document.getElementById('datepicker').click();
});
jQuery(document).ready(function() {
$('#datepicker').bind('touchstart click', function(){
$(this).focus();
});
});

Categories