Dupliquer des lignes

Version imprimable

Bonjour,

J'ai fait un tableau comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="gauche largeur640px gras" id="tabs_0"><div class="gauche largeur640px" style="padding: 10px 0;">
    <div class="gauche gras" style="width: 150px;">
        Lundi                              
    </div>
 
    <div class="gauche centrer" style="width: 340px;" id="tabs_[0][1]">
        <input type="hidden" name="tabs_[0][1][jour]" value="1">
        De <input type="time" name="tabs_[0][1][from_h]" id="tabs_[0][1][from_d]" step="1" min="00:00" max="23:59" value="00:00" class="margeHautMoins4px"> à
        <input type="time" name="tabs_[0][1][from_f]" id="tabs_[0][1][from_f]" step="1" min="00:00" max="23:59" value="00:00" class="margeHautMoins4px">
    </div>
 
    <div class="gauche" style="margin-left: 50px;">                                  
        <div onclick="addRow(0,1);" class="gauche contentBulle marge0_5"><div class="bulle"><div class="contentBulleFleche"></div><div class="contentBulleDescription" style="font-weight: normal;font-size: 13px;">Ajouter une tranche horaire.</div></div><img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519691-199_CircledPlus-16.png" width="16&quot;" height="16" alt=""></div>
        <div onclick="delRow(0,1);" class="gauche contentBulle marge0_5"><div class="bulle"><div class="contentBulleFleche"></div><div class="contentBulleDescription" style="font-weight: normal;font-size: 13px;">Supprimer une tranche horaire.</div></div><img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519643-144_Forbidden-16.png" width="16&quot;" height="16" alt=""></div>
    </div>
</div></div>

Mon but étant de créer les fonctions addRow, delRow.

Code:

1
2
3
function addRow(num_tab, num_jour) {
 alert("Add : " + num_tab + " - " + num_jour);
}

En cliquant sur l'icone +, addRow doit rajouter le choix des horaires.

J'ai voulu vous mettre ici : http://jsfiddle.net/6kTBv/4/ mais la fonction se lance pas alors que sur mon pc j'ai au moins l'alerte.

Merci de votre aide

19/02/2014, 11h17
Golgotha

Bonjour,

Il faut positionner ton js dans le head avec "No wrap - in head" et ça sera bon sur ton fiddle.
19/02/2014, 11h27
PIEPLU

Bien vu, pour montrer ca va etre plus simple ;)

J'ai modifié le JS, mais je comprend pas, c'est pas sensé ajouté une ligne ?!

http://jsfiddle.net/6kTBv/5/
19/02/2014, 11h36
Golgotha

Si tu utilise jQuery dans ton code, ne pas oublier de le mettre sur jsfiddle (la liste en haut à gauche)

Sinon, je ne sais pas encore pourquoi, les ID avec des "[]" ne plaise pas à jQuery, sans crochet ça ce passe bien.

http://jsfiddle.net/6kTBv/7/
19/02/2014, 11h38
Bovino

Ce serait sympa de faire le minimum syndical de débogage avant de poster...

Code:

id="tabs_[0][1]"

Code:

insertAfter( "#tabs[0][1]" )
19/02/2014, 12h51
PIEPLU

En suivant tes conseils, voici l'évolution : http://jsfiddle.net/6kTBv/8/
Par contre, il faut que j'arrive à limiter à 3 lignes.

Personnellement j'aurai fait quelques chose comme ça :

Code:

1
2
3
4
5
6
7
8
 
function addRow(num_tab, num_jour) {
    var nb_tranche = $(".tranche_hor").size();
    if (nb_tranche < 3){
        var new_line = $("#tranche").clone().attr('id',   this.id + '_' + nb_tranche);
        $(new_line).insertAfter( "#tabs" + num_tab + "" + num_jour + "" );
    }
}

http://jsfiddle.net/6kTBv/11/

( tu as toujours des crochets dans tes id, il faudrait éviter ;) )

19/02/2014, 14h36
PIEPLU

EN faisant comme tu as mis, on a la possibilité de supprimer aussi ?
19/02/2014, 14h38
Golgotha

Pourquoi on ne pourrait pas ? :D

Il faut faire le code quoi ^^
19/02/2014, 14h43
PIEPLU

:ptdr:

Disons que j'y suis depuis ce matin 8 heures, et ca commence à me :aie:

Bon, je vais t'aider alors ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function addRow(num_tab, num_jour) {
    var nb_tranche = $(".tranche_hor").size();
    if (nb_tranche < 3){
        var new_line = $("#tranche_0").clone().attr('id',   'tranche_' + nb_tranche);
        $(new_line).insertAfter( "#tabs" + num_tab + "" + num_jour + "" );
    }
}
 
 
function delRow(num_tab, num_jour) {
    var nb_tranche = $(".tranche_hor").size() - 1;
    if (nb_tranche > 0)
        $("#tranche_" + nb_tranche).remove();
}

