Rechargement Ajax et datepicker

**dragonfly** · 17/09/2014, 12h10

Bonjour à tous,

j'ai un probléme de rechargement AJAX qui me casse tout mon datePicker.
Je m'explique, au premier lancement de ma page, mon datePicker s'affiche correctement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
	try(){
		$(function () {
			$( "#datepicker" ).datepicker({ minDate: "-500M -10D", maxDate: "+500M +10D" ,showAnim: "fold",autoSize: false,dateFormat: "dd/mm/yy",constrainInput: true ,showOn: "button",
				buttonImage: "Images/calendar.gif",
				buttonImageOnly: true,changeMonth: true, changeYear: true, yearRange: 'c-20:c+10'
			});
			  $( "#datepicker" ).datepicker( "setDate" , sDate );
			$( "#datepicker1" ).datepicker({ minDate: "-500M -10D", maxDate: "+500M +10D" ,showAnim: "fold",autoSize: false,dateFormat: "dd/mm/yy",constrainInput: true,showOn: "button",
				buttonImage: "Images/calendar.gif",
				buttonImageOnly: true,changeMonth: true, changeYear: true, yearRange: 'c-20:c+10'
			});
			 $( "#datepicker1" ).datepicker( "setDate" , strDate );
		});
 
	    $(".juston_IE:checkbox").live('click', function(){
	    	 ToggleSelectionRow_IE($(this).attr('id'));
	    });
	    $(".juston_IEAll:checkbox").live('click', function(){
	    	ToggleSelection();
	    });
	    $("a.juston_IEImg").live('click', function(){
		 	 var ctrid=$(this).attr('id');
		 	 window.setTimeout("Download_File_clicked('" + ctrid.split('~')[0] + "','" + ctrid.split('~')[1] + "')",1000);
		});
	}catch(e){
		console.log(e);
	}
 
	tem_strCriteresDateFin = strDate ;
	tem_strCriteresDateDebut = sDate ;
	return true;

Avec ce resultat Nom : E33.jpg
Affichages : 804
Taille : 7,1 Ko

aprés mon appel AJAX, j'ai ceci :

Nom : E33-2.jpg
Affichages : 709
Taille : 5,8 Ko

Avec, les dates qui ne se remplissent pas et les click sur les images qui n'affichent pas les calendriers.

J'ai vu via l'ami G***** que dans le success de l'AJAX il faut refaire l'appel au datePicker mais le success et lancé lorsque l'appel AJAX est OK et non quand le résultat est affiché (mon input est dans le HTML donc le résultat doit être affiché).

Je ne comprends pas comment faire.
Si quelqu'un sait comment faire...

Par avance, merci

**SpaceFrog** · 17/09/2014, 12h44

Voir
http://www.developpez.net/forums/d89...y/#post7915349
+ Post suivant de DanielHagnoul dans la discussion

**dragonfly** · 17/09/2014, 15h13

Re, merci pour ta réponse,

bon j'ai un peu de mal avec ces principes en JS donc on va y aller par étapes :

il faut que je rajoute :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(document).bind('DOMNodeInserted', function(event) {
    $(event.target).filter('.plugClass').monplugin([params])
})

Quand tu parles de Ready, c'est dans une fonction type $(document).ready(function(){...}); ?
Cette fonction sera lancé lors de tout les chargement ou seulement lors du premier?

Cdlt,
Dragonfly

**SpaceFrog** · 17/09/2014, 15h28

la fonction en elle meme sera lancée au chargement de la page
mais surveillera l'insertion DOMNodeInserted ...
et lors de l'insertion d'un noeud appliquera le plugin selon le selecteur (filter)

**darkterreur** · 17/09/2014, 15h46

Bonjour,

En effet "ready" est associé au "document.ready()" en jquery, ou simplement au "ready" du <body>.

Bref tout cela pour dire que cela s'applique quand le document est bien chargé avec tout ses éléments.

Au passage je suis quand même curieux de savoir ce que fait ton Ajax, si j'ai bien comprit c'est lui qui te ramène ton champ date ?

Pour ton datePicker ce serai mieux que tu utilise une class plutot qu'un id, comme la suggéré SpaceFrog

**dragonfly** · 17/09/2014, 16h48

J'ai essayé et ca ne marche pas trop bien,

en fait au rechargement Ajax, il n'y a pas de passage dans la $(document).ready.

J'ai essayé avant l'execution du code une fonction du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
	$(document).bind('DOMNodeInserted', function(event) {
	    $(event.target).filter('#datepicker').datepicker({ minDate: "-500M -10D", maxDate: "+500M +10D" ,showAnim: "fold",autoSize: false,dateFormat: "dd/mm/yy",constrainInput: true ,showOn: "button",
			buttonImage: "Images/calendar.gif",
			buttonImageOnly: true,changeMonth: true, changeYear: true, yearRange: 'c-20:c+10'
		});
	    $(event.target).filter('#datepicker').datepicker("setDate" , "02/04/2014" );
	});

D'aprés ce que j'en comprends, à chaque insertion dans le DOM, il va remplacer l'ancien '#datepicker' par celui ajouté ici, non?

Ou je récrée mes élements datepicker mais toutjours le même résultat

@darklTerreur
- Lors de la création du datePicker, les inputs concernés recoivent la classe hasDatePicker donc au final il est possible de travailler avec la classe
- La date est calculé juste avant la création du datepicker, l'AJAX sert juste à réfraichir la page avec en paramétre un autre numéro de client.

J'ai essayé de détruire les datepicker avant la création mais les évenements click ne sont plus pris en compte (même lors du premier passage), mais lors du rechargement AJAX, il n'y a pas d'erreur Jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$( "#datepicker" ).datepicker("destroy");
$( "#datepicker1" ).datepicker("destroy");

D'ailleurs cela ne fait aucune erreur mais si j'ajoute une condition pour voir si un datepicker existe j'ai une erreur Jquery lors du rechargement (dans la biblio jquery.min.js, il n'arrive pas à le détruire alors qu'il existe)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
if($(".hasDatepicker").length){			
			$( "#datepicker" ).datepicker("destroy");
			$( "#datepicker1" ).datepicker("destroy");
		}

D'ailleurs, pour la gestion du click, j'utilise .live(), avec .on() ou .attr("onclick"), le résultat serait-il différent? (en fait je ne vois pas trop la diférence entre ces syntaxes, juste que le .on est une évol du .live).

Merci de votre patience.

P.S : je suis en train d'essayer de comprendre le mutationObserver

**SpaceFrog** · 17/09/2014, 17h25

en fait au rechargement Ajax, il n'y a pas de passage dans la $(document).ready.

Tu n'as donc rien compris à ce que j'ai dit plus haut !

il est normal qu'un ajax ne declenche pas le ready ... car la page ne se recharge pas

le but est donc de surveiller l'insertion de noeud ...
ce qui est fait dans le code donné plus haut
pour appliquer le plugin lors de l'insertion de tes elements dans la page lors du retour d'ajax ...

Rechargement Ajax et datepicker [UI]

jQuery

Vue hybride

Discussions similaires

Partager

Partager