Discussion :

[Mordok]

Bonjour,

J'ai un petit probleme, je viens de faire un formulaire dynamique du style :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<tr>
						<td><b>Expenses details :</b></td>
						<td>
							<br></br>
							<a href="javascript:void(0);" onclick="fnClickAddRow();">Add a new row...</a><br></br><br></br>
					<table id="example">
					<thead><tr><th>Date</th><th>Topic</th><th>Travel</th><th>Meal</th><th>Hotel</th><th>Misc</th><th>Project Code</th><th>Currency</th><th>Rate</th><th>Total</th></tr></thead>
					<tbody />
					<tfoot><tr><th>Date</th><th>Topic</th><th>Travel</th><th>Meal</th><th>Hotel</th><th>Misc</th><th>Project Code</th><th>Currency</th><th>Rate</th><th>Total</th></tr></tfoot>
					</table>
					</td>		
					</tr>

Je peux rajouter des lignes grace a la commande :

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
 
function fnClickAddRow()
{
 
	var mesInput = '<tr>';
 
	for (var i=0;i<10;i++)
	{
		if (i==1) mesInput += '<td><input type="text" size="15" id="idinput' + idinput +'" onClick="calc();"></td>';
		else if (i==0) mesInput += '<td><input type="text" size="15" id="idinput' + idinput +'" onClick="addDate();"></td>';
 
		else mesInput += '<td><input type="text" size="7" id="idinput' + idinput +'" onClick="calc();"></td>';
 
 
 
		idinput++;
	}
	mesInput += '</tr>';
	$('#example').append(mesInput);
	addDate();
 
 
}

J'ai mis plusieurs condition car quand
i=0 j'aimerais faire un datepicker
i=1, j'ai besoin de plus de place
Le reste ce sera pareil.

Sur mon i=0 je veux donc faire un date picker....

J'ai donc essayé quand j'appel la fonction addDate d'en créer un mais ça ne fonctionne pas.

Code :

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

1
2
3
4
5
6
7
 
 
function addDate()
{
$("#idinput0").datepicker(); //mis idinput0 pour tester aprés ce sera "idinput" + idinput
 
}

La aucun résultat.

J'ai un input text qui était déja créer j'ai donc essayé de mettre un datepicker dans addDate dessus mais ça ne marche.

La seule solution pour que je puisse faire un datepicker ( sur un element qui existe déja et donc non dynamique) est de faire

Code :

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

1
2
3
4
 
jQuery(document).ready(function($){
    $("#ctl00_PlaceHolderMain_g_12f3509f_aa7d_4c75_93c3_e1af3b107ca7_ff8_1_ctl00_ctl00_TextField").datepicker();
})

Mais bon ce n'est pas sur un input ou il doit y avoir un calendrier.
Je veux mon datepicker uniquement sur mon premier input de chaque ligne, mais je n'y parviens pas ...

Des idées ?
En vous remerciant ...

[RomainVALERI]

Je vais laisser les spécialistes de jQuery répondre à la question, ce n'est pas trop mon domaine, mais quelques remarques générales quand même pour t'aider à rendre ta question intelligible et obtenir des réponses :

1) datepicker --> connait pas en JS pur. Si tu utilises des éléments tirés de librairies ou modules tiers, il me semble qu'il serait utile de préciser quelle source (et quelle version pour les libs, car la suite du contexte nous montre que c'est du jQuery) ^^

2) au début de ton message, l'extrait que tu postes en l'appelant "formulaire dynamique" est... mystique.
> pas le moindre rapport avec un formulaire (ni début ni fin ni inputs....), même la construction de tables imbriquées contenant le form est tronquée...
> rien de dynamique ici puisque c'est (à juste titre) le code généré (comme le suggère notamment l'indentation de style *accident de camion* )
> on ignore à quoi servait de nous montrer cet extrait (tu as oublié de le préciser)

3) juste par curiosité...

La seule solution pour que je puisse faire un datepicker ( sur un element qui existe déja et donc non dynamique)

...tu veux dire que "ctl00_PlaceHolderMain_g_12f3509f_aa7d_4c75_93c3_e1af3b107ca7_ff8_1_ctl00_ctl00_TextField" est non pas un id généré par une routine, mais une chaine délibérément choisie par toi... ? (ok ok c'est un éditeur WYSIWYG qui "crache" ce genre de chaine, je sais... mais quand même ... comment on dit "WTF" en français déjà ? )

[Mordok]

oui il s'agit d'id généré par ce **%%%%!!%% de sharepoint :p

Autrement oui désolé je me sers de JQUERY et j'ai bien importer les fichiers necessaires.

Code :

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

1
2
3
4
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />

MErci

[SPACHFR]

Bonjour,

Vérifie que datepicker est bien déclaré dans le fichier js "jquery-ui.min.js"
Regarde la console d'erreur de FF (si tu utilises ce navigateur).

Sinon j'utilise la fonction ci-dessous pour ajouter un datepicker sur un input de type text

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
 
function addPicker(id){
		$("#"+id).datepicker({ 
		showAnim : 'fold',
		showOn: 'button',
		buttonImage : './themes/start/images/calendar.png',
		buttonImageOnly: true,
		dateFormat: 'yy-mm-dd',
		changeMonth: true,
		changeYear: true,
		beforeShow : function() {if($("#"+id).val=="") return false;},
		onClose : function(){
					//alert($("#"+id).val());
				}
		});
	}

Quant à la selection du premier input de chaque ligne un petit exemple ci-dessous.
Seul les inputs en première colonne de la table 'mtab" sont modifié en rouge.

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
 
<html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$(" #mtab td:first-child > input").css("color", "red");
  	});
  </script>
 
  <style>
 
  td { color:blue; font-weight:bold; }
 
  </style>
  </head>
  <body>
 
 <table id="mtab">
    <tr><td><input type="text" value="Row 1"/></td><td><input type="text" value="Row 1 col 2"/></td></tr>
    <tr><td><input type="text" value="Row 2"/></td><td><input type="text" value="Row 2 col 2"/></td></tr>
    <tr><td><input type="text" value="Row 3"/></td><td><input type="text" value="Row 3 col 2"/></td></tr>
  </table>
 <table id="Atab">
    <tr><td><input type="text" value="Row 4"/></td></tr>
    <tr><td><input type="text" value="Row 5"/></td></tr>
    <tr><td><input type="text" value="Row 6"/></td></tr>
  </table>
  </body>
  </html>

Voici ma maigre contribution (je ne suis pas un spécialiste jQuery)

[Invité]

slt

Code :

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

size="15" id="idinput' + idinput +'" o

que vaut idinput, tu devrais plutot ecrire i.