http://jsfiddle.net/6kTBv/12/

19/02/2014, 14h59
PIEPLU

Bizarre, quand on fait ajouter une tranche horaire, ca se met pas en dernier, et pareil quand on veut supprimer, ca ne commence pas par la fin.
19/02/2014, 15h04
Golgotha

Oui, c'est le insertAfter, remplace le par insertBefore
19/02/2014, 15h20
PIEPLU

Rapide et efficace.

Mais, un problème se pose. J'ajoute les autres jours de la semaine, et bien du coup, je peux plus ajouter de plage horaire car on dirait qu'il détecte plus de 3 au final (7, pour les 7 jours de la semaine)
19/02/2014, 15h54
PIEPLU

Maintenant que j'ai mis tous les jours de la semaine ca bug : http://www.justacote.com/horaires.php :?

J'ai corrigé quelques erreurs, ça devrait être mieux.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function addRow(num_tab, num_jour, num_ligne) {
    var nb_tranche = $(".tranche_hor_" + num_jour).size() -1;
    if (nb_tranche < 2){
			var num_ligne_suivante = nb_tranche + 1;
        var new_line = $("#tranche_" + num_jour + "_" + num_ligne).clone().attr('id',   'tranche_' + num_jour + "_" + num_ligne_suivante);
        $(new_line).insertBefore( "#tabs" + num_tab + "" + num_jour + "" );
    }
}
 
 
function delRow(num_tab, num_jour, num_ligne) {
    var nb_tranche = $(".tranche_hor_" + num_jour).size() - 1;
    if (nb_tranche > 0)
        $("#tranche_" + num_jour + "_" + nb_tranche).remove();
}

Si tu n'as pas besoin de num_tab et num_ligne dans tes fonctions tu pourra les enlever aussi, ça sera plus propre.

19/02/2014, 16h18
PIEPLU

La suppression de ligne ne marche pas bien 8O
Sacré bordel ce trucs
19/02/2014, 16h25
Golgotha

Citation:

Envoyé par PIEPLU

La suppression de ligne ne marche pas bien 8O

Comment ça, j'ai regardé sur ta page, ça à l'air de bien marcher.
19/02/2014, 16h32
PIEPLU

ah oui, faut que j'arrête de fumer lol
Dernière ligne droite pour clore ce développement laborieux pour moi, il faut que je puisse dupliquer le jour d'avant.
19/02/2014, 17h36
PIEPLU

Je n'arrive pas a dupliquer pour le moment, et je viens de me rendre compte d'un autre problème.
Quand tu fais un ajout de ligne, et bien l'input type text garde le même nom :?

Pour la duplication, ça deviens un poil plus complexe, là c'était facile ^^

voilà ce que ça donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function duplicateRow(day){ var last_day = $("#HD_" + (day - 1)).clone() .attr('id', 'HD_' + day); $("#HD_" + day).replaceWith(last_day); var nb_tranche = 0; $("#HD_" + day).find('.tranche_hor_' + (day - 1)).each(function(){ $(this).attr('id', "tranche_" + day + "_" + nb_tranche++ ); $(this).removeClass('tranche_hor_' + (day - 1)); $(this).addClass('tranche_hor_' + (day)); }); $("#HD_" + day).find("div[id^='tabs']") .attr('id', "tabs0" + day ); }
http://jsfiddle.net/6kTBv/19/

Tu noteras l'ajout d'un nouvel id sur l'élément encadrant les lignes pour pouvoir faire la duplication.

Citation:

Quand tu fais un ajout de ligne, et bien l'input type text garde le même nom

Oui, il va falloir faire un peu la même sauce que ce que j'ai fait pour la duplication avec le 'each' sur les input et remettre à jour les noms avec les bon numéros.
Avec un peu d'huile de coude.. :mrgreen:

19/02/2014, 21h56
NoSmoking

Bonjour,

Citation:

Quand tu fais un ajout de ligne, et bien l'input type text garde le même nom

je vais faire la même réponse faite sur une autre discussion, assez proche au niveau du thème,

Citation:

Envoyé par NoSmoking

dans ce cas mets des NAMEs du type name="le_nom[]" qui te permettra de récupérer coté serveur un tableau.
19/02/2014, 22h41
Auteur

bonjour,

pas besoin de passer par jQuery :
http://javascript.developpez.com/faq...pt/?page=Table

Voici un exemple :
http://www.developpez.net/forums/d33...u/#post2057900
20/02/2014, 09h10
PIEPLU

Citation:

Envoyé par NoSmoking

Bonjour,

je vais faire la même réponse faite sur une autre discussion, assez proche au niveau du thème,

Oui, tu as raison, j'ai juste passé par une variable avec le numéro du jour, ca me donne comme résultat :

Citation:

