[JScript+PHP] Probléme avec la création d'élément avec JScript [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
32501
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
-
Bonjour,
Voila mon code (script):
<script>

$(function() 
{
   $('#inlineDatepick').datepick
   ({onSelect:
		function(dates)
   		{
    		var dateText = $.datepick.formatDate(dates[0]);
       		var dateArr = dateText.split("/");
        	var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];	 
		 
			if ($("#myDiv_TJour_"+IDfromDateText).length > 0)
			{
				// Il existe... donc j'affiche le tableau
                AffichDiv(IDfromDateText);
			}
			else
			{
				// L'element n'existe pas... je le crée ...
                CreaTable(IDfromDateText,dates);

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

function CreaTable(idJour,dates)
{
	//Je crée un nouveau div pour le clone du tableau d'origine
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + "'></div>");
	//On crée un tableau pour le jour X 
	$("#myDiv_" +"TJour_" + idJour).append('<table border="2" id="TJour_' + idJour + '"></table>').css("border","2px inset #000000");
	
	$("#TJour_" + idJour).append('<tr align="center" id="Row1_' + idJour + '"></tr>'); 
	//On crée un Bouton New Line
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">New Line</td>');
	//On crée un Input pour la date
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Date</td>');
	//On crée un Select pour la tache
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF" width="160px">Request</td>');
	//On crée un Input pour le Temps
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Time (h)</td>');
	//On crée une Zone de texte pour la description
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Description</td>');
	//On crée un Select pour le travailleur 
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF"width="170px">Worker</td>');
	
	$("#TJour_" + idJour).append('<tr align="center" id="Row2_' + idJour + '"></tr>'); 
	//On crée un Bouton New Line
	$("#Row2_" + idJour).append('<td><input type="button" value="New" style="width: 100%;" onclick="CloneLine(this.parentNode.parentNode);" id="TNewLine_' + idJour + '"></input></td>');
	//On crée un Input pour la date
	$("#Row2_" + idJour).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJour + '"></input></td>');
	//On crée un Select pour la tache
	$("#Row2_" + idJour).append('<td><?php
			$sql = "SELECT caetbl_people.PeopleID, caetbl_people.LastName, caetbl_people.FirstName
			FROM caetbl_people 
			INNER JOIN caetbl_GroupList 
			ON caetbl_GroupList.GroupID = caetbl_people.Group
			WHERE caetbl_GroupList.Group_Name='C&EA'
			ORDER BY caetbl_people.LastName;";
			$result = mysql_query($sql)or die("Requete pas comprise");
			echo "<select  style=\"width: 100%;\" id=\"TSRequest_' + idJour + '\" name=\"Table_Worker\" >" ;
			while ($row=mysql_fetch_assoc($result)) 
			{
				echo "<option value=\"". $row['LastName'] ." ". $row['FirstName'] ."\">". $row['LastName'] ." ". $row['FirstName'] ."</option>\n"; 
			}
			echo "</select></td></tr>\n
				  </form>\n";
		?></td>');
	//On crée un Input pour le Temps
	$("#Row2_" + idJour).append('<td><input type="text" style="width: 100%;" id="TTime_' + idJour + '"></input>');
	//On crée une Zone de texte pour la description
	$("#Row2_" + idJour).append('<td><textarea rows="2" cols="25" style="resize: none;" id="TTADescription_' + idJour + '"></textarea></td>');
	//On crée un Select pour le travailleur 
	$("#Row2_" + idJour).append('<td><select  style="width: 100%;" onChange="saveValue(this)" id="TSWorker_' + idJour + '"></select></td>');

	// On met la valeur de la date sélectionner dans l'input TDate+idJour
	var dateText = $.datepick.formatDate(dates[0]);
	$("#TDate_"+idJour).val(dateText);	
}

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

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

</script>


Voila mon problème :
J'ai une fonction JavaScript qui me crée des éléments et dans deux de ces élément il y a du PHP.
D'après se que j'ai lu on ne peut pas mettre de PHP dans une fonction JavaScript .

Comment je peut faire pour que ce la marche ?
Merci

5 réponses

Messages postés
32501
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
348
Ben déjà tu créés une page php qui contiendra le code php que ton ajax devra exécuter :

Fichier que je nomme : TSRequest.ajx.php
<?php

// si besoin.. tu rajoutes les fichiers de connexion à ta BDD..

$idJour = isset($_POST['id_Jour'])?$_POST['id_Jour']:'';

if ($idJour){
$sql = "SELECT caetbl_people.PeopleID
     , caetbl_people.LastName 
     ,caetbl_people.FirstName
FROM caetbl_people 
INNER JOIN caetbl_GroupList 
 ON caetbl_GroupList.GroupID = caetbl_people.Group
WHERE caetbl_GroupList.Group_Name='C&EA'
ORDER BY caetbl_people.LastName";

$result = mysql_query($sql)or die("Erreur dans la requête ".$sql."<br>");

echo "<select  style=\"width: 100%;\" id=\"TSRequest_' . $idJour . '\" name=\"Table_Worker\" >" ;
while ($row=mysql_fetch_assoc($result)){
   echo "<option value=\"". $row['LastName'] ." "
             . $row['FirstName'] ."\">"
            . $row['LastName'] ." "
            . $row['FirstName'] 
          ."</option>\n"; 
}
echo  "</select>
          </td>
        </tr>
    </form>";
}
  ?>


Dans ton code Javascript, pour appeller ce script tu fais un truc du genre :

function CreaTable(idJour,dates)
{
 //Je crée un nouveau div pour le clone du tableau d'origine
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + "'></div>");
 //On crée un tableau pour le jour X 
 $("#myDiv_" +"TJour_" + idJour).append('<table border="2" id="TJour_' + idJour + '"></table>').css("border","2px inset #000000");
 
 $("#TJour_" + idJour).append('<tr align="center" id="Row1_' + idJour + '"></tr>'); 
 //On crée un Bouton New Line
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">New Line</td>');
 //On crée un Input pour la date
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Date</td>');
 //On crée un Select pour la tache
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF" width="160px">Request</td>');
 //On crée un Input pour le Temps
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Time (h)</td>');
 //On crée une Zone de texte pour la description
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Description</td>');
 //On crée un Select pour le travailleur 
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF"width="170px">Worker</td>');
 
 $("#TJour_" + idJour).append('<tr align="center" id="Row2_' + idJour + '"></tr>'); 
 //On crée un Bouton New Line
 $("#Row2_" + idJour).append('<td><input type="button" value="New" style="width: 100%;" onclick="CloneLine(this.parentNode.parentNode);" id="TNewLine_' + idJour + '"></input></td>');
 //On crée un Input pour la date
 $("#Row2_" + idJour).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJour + '"></input></td>');


//On crée un Select pour la tache
$.ajax({
  type: 'POST',
  data: {id_Jour :idJour};
  async: true,
  url:'TSRequest.ajx.php', 
  success:function(data) {
     $("#Row2_" + idJour).append('<td>'+data+'</td>');
  },
error: function(error){
 alert("Erreur : " + error);
}
});

//On crée un Input pour le Temps
 $("#Row2_" + idJour).append('<td><input type="text" style="width: 100%;" id="TTime_' + idJour + '"></input>');
 //On crée une Zone de texte pour la description
 $("#Row2_" + idJour).append('<td><textarea rows="2" cols="25" style="resize: none;" id="TTADescription_' + idJour + '"></textarea></td>');
 //On crée un Select pour le travailleur 
 $("#Row2_" + idJour).append('<td><select  style="width: 100%;" onChange="saveValue(this)" id="TSWorker_' + idJour + '"></select></td>');

 // On met la valeur de la date sélectionner dans l'input TDate+idJour
 var dateText = $.datepick.formatDate(dates[0]);
 $("#TDate_"+idJour).val(dateText); 
}




NB: en général on évite de ramener du HTML par ajax...(on préfera ne ramener qu'un tableau de données qu'on manipulera ensuite dans le javascript pour créer les select ..option..etc... )
Mais vu que c'est ta "première" fois... c'est plus simple .....

PS: j'ai fait le code de tête sans le tester. Il se peut que tu rencontres quelques bugs ... mais bon.. je t'ai donné la forme. il ne te restera plus qu'à adapter/corriger pour que ça corresponde à tes besoins.

cordialement,
jordane.
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
Merci .
Je peut au moins voir se que je doit faire.
Bonne soirée
Messages postés
32501
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
348
Bonjour,

Si tu veux executer des requêtes depuis javascript (jquery)... il te faut utiliser AJAX
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
Donc avec AJAX je vais pouvoir exécuter ma fonction PHP dans mon script ?
Question : Es se que sa ne serait pas plus propre de convertir mon script entièrement en PHP.
(J'ai crus comprendre sa en lisant des forums)
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
Comment je fais avec AJAX, vous avez de bon totu pour débutant qui pourrait m'aider a résoudre se problème.

Merci
Messages postés
32501
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
348
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
merci je vais regarde sa.
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
Bonjour, auriez vous quelque exemple "pratique" simple avec AJAX ?
Merci
Messages postés
32501
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
348
Tu as regardé les tutos ???
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
oui, mais je vois pas comment l'utiliser.
Je comprend sont utilité mais ne vois pas comment mettre ceci en place dans mon site.
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
Bonjour,
Je suis entrain de déboguer, le code que tu ma donner.

Au premier test l'interface ne voulait pas s'initialiser correctement.
Il y avait une coquille a la ligne
data: {id_Jour :idJour};

j'ai remplacer le ';' par une ','.
Puis j'ai refait un test le il ma mit le message d'erreur "Requete pas comprise" dans la cellule du tableau à la place du select.
J'ai alors rajouter le fichier de connexion au fichier PHP
include('connexion.php');
.

La l'interface se lance, je crée un tableau il n'y a plus de message d'erreur mais il n'y a pas le select.
Pourtant quand je vais dans :
-POST http://localhost/Projet/CAE/Ressource_tests/%5bA...erfectionnement_Search_Request/TSRequest.ajx.php
qui et dans la partit 'all' de la console de Firebug,

J'ai l'impression que le select et crée car :
-il y a le bonne id dans le select
-le code et bien aller chercher les renseignements dans la base de données.

Après j'ai trouver la solution le probléme vener de
</td></tr>\n
</form>\n
après les avoir supprimer sa marche .
Merci pour ton aide, bonne journée.

Merci et que le café soit avec vous.
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
J'ai aussi mit
async: false,

pour que l'interface attende la réponse du serveur pour que mes élément reste au bonne endroit sinon certain de mes élément n'était pas bien placer.
Messages postés
32501
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mai 2021
348
Bon je vois que tu as compris comment ça marche .. ^^
Excellent.