jquery-ui datepicker not appearing on dynamic input - javascript

I inherited a bunch of code of varying quality and I'm fixing a bunch of things that has been wrong. One thing that it does is that is has a table of form inputs, one of which uses jquery-ui Datepicker. There is also a button that creates a new row at the bottom of the table. The new row's Datepicker never shows up.
I've seen this problem listed a few times here on SO but none of those solutions worked. I'm putting up what I have now. My jfiddle is at:
http://jsfiddle.net/squarepegsys/G8WEC/2/
The meat of my code is here:
tr.find(".datepicker").on("focusin",function() {
console.log("got focus");
$(this).datepicker();
});
In the on("focusin"...) line, I see "got focus" on the console but never see the datepicker show up.

When you create the datepicker instance, jQuery assigns it an ID, and when you clone it, you're duplicating it. Instead, create the datepicker instance dynamically via:
$(document).on('focus', ".datepicker", function () {
$(this).datepicker( "destroy" ).datepicker();
})
jsFiddle example
This will work for dynamically created elements and jQuery will manage the IDs properly.

Related

Kalendae js: Is there a way to automatically close the calendar once a date has be selected?

I'm working with Kalendae https://github.com/ChiperSoft/Kalendae and I must say it is excellent and it's great to not have to think about dependencies.
The default behaviour is that it pops up when a text box is selected and updates the date but then it requires me to click the close [x] button to close the calendar.
I'd like the calendar close upon selection of a date. I confirmed this to be the default behaviour on the Demo page as well: http://chipersoft.com/Kalendae/.
The following code worked for me (unfortunately, it relies on jquery, so make sure you have jquery included):
ku = Kalendae.util;
$.each( $('.kalendae .k-in-month'), function(index, value) {
ku.addEvent(value, 'click', function(event){
this.style.display="none";
});
})
A jquery implementation was good enough for me, if you want to do it in pure javascript you'll need to replace the use of $.each and select the .kalendae elements using a pure javascript approach.

Add jquery datepicker dynamically after page load

Upon a button click, I have some jquery that will add some html to the 'body' element. In that html, I have a datepicker input field which refuses to appear when it should.
I use the ui-datepicker in several other spots in my app, and it works perfectly.
I have tried calling the datepicker when the document loads:
jQuery ->
$('.my-datepicker-class').each ->
input = $(this)
input.datepicker()
and after the click event which adds the new html to the page:
$('.my-button').click ->
$('body').ipadoverlay
titleStyle: false
contentWidth: 500
topSpc: true
content: $('#popup-for-' + thing_id).html()
$('.my-datepicker-class').each ->
input = $(this)
input.datepicker()
But the picker refuses to show up. My guess is that it has to do with when jquery builds and places the datepicker, but I really don't know.
Let me know if you have any ideas or could use more information.
UPDATE
I changed the way I call datepicker() so that it only applies to the element I want the datepicker attached to.
$('.ipadoverlay .date-picker').datepicker()
This eliminates the first issue with the .each =>.
Now it silently fails. No error or warning. The datepicker simply does not show up.
I am going to begin digging into jquery.ui.datepicker.js to see if I can figure out whats going on, but if you have any ideas why the datepicker fails to response, please let me know.
UPDATE 2
Ok, I got a step further. The class 'hasDatepicker' was already attached to the element I want add the datepicker to (which means $('.date-picker').datepicker() was being called somewhere else, while the element was hidden and unused), but the datepicker didn't work. I fixed this by removing the class from my element, and calling .datepicker() again
$('.ipadoverlay .date-picker').removeClass('hasDatepicker')
$('.ipadoverlay .date-picker').datepicker()
Now the datepicker shows up on click, but selecting a date doesn't do anything... Help would be much appreciated
You need to use the fat arrow. Your use of 'this' loses its context.
jQuery ->
$('.my-datepicker-class').each => # <-- Fat arrow
input = $(this)
input.datepicker()
I'd explain, but coffeescript.org does a better job than I ever could.

Accessing onchange using the jQuery plugin DropKick dropdown list

