jQuery DatePicker ne fonctionne pas sur la ligne nouvellement ajoutée

Question

J'ai un gridview qui se présente sous la forme d'une table. J'ai un bouton "Ajouter" et en cliquant dessus, il va créer une nouvelle ligne dans la table. La création de ligne est effectuée en utilisant la méthode "clone (true)" dans jQuery. La ligne clonée est une rangée factice qui est cachée dans la grille. J'ai affecté jQuery DatePicker pour un TextBox. Cela fonctionne bien pour la ligne existante. Mais lorsque je clique sur la zone de texte DatePicker pour la ligne nouvellement ajoutée, elle ne s'ouvre pas. Il s'ouvre pour la ligne existante. Quel pourrait être le problème?

Mon code est comme:

$("input[name $= 'txtDateOrdered']").datepicker({ 

     showButtonPanel  : true 
    , showOn    : 'button' 
    , buttonImageOnly  : true 
    , buttonImage   : '../../Image/calendar.gif' 
}); 

Answer 1

Difficile à dire avec à voir votre code, mais ..

Ceci est probablement dû à l'jquery utilisé pour attribuer le datepicker à l'entrée est appelée à la page charge. Par conséquent, lorsque vous clonez l'entrée, l'entrée nouvellement clonée n'a pas le datepicker connecté (puisqu'il n'existait pas au chargement de la page).

Vous devrez raccorder l'outil datepicker à la nouvelle entrée après avoir appelé la méthode clone.

Answer 2

Je suppose que vous avez ajouté l'outil datepicker sur document.ready à tous les éléments correspondant à un sélecteur donné. Cela ne l'ajoute pas aux éléments créés dans le futur. Pour ce faire, vous devriez vérifier jQuery live:

Associe un gestionnaire à un événement (comme clic) pour tous les cours - et futur - élément adapté.

Answer 3

Peut-être le TextBox cloné a-t-il le même ID que celui d'origine, ce qui complique le contrôle du calendrier? Si ce n'est pas le cas, veuillez fournir plus de code et d'éventuels messages d'erreur.

Answer 4

Vous pouvez également ajouter/forcer un événement pour gérer le processus. Pour un exemple, j'ai un endroit où j'ajoute et autocomplete à un élément ajouté. Je gère l'événement « changement » ainsi (dans une fonction .Modification()):

$(this).change(); // fire change event (to be used in other user controls) 

J'appeler une fonction dans un gestionnaire d'événements de changement de l'élément spécifique qui a une saisie semi-automatique en elle pour l'ajouter à cet article. Il y a d'autres façons, mon problème est que je le fais manuellement car je manipule une section complexe nouvellement ajoutée, pas seulement une rangée de table.

/* apply autocomplete function */ 
function myAddAuto() 
{ 
    $(".cptEntryArea").autocomplete("mywebservice/myService.asmx/GetMyAutocomplete", { 
     dataType: 'json', 
     data: {}, 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     parse: function(data) { return myAutocompleteJSONParse(data); }, 
     maxRows: 100, 
     formatItem: function(row) { return row["Description"] + ' (' + row["MyCode"] + ')' }, 
     minChars: 2, 
     matchSubset: false, 
     scrollHeight: 100, 
     width: 300 
    }); 
}; 

Il existe d'autres moyens, mais le principe de base est le même - ajouter les gestionnaires à l'entité nouvellement ajoutée au sein de la ligne que vous ajoutez à la table.

Answer 5

Essayez ceci:

$("row-you-are-cloning").clone().appendTo("your-table").datepicker({ 
    showButtonPanel  : true, 
    showOn    : 'button', 
    buttonImageOnly  : true, 
    buttonImage   : '../../Image/calendar.gif' 
}); 

Answer 6

Vous devez supprimer la classe "hasDatepicker" du premier élément cloné.

$(".selector").removeClass('hasDatepicker').datepicker({ 
     showButtonPanel  : true 
    , showOn    : 'button' 
    , buttonImageOnly  : true 
    , buttonImage   : '../../Image/calendar.gif' 
});