CODEWITHSUNDEEP
javascriptjquery
Tavarlindar
Tavarlindar

Reputation: 1

datepicker and dynamic table not using jQuery function

I have read many threads here about my problem, but I haven't found a solution, may be because I'm not the king of JQuery ...

This is very a simple example :

example

When I try to add a new line, datepicker doesn't work. I don't know what to do. I use this function to add a new line in my table. (In reality, I have a html page with many table and for each of them i use datepicker)

    var champ_date_arrivee = document.createElement('input');
champ_date_arrivee.setAttribute('type','text');
champ_date_arrivee.setAttribute('size','10');
champ_date_arrivee.setAttribute('name','date_t');
champ_date_arrivee.setAttribute('value','');
champ_date_arrivee.setAttribute('id','date_t');
champ_date_arrivee.className='champ_date_input_tableau';
newCell1.appendChild(champ_date_arrivee);

and this code for the datepicker :

$(document).ready(function(){

 $.datepicker.setDefaults($.datepicker.regional['fr']);
 $('.champ_date_input_tableau').datepicker({ /* action sur class date */

    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    changeYear: true,
    yearRange: "c-70:c+70",
    clickInput:true,
 });

});

As you can see, I use the class name champ_date_input_tableau, because I don't know how to do it in an other way.

I've tried this :

    var champ_date_arrivee = document.createElement('input');
champ_date_arrivee.setAttribute('type','text');
champ_date_arrivee.setAttribute('size','10');
champ_date_arrivee.setAttribute('name','date_t');
champ_date_arrivee.setAttribute('value','');
champ_date_arrivee.setAttribute('id','date_t');
champ_date_arrivee.className='champ_date_input_tableau';
    $(champ_date_arrivee).datepicker({
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    changeYear: true,
    yearRange: "c-70:c+70",
});
newCell1.appendChild(champ_date_arrivee);

You have the result on this link this try It doesn't work.

I know that I have to use a code like this, but how ?

 jQuery('.date-pick').removeClass('hasDatepicker').datepicker({
dateFormat: 'mm-dd-yy'
});

You are my last chance ...

Sorry for my english, I'm french.

Thank you for your help.

Upvotes: 0

Views: 362

Answers (3)

Anthony Hatzopoulos
Anthony Hatzopoulos

Reputation: 10537

You don't really need .on(), .delegate() or .live(). Datepicker is smart enough if you just add it to the bottom of your ajoutLigneAuTableauTransfert() function. Because you are modifying the ID attribute after you apply datepicker it is messing up. Specifically call the datepicker plugin after you execute majNumLignesTabTransfert('ajout');

(1) Remove the two double up calls you have in ajoutLigneAuTableauTransfert(). (2) I also notice you add commas to the end of the last config options which will fail in IE and technically is syntax error in javascript. (3) Add the datepicker call after majNumLignesTabTransfert('ajout');

Here's the changes I describe showing it working. Look for // ANT-MOD in the javascript comments for indicators.

http://jsfiddle.net/dfDNu/

Upvotes: 2

Tarik
Tarik

Reputation: 81711

OK you need to use jQuery's live() method so 

$('.champ_date_input_tableau').live('focusin', function() {
    $(this).datepicker();
});​

Now go ahead and add more elements, live will bind this to new elements too.

EDIT:

It is said that live is deprecated but there is something works similar I believe called on. So please go ahead and use that one if you're really meticulous about using the latest versions all the time

Upvotes: 0

JasCav
JasCav

Reputation: 34632

The reason your code is not working is because, when your page loads, the date-picker is only hooked up to the already existing form items, but will not be applied to new items. When you add a new row, you need to make sure to call the .datepicker() function on that specific item that has just been added.

Per Dorian's answer you can do this dynamically, but, DO NOT USE LIVE. (Read the article for explanations of various issues with it. It has been deprecated as of jQuery 1.7.) Instead, you need to look into the on() function. Something like this should work:

$('#BlocFormulaire').on('click', '.champ_date_input_tableau', function() {
   $(this).datepicker();
});

Upvotes: 0

Related Questions