On my page, I have a form with three <select> drop down lists. All these lists use DropKick to make them look nice.
With DropKick added, the DDLs are no longer conventional lists and so cannot be accessed as such.
From what I've found, you can only call onchange by setting a class on the <form> tag and then using the following script:
function submitIt(){
alert('test');
}
$('.deviceChosen').dropkick({
change: submitIt
});
This works, and alert shows. But also doesn't work for a couple of big reasons.
The first <select> field is the only field that gets shown as a result. And everything else on the web page after that element gets removed from the page.
So what I have is three DDLs and I want to be able to set up a function that gets called when the deviceChosen id DDL gets changed. I don't want an onchange event for the other two lists.
Is this something that is doable?
I've tried things like the below, but it just will not work.
$('#deviceChosen').on('change', function() {
alert('dsf');
});
I couldn't get this working, so I ended up using selectBox instead
http://labs.abeautifulsite.net/jquery-selectBox/
I am able to makeit work, you can use the below mentioned code for sample purpose.
$("#ID_OF_SELECT_TAG").dropkick({
change: function (value, label) {
//Logic that you want to apply onchange event.
}
});
Thanks

Datepicker initialization for class fields added after page load

I have fields where multiple extra fields can be added after the page loads (think education & work experience fields on job resumes). I am using this.
I can add a datepicker on the first field, but subsequent added fields do not access the datepicker, despite being cloned/essential duplicates of the original. I'm guessing that the datepicker only intializes on page load or for only one class on the page.
So on a page I initialize the datepicker:
$('.input-append.date').datepicker();
for a block of form code encapsulated by this class. OK for initial page load; and also OK if there is an error and the page reloads multiple fields previously input(there is a datepicker for all fields returned with any error). However, with another js function that adds new fields to the form, additional new fields do not have access to the datepicker. I do not see how to do this now, perhaps someone with more experience/wisdom can provide me a hint.
EDIT:
Simple enough: I simply added:
$('.input-append.date').datepicker();
to the code calling the new field. As to being the optimal solution I do not know, anyone who specializes in js can comment on that, and there are many other similar questions here I found once I expanded my search terms. However, good enough for me now in what I'm doing.
For elements which are being added on fly use data-provide="datepicker" attribute. It will be initialized lazily. For example if an input field is coming up in an ajax response and loaded in a container div. So in this case:
<input type="text" data-provide="datepicker" />
so when when you will load this ajax response it in cotainer div like
$('#container-div').html(ajax_response);
this will work.
In the same way if you are creating an element through jquery and appending it to some container (I think this is happening in your case), for example you have a function that creates textbox and append it to some container div and this function is called on click event of some element let's say it's button. Again data-provide attribute is the solution to this problem. For example
function createTextBox(){
var t = $('<input>').attr('data-provide','datepicker');
$('#container-div').append(t);
}
And this function is called on click event of some button like in this way:
$(document).ready(function(){
$('#someBtn).click(createTextBox);
});
In short whether that dynamic element is coming in ajax response as a string or being created through jquery, just use data-provide attribute to set bootstrap datepicker. Because in this case datepicker is initialized lazily in Bootstrap fashion.

jQuery Selectbox Append Options OnChange

I'm working with jQuery and a plugin called jQuery.SelectBox
I have 3 selectboxes, selecting an option in the first selectbox will change the options in the second one.
My problem comes when I try to insert values in the second selectbox via append function in jQuery. Everything works fine but the new options are not clickable.
You can see the problem right here: http://incubadora.gelattina.com/impac/galeria.html (scroll down and to the right), there are the three selectboxes.
From what I understand, you put in a normal select, and this does a dynamic creation of a stylized 'select box' via jQuery.
The problem, I would guess, is that, since you're adding items after the select box's initialization, the new items don't have any sort of action listeners on them.
I can't seem to find any documentation on this SelectBox plugin, but you need to find a way to Bind the click and hover actions provided by SelectBox onto you're newly added items.
You can try calling the .selectbox(); function on the select elements after you've added the new options to see if that works.
Hey I wrote a select box plugin called Selectzor, just for this reason.
It should accomplish everything you need.

Categories

Resources