[N°de Ligne] Problème avec la creation de la nouvelle ligne [Résolu]

Signaler
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
Bonjour,
J'essaie de remplacer ma fonction "CloneLine" par "NewLine", pour pouvoir crée une nouvelle ligne et lui ajouter sont numéro de ligne.
J'ai un problème avec la fonction "NewLine()".
Et je ne voit pas comment mettre en place la gestion du numéro de la ligne.

fonction "CloneLine" :
function CloneLine(Line)
{
 newLine = Line.cloneNode(true); 
 Line.parentNode.insertBefore(newLine,Line);
 //Line.parentNode.appendChild(newLine);
}


fonction "NewLine":
function NewLine(idJourNL,idWorkerNL,nameWorkerNL,datesNL)
{
 // New line
 $("#TJour_" + idJourNL+"_"+ idWorkerNL).append('<tr align="center" id="NRow_' + idJourNL+"_"+ idWorkerNL + '"></tr>'); 
 //On crée un Bouton New Line
 var ID_Jour = idJourNL;
 var ID_Worker = idWorkerNL;
 var NAME_Worker = nameWorkerNL;
 var D_A_T_E_S = datesNL;
 $("#Row2_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="button" value="New" style="width: 100%;" id="TNewLine_' + idJourNL+ idWorkerNL + '"  onclick="NewLine(ID_Jour,ID_Worker,NAME_Worker,D_A_T_E_S);"></input></td>');
 
 //On crée un Input pour la date
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJourNL+"_"+ idWorkerNL + '"></input></td>');
 //On crée un Select pour la tache
 $.ajax
 ({
  type: 'POST',
  data: {id_Jour : idJourNL,id_Worker : idWorkerNL},
  async: false,
  url:'TSRequest.ajx.php', 
  success:function(data) { $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td>'+data+'</td>');},
  error: function(error){alert("Erreur : " + error);}
 });
 //On crée un Input pour le Temps
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="text" style="width: 100%;" id="TTime_' + idJourNL+"_"+ idWorkerNL + '"></input>');
 //On crée une Zone de texte pour la description
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><textarea rows="1" cols="25" style="resize: none;" id="TTADescription_' + idJourNL+"_"+ idWorkerNL + '"></textarea></td>');
 //On crée un Select pour l employer
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="text" style="width: 100%;" id="TSWorker_' + idJourNL+"_"+ idWorkerNL + '"></input>');
 
 // On met le nom de l'employer sélectionner dans l'input TSWorker+idJourNL+idWorkerNL
 $("#TSWorker_"+idJourNL+"_"+ idWorkerNL).val(nameWorkerNL);
  
 // On met la valeur de la date sélectionner dans l'input TDate+idJourNL+idWorkerNL
 var dateText = $.datepick.formatDate(datesNL[0]);
 $("#TDate_"+idJourNL+"_"+ idWorkerNL).val(dateText); 
}


Tout mon script :
<script>
$(function() 
{
   $('#inlineDatepick').datepick
   ({onSelect:
  function(dates)
     {
   // Creation des variables Date
      var dateText = $.datepick.formatDate(dates[0]);
         var dateArr = dateText.split("/");
   var mois=dateArr[1];
   switch(mois) 
   {
   case "Jan":
     var ArrMonth = "01";
   break;
   case "Feb":
     var ArrMonth = "02";
   break;
   case "Mar":
     var ArrMonth = "03";
   break;
   case "Apr":
     var ArrMonth = "04";
   break;
   case "May":
     var ArrMonth = "05";
   break;
   case "Jun":
     var ArrMonth = "06";
   break;
   case "Jul":
     var ArrMonth = "07";
   break;
   case "Aug":
     var ArrMonth = "08";
   break;
   case "Sep":
     var ArrMonth = "09";
   break;
   case "Oct":
     var ArrMonth = "10";
   break;
   case "Nov":
     var ArrMonth = "11";
   break;
   case "Dec":
     var ArrMonth = "12";
   break;
   }
         var IDfromDateText= dateArr[2] +"-"+ ArrMonth  +"-"+ dateArr[0];  
   
   // Creation des variables Worker
   var IDWorker= document.getElementById("TopWorker").value;
   var WorkerArw = IDWorker.split(" ");
   var IDfromWorker = WorkerArw[0] ;
   var NamefromWorker = WorkerArw[1]+" "+ WorkerArw[2];
   
   if ($("#myDiv_TJour_"+IDfromDateText+"_"+IDfromWorker).length > 0)
   {
    // Il existe... donc j'affiche le tableau
                AffichDiv(IDfromDateText,IDfromWorker,NamefromWorker);
   }
   else
   {
    // L'element n'existe pas... je le crée ...
                CreaTable(IDfromDateText,IDfromWorker,NamefromWorker,dates);

                // ...puis j'affiche le tableau
                AffichDiv(IDfromDateText,IDfromWorker,NamefromWorker);                  
   }           
     }
   });
});

function CreaTable(idJour,idWorker,nameWorker,dates)
{
 //Je crée un nouveau div pour le clone du tableau d'origine
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + "_" + idWorker + "'></div>");
 //On crée un tableau pour le jour X 
 $("#myDiv_" +"TJour_" + idJour+"_"+ idWorker).append('<table border="2" id="TJour_' + idJour+"_"+ idWorker + '"></table>').css("border","2px inset #000000");
 // Line Title
 $("#TJour_" + idJour+"_"+ idWorker).append('<tr align="center" id="Row1_' + idJour+"_"+ idWorker + '"></tr>'); 
 //Title New Line
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">New Line</td>');
 //On crée un Input pour la date
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">Date</td>');
 //Title Request
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF" width="160px">Request</td>');
 //Title Times (h)
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">Time (h)</td>');
 //Title Description
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">Description</td>');
 //Title Worker
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF"width="170px">Worker</td>');
 
 // First line
 $("#TJour_" + idJour+"_"+ idWorker).append('<tr align="center" id="Row2_' + idJour+"_"+ idWorker + '"></tr>'); 
 //On crée un Bouton New Line
 var ID_Jour = idJour;
 var ID_Worker = idWorker;
 var NAME_Worker = nameWorker;
 var D_A_T_E_S = dates;
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="button" value="New" style="width: 100%;" id="TNewLine_' + idJour+ idWorker + '"  onclick="NewLine(ID_Jour,ID_Worker,NAME_Worker,D_A_T_E_S);"></input></td>');
 //On crée un Input pour la date
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJour+"_"+ idWorker + '"></input></td>');
 //On crée un Select pour la tache
 $.ajax
 ({
  type: 'POST',
  data: {id_Jour : idJour,id_Worker : idWorker},
  async: false,
  url:'TSRequest.ajx.php', 
  success:function(data) { $("#Row2_" + idJour+"_"+ idWorker).append('<td>'+data+'</td>');},
  error: function(error){alert("Erreur : " + error);}
 });
 //On crée un Input pour le Temps
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="text" style="width: 100%;" id="TTime_' + idJour+"_"+ idWorker + '"></input>');
 //On crée une Zone de texte pour la description
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><textarea rows="1" cols="25" style="resize: none;" id="TTADescription_' + idJour+"_"+ idWorker + '"></textarea></td>');
 //On crée un Select pour l employer
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="text" style="width: 100%;" id="TSWorker_' + idJour+"_"+ idWorker + '"></input>');
 
 // On met le nom de l'employer sélectionner dans l'input TSWorker+idJour+idWorker
 $("#TSWorker_"+idJour+"_"+ idWorker).val(nameWorker);
  
 // On met la valeur de la date sélectionner dans l'input TDate+idJour+idWorker
 var dateText = $.datepick.formatDate(dates[0]);
 $("#TDate_"+idJour+"_"+ idWorker).val(dateText); 
}

