1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

[JScript+PHP] Probléme avec la création d'élément avec JScript

Résolu
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
 - 15 avril 2014 à 12:04
jordane45
Messages postés
35473
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mai 2022
 - 16 avril 2014 à 11:08
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

Réponse 1 / 5
jordane45
Messages postés
35473
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mai 2022
 356
Modifié par jordane45 le 15/04/2014 à 19:20
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.
1
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
 1
15 avril 2014 à 19:21
Merci .
Je peut au moins voir se que je doit faire.
Bonne soirée
0
Réponse 2 / 5
jordane45
Messages postés
35473
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mai 2022
 356
15 avril 2014 à 12:40
Bonjour,

Si tu veux executer des requêtes depuis javascript (jquery)... il te faut utiliser AJAX
0
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
 1
15 avril 2014 à 12:43
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)
0
Réponse 3 / 5
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
 1
15 avril 2014 à 14:04
Comment je fais avec AJAX, vous avez de bon totu pour débutant qui pourrait m'aider a résoudre se problème.

Merci
0
jordane45
Messages postés
35473
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mai 2022
 356
15 avril 2014 à 14:18
Bonjour,
Il y a de quoi faire sur la toile.
https://www.google.fr/#q=jquery+ajax+exemple

Exemple :
http://fr.openclassrooms.com/informatique/cours/simplifiez-vos-developpements-javascript-avec-jquery/la-fonction-ajax
0
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
 1
15 avril 2014 à 14:20
merci je vais regarde sa.
0
Réponse 4 / 5
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
 1
15 avril 2014 à 15:31
Bonjour, auriez vous quelque exemple "pratique" simple avec AJAX ?
Merci
0
jordane45
Messages postés
35473
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mai 2022
 356
15 avril 2014 à 16:25
Tu as regardé les tutos ???
0
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
 1
15 avril 2014 à 17:29
oui, mais je vois pas comment l'utiliser.
Je comprend sont utilité mais ne vois pas comment mettre ceci en place dans mon site.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
 1
Modifié par EnguerrandP le 16/04/2014 à 10:21
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.
0
EnguerrandP
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
 1
16 avril 2014 à 10:55
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.
0
jordane45
Messages postés
35473
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 mai 2022
 356
16 avril 2014 à 11:08
Bon je vois que tu as compris comment ça marche .. ^^
Excellent.
0