array (
'from_d' =>
array (
1 =>
array (
0 => '0:00',
),
2 =>
array (
0 => '',
1 => '',
),
4 =>
array (
0 => '0:00',
),
5 =>
array (
0 => '',
),
6 =>
array (
0 => '',
),
7 =>
array (
0 => '',
),
),
'from_f' =>
array (
1 =>
array (
0 => '1:00',
),
2 =>
array (
0 => '',
1 => '',
),
4 =>
array (
0 => '0:45',
),
5 =>
array (
0 => '',
),
6 =>
array (
0 => '',
),
7 =>
array (
0 => '',
),
),
'submit' => 'Enregistrer',
)

Ca devrait être plus facilement exploitable ;)

Citation:
Envoyé par Golgotha
Pour la duplication, ça deviens un poil plus complexe, là c'était facile ^^

voilà ce que ça donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function duplicateRow(day){ var last_day = $("#HD_" + (day - 1)).clone() .attr('id', 'HD_' + day); $("#HD_" + day).replaceWith(last_day); var nb_tranche = 0; $("#HD_" + day).find('.tranche_hor_' + (day - 1)).each(function(){ $(this).attr('id', "tranche_" + day + "_" + nb_tranche++ ); $(this).removeClass('tranche_hor_' + (day - 1)); $(this).addClass('tranche_hor_' + (day)); }); $("#HD_" + day).find("div[id^='tabs']") .attr('id', "tabs0" + day ); }
http://jsfiddle.net/6kTBv/19/

Tu noteras l'ajout d'un nouvel id sur l'élément encadrant les lignes pour pouvoir faire la duplication.

Oui, il va falloir faire un peu la même sauce que ce que j'ai fait pour la duplication avec le 'each' sur les input et remettre à jour les noms avec les bon numéros.
Avec un peu d'huile de coude.. :mrgreen:
Je viens de trouver le dernier problème je pense.

Je suis sur Mardi, j'ai ce code
Code:

1 2 3 4 5 <div class="gauche centrer tranche_hor_2" id="tranche_2_0" style="width: 340px; margin-top: 10px;"> De <input type="text" name="from_d[2][]" class="margeHautMoins4px timeClass ui-timepicker-input" style="width: 60px;" autocomplete="off"> à <input type="text" name="from_f[2][]" id="tabs20from_f" class="margeHautMoins4px timeClass ui-timepicker-input" style="width: 60px;" autocomplete="off"> </div>
Toujours sur Mardi, je décide de cliquer sur Dupliquer. J'obtiens :
Code:

1 2 3 4 5 <div class="gauche centrer tranche_hor_2" id="tranche_2_0" style="width: 340px; margin-top: 10px;"> De <input type="text" name="from_d[1][]" class="margeHautMoins4px timeClass ui-timepicker-input" style="width: 60px;" autocomplete="off"> à <input type="text" name="from_f[1][]" id="tabs10from_f" class="margeHautMoins4px timeClass ui-timepicker-input" style="width: 60px;" autocomplete="off"> </div>
Le problème, c'est l'id créé précédemment. on retrouve id="tabs10from_f" qui est aussi l'ID de Lundi.

Vous voyez le problème ?

Merci

20/02/2014, 09h31
SpaceFrog

un id doit être unique sur la page ...
20/02/2014, 10h08
PIEPLU

Oui, je le sais bien, mais je ne sais pas comment faire à partir de la fonction duplicate.
20/02/2014, 10h13
SpaceFrog

heu ... c'est une blague ???

Code:

obj.id='nouvelid'
20/02/2014, 10h30
PIEPLU

Je me suis mal exprimé SpaceFrog :lol:

Enfin, j'ai supprimé l'ID car il n'était pas utile ici.

Par contre, quand je fais supprimer une tranche horaire, et que c'était la dernière ligne, actuellement, la suppression n'est pas possible, et c'est très bien. Par contre, ca doit être possible au moins de vider les champs ?

Et un autre trucs, j'ai rajouté timepicker, comme ça, lorsqu'on clique sur le champs heure, ca nous propose des horaires.
Le souci, et je ne parviens pas à comprendre d'où celà vient, mais si je duplique, ou si j'ajoute une tranche horaire, et bien, ca ne fonctionne plus. Et pourtant, j'ai bien la classe timeClass qui est en place.

Si vous avez des pistes à me fournir ;)

Merci
21/02/2014, 09h15
PIEPLU

Quand je duplique, les nouveaux inputs ont le même nom que les champs du jour précédent :?
Encore un problème que je n'arrive pas à résoudre.

J'ai trouvé en faisant :

Code:

1
2
3
4
5
6
$("#HD_" + num_jour).find('[name="from_d_' + (num_jour - 1) + '[]"]').each(function(){
	$(this).attr('name', "from_d_" + num_jour + "[]" ); // ajout
});
$("#HD_" + num_jour).find('[name="from_f_' + (num_jour - 1) + '[]"]').each(function(){
	$(this).attr('name', "from_f_" + num_jour + "[]" ); // ajout
});