function NewLine(idJourNL,idWorkerNL,nameWorkerNL,datesNL)
{
 // New line
 $("#TJour_" + idJourNL+"_"+ idWorkerNL).append('<tr align="center" id="NRow_' + idJourNL+"_"+ idWorkerNL + '"></tr>'); 
 //On crée un Bouton New Line
 var ID_Jour = idJourNL;
 var ID_Worker = idWorkerNL;
 var NAME_Worker = nameWorkerNL;
 var D_A_T_E_S = datesNL;
 $("#Row2_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="button" value="New" style="width: 100%;" id="TNewLine_' + idJourNL+ idWorkerNL + '"  onclick="NewLine(ID_Jour,ID_Worker,NAME_Worker,D_A_T_E_S);"></input></td>');
 
 //On crée un Input pour la date
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJourNL+"_"+ idWorkerNL + '"></input></td>');
 //On crée un Select pour la tache
 $.ajax
 ({
  type: 'POST',
  data: {id_Jour : idJourNL,id_Worker : idWorkerNL},
  async: false,
  url:'TSRequest.ajx.php', 
  success:function(data) { $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td>'+data+'</td>');},
  error: function(error){alert("Erreur : " + error);}
 });
 //On crée un Input pour le Temps
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="text" style="width: 100%;" id="TTime_' + idJourNL+"_"+ idWorkerNL + '"></input>');
 //On crée une Zone de texte pour la description
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><textarea rows="1" cols="25" style="resize: none;" id="TTADescription_' + idJourNL+"_"+ idWorkerNL + '"></textarea></td>');
 //On crée un Select pour l employer
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="text" style="width: 100%;" id="TSWorker_' + idJourNL+"_"+ idWorkerNL + '"></input>');
 
 // On met le nom de l'employer sélectionner dans l'input TSWorker+idJourNL+idWorkerNL
 $("#TSWorker_"+idJourNL+"_"+ idWorkerNL).val(nameWorkerNL);
  
 // On met la valeur de la date sélectionner dans l'input TDate+idJourNL+idWorkerNL
 var dateText = $.datepick.formatDate(datesNL[0]);
 $("#TDate_"+idJourNL+"_"+ idWorkerNL).val(dateText); 
}

function AffichDiv(idJour,idWorker)
{
    //On masque TOUS les tableaux
  $('div[name="MesTBL"]').hide(); 
 
    // On affiche celui que l'on a selectionné
  $('#myDiv_' + "TJour_" + idJour+"_"+ idWorker).show();   
}

</script>


Firebug me donne se message d'erreur :
"ReferenceError: ID_Jour is not defined


NewLine(ID_Jour,ID_Worker,NAME_Worker,D_A_T_E_S);"

pourtant :
j'ai l'ai bien définie :
//On crée un Bouton New Line
 var ID_Jour = idJourNL;
 var ID_Worker = idWorkerNL;
 var NAME_Worker = nameWorkerNL;
 var D_A_T_E_S = datesNL;
 $("#Row2_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="button" value="New" style="width: 100%;" id="TNewLine_' + idJourNL+ idWorkerNL + '"  onclick="NewLine(ID_Jour,ID_Worker,NAME_Worker,D_A_T_E_S);"></input></td>');


Le problème il n'y a rien qui se passe quand j'appuis sur mon bouton "new line"

Merci

Merci et que le café soit avec vous.

2 réponses

Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015

Bonjour,
J'ai trouver se code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!-- source: http://stackoverflow.com/questions/11355708/jquery-to-clone-form-single-field-and-increment-id -->

<head>
<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1"></meta>
<!-- CSS -->
<link rel="stylesheet" href="media/css/jquery-ui-1.10.4.custom.css"></link>

<!-- general JavaScript -->
<script type="text/javascript" src="media/js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="media/js/jquery-ui-1.10.4.custom.js"></script>
</head>

<body>
<form method="post">
<div id="fileds">
<select name="lang" class='lang'>
<option>select language</option>
</select>
</div>
</form>
<div class="actions">
<button class="clone">Clone</button>
<button class="remove">Remove</button>
</div>

<script>
$(function()
{
$(".clone").on("click", function()
{
var cloneIndex = $(".lang").length;
$(".lang:last").clone()
.attr("id", "lang" + cloneIndex)
.appendTo("#fileds")

});

$("button.remove").on("click", function()
{
$(".lang:last").remove()
})
});
</script>

</body>
</html>

Qui me permet de crée un nouvelle élément avec un id incrémenter.
Comment je peut faire pour intégrer se code a ma page pour qu'il clone "toute ma ligne , change l'id de la ligne cloner et de ces éléments ?"

pour cloner ma ligne j'ai essai en fessant cette modification:
$(function()
{
$(".clone").on("click", function()
{
var cloneIndex = $("#Row2_" + idJour+"_"+ idWorker+"_"+ Num_Line).length;
$(("#Row2_" + idJour+"_"+ idWorker+"_"+ Num_Line):last).clone()
.attr("id", "#Row2_" + idJour+"_"+ idWorker+"_"+ cloneIndex)
.appendTo("#TJour_" + idJour+"_"+ idWorker)

});
});

mais sa na pas marcher, firebug me met ce message d'erreur:
"SyntaxError: missing ) after argument list


$(("#Row2_" + idJour+"_"+ idWorker+"_"+ Num_Line):last).clone()


"
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015

Salut ,
J'ai réussit à cloner une ligne et a changer son id.
voila le code :
<script>
$(function() 
{
   $('#inlineDatepick').datepick
   ({onSelect:
  function(dates)
     {
   // Creation des variables Date
      var dateText = $.datepick.formatDate(dates[0]);
         var dateArr = dateText.split("/");
   var mois=dateArr[1];
   switch(mois) 
   {
   case "Jan":
     var ArrMonth = "01";
   break;
   case "Feb":
     var ArrMonth = "02";
   break;
   case "Mar":
     var ArrMonth = "03";
   break;
   case "Apr":
     var ArrMonth = "04";
   break;
   case "May":
     var ArrMonth = "05";
   break;
   case "Jun":
     var ArrMonth = "06";
   break;
   case "Jul":
     var ArrMonth = "07";
   break;
   case "Aug":
     var ArrMonth = "08";
   break;
   case "Sep":
     var ArrMonth = "09";
   break;
   case "Oct":
     var ArrMonth = "10";
   break;
   case "Nov":
     var ArrMonth = "11";
   break;
   case "Dec":
     var ArrMonth = "12";
   break;
   }
         var IDfromDateText= dateArr[2] +"-"+ ArrMonth  +"-"+ dateArr[0];  
   
   // Creation des variables Worker
   var IDWorker= document.getElementById("TopWorker").value;
   var WorkerArw = IDWorker.split(" ");
   var IDfromWorker = WorkerArw[0] ;
   var NamefromWorker = WorkerArw[1]+" "+ WorkerArw[2];
   
   if ($("#myDiv_TJour_"+IDfromDateText+"_"+IDfromWorker).length > 0)
   {
    // Il existe... donc j'affiche le tableau
                AffichDiv(IDfromDateText,IDfromWorker,NamefromWorker);
   }
   else
   {
  
    // L'element n'existe pas... je le crée ...
                CreaTable(IDfromDateText,IDfromWorker,NamefromWorker,dates);

                // ...puis j'affiche le tableau
                AffichDiv(IDfromDateText,IDfromWorker,NamefromWorker);                  
   }           
     }
   });
});

function CreaTable(idJour,idWorker,nameWorker,dates)
{
 //Je crée un nouveau div pour le tableau
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + "_" + idWorker + "'></div>");
 //On crée un tableau pour le jour X 
 $("#myDiv_" +"TJour_" + idJour+"_"+ idWorker).append('<table border="2" id="TJour_' + idJour+"_"+ idWorker + '"></table>').css("border","2px inset #000000");
 
 // Line Title
 $("#TJour_" + idJour+"_"+ idWorker).append('<tr align="center" class="ORow" id="Row1_' + idJour+"_"+ idWorker + '"></tr>'); 
 //Title New Line
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">New Line</td>');
 //On crée un Input pour la date
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">Date</td>');
 //Title Request
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF" width="160px">Request</td>');
 //Title Times (h)
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">Time (h)</td>');
 //Title Description
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">Description</td>');
 //Title Worker
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF"width="170px">Worker</td>');
 
 // First line
 $("#TJour_" + idJour+"_"+ idWorker).append('<tr align="center" class="Row" id="Row2_' + idJour+"_"+ idWorker+ '"></tr>'); 
 //On crée un Bouton New Line
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="button" value="New" style="width: 100%;" class="clone"; id="TNewLine_' + idJour+"_"+ idWorker + '"></input></td>');
 //On crée un Input pour la date
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJour+"_"+ idWorker + '"></input></td>');
 //On crée un Select pour la tache
 $.ajax
 ({
  type: 'POST',
  data: {id_Jour : idJour+"_",id_Worker : idWorker},
  async: false,
  url:'TSRequest.ajx.php', 
  success:function(data) { $("#Row2_" + idJour+"_"+ idWorker).append('<td>'+data+'</td>');},
  error: function(error){alert("Erreur : " + error);}
 });
 //On crée un Input pour le Temps
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="text" style="width: 100%;" id="TTime_' + idJour+"_"+ idWorker+ '"></input>');
 //On crée une Zone de texte pour la description
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><textarea rows="2" cols="25" style="resize: none;" id="TTADescription_' + idJour+"_"+ idWorker +'"></textarea></td>');
 //On crée un Select pour l employer
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="text" style="width: 100%;" id="TSWorker_' + idJour+"_"+ idWorker+ '"></input>');
 
 // On met le nom de l'employer sélectionner dans l'input TSWorker+idJour+idWorker
 $("#TSWorker_"+idJour+"_"+ idWorker).val(nameWorker);
  
 // On met la valeur de la date sélectionner dans l'input TDate+idJour+idWorker
 var dateText = $.datepick.formatDate(dates[0]);
 $("#TDate_"+idJour+"_"+ idWorker).val(dateText); 
 
 // Méthode pour le clonage
 var cloneCount = 1;
 var Bclick="#TNewLine_" + idJour+"_"+ idWorker;
 var CRow ="#Row2_" + idJour+"_"+ idWorker;
 var NRow ="Row2_" + idJour+"_"+ idWorker;
 $(Bclick).click(function()
 {
  $(CRow)
    .clone()
    .attr('id', NRow +"_"+ cloneCount++)
    .insertAfter($('.ORow'))
 });  
}

function AffichDiv(idJour,idWorker)
{
    //On masque TOUS les tableaux
  $('div[name="MesTBL"]').hide(); 
 
    // On affiche celui que l'on a selectionné
  $('#myDiv_' + "TJour_" + idJour+"_"+ idWorker).show();   
}

</script>