[RESOLU] Interactions avec des boutons injectés

Eléphanteau du PHP | 27 Messages

17 sept. 2014, 15:26

Bonjour à tous,

Comment puis-je agir sur des boutons que j'injecte directement via un print_r :
<?php include "../include/constantes.php";
	  include_once "../class/MySQL.php";
?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<!-- Responsive Design -->
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<meta content="" name="Tableau d'affichage">
	<meta content="" name="Unnamed">
	<title>Application université</title>
	<!-- Application du CSS -->
	<link rel="stylesheet" href="../css/bootstrap.min.css"/>
	<link rel="stylesheet" href="../css/supplement.css"/>
	<link rel="stylesheet" href="../css/glyphicons.css"/>
</head>
<body>
	<?php include "../include/header.php"; ?> 
	<div class="container">
		<div class="col-md-12">
			<div class="table-responsive"> 
				<!-- A voir si on utilise : table-hover , plus joli à mon goût, mais pas responsive. -->
				<table class="table table-hover">
					<h2>Multifonctions</h2>
					<thead>
						<tr>
							<th>Id</th>
							<th>Modèle</th>
							<th>N° de série</th>
							<th>N° SIUF</th>
							<th>Emplacement</th>
							<th>Actions</th>
						</tr>
						<tbody>
						<?php 
							// Création de l'objet MySQL.
							$madatabase = new MySQL();
							// Connexion, récupération et sélection de la base de données
							$link = $madatabase->connect();
							$madatabase->select();
							// Création de la requête SQL.
							$sql = "SELECT devices_fricopy.id, model, serialNumber, siufNumber, building 
									FROM emplacements_fricopy 
									INNER JOIN devices_fricopy 
									ON emplacements_fricopy.id = devices_fricopy.emplacement_id";
							$result = mysqli_query($link,$sql) 
							OR DIE (mysqli_error($link));
							// Tant que qu'il y a des lignes, on affiche les données.
							while ($ligne = $result->fetch_assoc()) {
								// Injection HTML & PHP
								print(
								"<tr>".
								"<td>".$ligne['id']." "."</td>".
								"<td>".$ligne['model']." "."</td>".
								"<td>".$ligne['serialNumber']." "."</td>".
								"<td>".$ligne['siufNumber']." "."</td>".
								"<td>".$ligne['building']."</td>".
								"<td>".
								'<button class="btn btn-primary btn-mini">
								<i class="glyphicon glyphicon-pencil">
								</i> Editer</button>'.
								'<button class="btn btn-danger btn-mini">
								<i class="glyphicon glyphicon-remove">
								</i> Supprimer</button>'.
								"</td>".
								"<tr>");
							}
						?>
						</tbody>
					</thead>
				</table>
			</div>
		</div>
	</div>
	<?php include "../include/footer.php"; ?>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<!-- <script type="text/JavaScript" src="js/ajax.js"></script> -->
</body>
</html>
Je débute, pas de moqueries ;)

Merci d'avance

Eléphant du PHP | 151 Messages

17 sept. 2014, 15:46

En fait tu veux créer des boutons pour chaque enregistrement qui te permettront d'effectuer de façon individuelle à chaque enregistrement 2 actions différentes. C'est bien ça ?

Juste une question : quel niveau as tu en jquery (puisque tu fais appel à jquery) ? Inconnu, débutant, avancé, ou tu écrits tes propres fonctions ?
Développeur d'applications pour intranets industriels (IHM), DBA Oracle, auto entrepreneur. Je fuis les frameworks car je pense comme Rasmus Lerdorf : "all PHP frameworks suck"...
Je me suis lancé dans la reprise du projet PhpMyNewsletter (GNU GPL), que je vous invite à essayer.

echo ($user=='enregistré?"je t'aide":"je t'aide pas !");

Eléphanteau du PHP | 27 Messages

17 sept. 2014, 16:02

En fait tu veux créer des boutons pour chaque enregistrement qui te permettront d'effectuer de façon individuelle à chaque enregistrement 2 actions différentes. C'est bien ça ?

Juste une question : quel niveau as tu en jquery (puisque tu fais appel à jquery) ? Inconnu, débutant, avancé, ou tu écrits tes propres fonctions ?
Oui c'est ça (sauf que je veux pas les créer, ils sont bien là, mais comment leur assigner un évènement ?). Chaque ligne du tableau pourra être "Editer" ou "Supprimer".
Mon niveau JQuery est médiocre, j'ai essayé d'utiliser JQuery & Ajax, en vain.

PS: J'ai déjà écris mes méthodes pour effectuer ces actions sur ma base de données, mais je ne sais pas comment les appeler à partir de ces boutons.

Eléphant du PHP | 151 Messages

17 sept. 2014, 16:13

C'est pas compliqué, il faut assigner à chaque ligne que tu crées un id unique, et l'action du bouton nommé toto ou tata dans le champ id entrainera ton action.
Pour mon script de newsletter j'ai du en créer un, c'est assez complexe, c'est bien de l'ajax, et je vais te laisser chercher un peu et proposer une solution.
Pour te mettre sur le chemin :
- ne mettre qu'un seul php en cible d'appel ajax avec comme paramètre : l'id unique à la ligne (ici de <tr> à </tr>, vaudrait mieux des div ou span...)
- autres paramètres : l'id éventuel du champ de la bdd, le type d'action : update ou delete ou ce que tu veux
- Tester le bon retour ou les erreurs en retour de l'ajax

Réponse demain ou ce soir après que tu aies fait une proposition sérieuse, mais aide il y aura...
Développeur d'applications pour intranets industriels (IHM), DBA Oracle, auto entrepreneur. Je fuis les frameworks car je pense comme Rasmus Lerdorf : "all PHP frameworks suck"...
Je me suis lancé dans la reprise du projet PhpMyNewsletter (GNU GPL), que je vous invite à essayer.

echo ($user=='enregistré?"je t'aide":"je t'aide pas !");

Eléphanteau du PHP | 27 Messages

17 sept. 2014, 16:20

C'est pas compliqué, il faut assigner à chaque ligne que tu crées un id unique, et l'action du bouton nommé toto ou tata dans le champ id entrainera ton action.
Pour mon script de newsletter j'ai du en créer un, c'est assez complexe, c'est bien de l'ajax, et je vais te laisser chercher un peu et proposer une solution.
Pour te mettre sur le chemin :
- ne mettre qu'un seul php en cible d'appel ajax avec comme paramètre : l'id unique à la ligne (ici de <tr> à </tr>, vaudrait mieux des div ou span...)
- autres paramètres : l'id éventuel du champ de la bdd, le type d'action : update ou delete ou ce que tu veux
- Tester le bon retour ou les erreurs en retour de l'ajax

Réponse demain ou ce soir après que tu aies fait une proposition sérieuse, mais aide il y aura...
C'est super que tu me consacres du temps, je te remercie pour ça. Je te montre tout ce que j'ai fait demain. Pour aujourd'hui, j'ai eu ma dose d'apprentissage !

Eléphant du PHP | 151 Messages

17 sept. 2014, 17:01

...Pour aujourd'hui, j'ai eu ma dose d'apprentissage !
Ben non, je ne vois pas le code !! :lol: :lol:
Développeur d'applications pour intranets industriels (IHM), DBA Oracle, auto entrepreneur. Je fuis les frameworks car je pense comme Rasmus Lerdorf : "all PHP frameworks suck"...
Je me suis lancé dans la reprise du projet PhpMyNewsletter (GNU GPL), que je vous invite à essayer.

echo ($user=='enregistré?"je t'aide":"je t'aide pas !");

Eléphanteau du PHP | 27 Messages

18 sept. 2014, 07:48

C'est pas compliqué, il faut assigner à chaque ligne que tu crées un id unique, et l'action du bouton nommé toto ou tata dans le champ id entrainera ton action.
Alors j'ai fait un incrément dans mon while pour stocker un id pour chaque <tr>. Mais je ne saisis pas complètement la suite de ton explication. Qu'entends-tu par "L'action du bouton nommé x & y dans le champ id entrainera ton action"
						
<?php 
	// Création de l'objet MySQL.
	$madatabase = new MySQL();
	// Connexion, récupération et sélection de la base de données
	$link = $madatabase->connect();
	$madatabase->select();
	// Création de la requête SQL.
	$sql = "SELECT devices_fricopy.id, model, serialNumber, siufNumber, building 
		FROM emplacements_fricopy 
		INNER JOIN devices_fricopy 
		ON emplacements_fricopy.id = devices_fricopy.emplacement_id";
        $result = mysqli_query($link,$sql) 
	OR DIE (mysqli_error($link));
	// Tant que qu'il y a des lignes, on affiche les données.
	$numberId = 0;
        while ($ligne = $result->fetch_assoc()) {
		++$numberId;
		// Injection HTML & PHP
		print(
		"<tr id='$numberId'>".
		"<td>".$ligne['id']." "."</td>".
		"<td>".$ligne['model']." "."</td>".
		"<td>".$ligne['serialNumber']." "."</td>".
		"<td>".$ligne['siufNumber']." "."</td>".
		"<td>".$ligne['building']."</td>".
		"<td>".
		'<button class="btn btn-primary btn-mini">
		<i class="glyphicon glyphicon-pencil">
		</i> Editer</button>'.
		'<button class="btn btn-danger btn-mini">
		<i class="glyphicon glyphicon-remove">
		</i> Supprimer</button>'.
		"</td>".
		"</tr>");
		}
?>
Ensuite, tu me parles d'Ajax, et là, je n'ai vraiment aucune base. J'ai construis mon fichier JS comme ceci :

[javascript]$(document).ready( function () {
$('form.well form-search').submit( function() { // à la soumission du formulaires
event.preventDefault(); //pas recharger la page
$.ajax({ // fonction permettant de faire de l'ajax
type: "POST", // methode de transmission des données au fichier php
url: "../Universite/crud.php", // url du fichier php
data: $(this).serialize(); // données sérialisées
dataType: 'json'; // type de données
success: function(msg){ // si l'appel a bien fonctionné
if(msg==1) // si la connexion en php a fonctionnée
{
alert("Recherche réussie");
}
else // si la connexion en php n'a pas fonctionnée
{
alert("Recherche échouée");
}
}
});
return false; // permet de rester sur la même page à la soumission du formulaire
});
});
[/javascript]

Bien entendu, je devrai modifier cette ligne j'imagine :

[javascript] $('form.well form-search').submit( function() { // à la soumission du formulaires [/javascript]

Eléphant du PHP | 151 Messages

18 sept. 2014, 08:55

Salut,

Comme dit hier, les balises div et span seront plus opportunes pour travailler :

Code : Tout sélectionner

<?php // Création de l'objet MySQL. $madatabase = new MySQL(); // Connexion, récupération et sélection de la base de données $link = $madatabase->connect(); $madatabase->select(); // Création de la requête SQL. $sql = "SELECT devices_fricopy.id, model, serialNumber, siufNumber, building FROM emplacements_fricopy INNER JOIN devices_fricopy ON emplacements_fricopy.id = devices_fricopy.emplacement_id"; $result = mysqli_query($link,$sql) OR DIE (mysqli_error($link)); // Tant que qu'il y a des lignes, on affiche les données. $numberId = 0; while ($ligne = $result->fetch_assoc()) { ++$numberId; // Injection HTML & PHP echo "<div id='$numberId'>". "<span>".$ligne['id']." "."</span>". "<span>".$ligne['model']." "."</span>". "<span>".$ligne['serialNumber']." "."</span". "<span>".$ligne['siufNumber']." "."</span>". "<span>".$ligne['building']."</span>". "<span>". '<button class="btn btn-primary btn-mini"> <i class="glyphicon glyphicon-pencil"> </i> Editer</button>'. '<button class="btn btn-danger btn-mini"> <i class="glyphicon glyphicon-remove"> </i> Supprimer</button>'. "</span>". "</div>"; } ?>
Ensuite pour le javascript, le jquery, oui c'est à peu près ça.

Ce matin, je n'ai pas beaucoup de temps, pour aller vite, je vais te donner le code que j'utilise dans mon script de mailing :

Code : Tout sélectionner

<?php if (count($mails_errors)>0){ foreach($mails_errors as $row){ echo '<form id="'.$row['hash'].'">'; echo '<input type="text" class="input" value="'.$row['email'].'" name="this_mail" id="this_mail" size="40" />'; echo $row['status']; echo '<input type="hidden" name="list_id" value="'.$list_id.'" />'; echo '<input type="hidden" name="hash" value="'.$row['hash'].'" />'; echo "<input type='hidden' name='token' value='$token' />"; echo '<input type="button" name="action" class="actionMail" value="UPDATE" id="update" />'; echo '<input type="button" name="action" class="actionMail" value="DELETE" id="delete" />'; echo '</form>'; } } else { echo '<h4 class="alert_info">Pas d\'adresse(s) e-mail incidentée(s) à traiter. Good job ! <img src="js/tinymce/plugins/emoticons/img/smiley-cool.gif" alt="Yeah ! You did it !" title="Yeah ! You did it !" width="18" heigh="18" /></h4>'; echo '<div class="spacer"></div>'; } ?> <script> $("input.actionMail").click(function(){ var hideItem='#'+$(this).closest("form").attr('id'); $.ajax({type: "POST", url: "include/manager_mails.php", data: $(this).parents('form').serialize()+ '&'+ encodeURI($(this).attr('name'))+'='+ encodeURI($(this).attr('id')), success: function(data){ $(hideItem).html(data).addClass('success'); } }); }); </script>
La différence est que je mets chaque ligne dans un form, avec des inputs pour être propre en formulaire, et une fois l'action faite je cache la ligne.
Développeur d'applications pour intranets industriels (IHM), DBA Oracle, auto entrepreneur. Je fuis les frameworks car je pense comme Rasmus Lerdorf : "all PHP frameworks suck"...
Je me suis lancé dans la reprise du projet PhpMyNewsletter (GNU GPL), que je vous invite à essayer.

echo ($user=='enregistré?"je t'aide":"je t'aide pas !");

Eléphanteau du PHP | 27 Messages

18 sept. 2014, 09:05

Suis-je obligé de changer ma structure en <div> et <span> ? Car la structure est une <table> à la base :
<table class="table table-hover">
					<h2>Multifonctions</h2>
					<thead>
						<tr>
							<th>Id</th>
							<th>Modèle</th>
							<th>N° de série</th>
							<th>N° SIUF</th>
							<th>Emplacement</th>
							<th>Actions</th>
						</tr>
						<tbody>
						<?php ... suite code
J'aimerais bien que mon tableau ait une gueule potable ;)
[EDIT]: <tr> n'a pas d'attribut "id" ? Du coup...

Merci pour ces éléments de réponses. Je vais essayer de répliquer sur mon projet.

Eléphant du PHP | 151 Messages

18 sept. 2014, 09:45

Les div et span sont à prioriser même pour une table, ça a l'avantage d'être plus maléable pour la portablilité.
Les tableaux ne sont plus dans le coup.
Les div sont faciles à gérer en css, donc oui !
Modifié en dernier par arnaud69 le 18 sept. 2014, 09:54, modifié 1 fois.
Développeur d'applications pour intranets industriels (IHM), DBA Oracle, auto entrepreneur. Je fuis les frameworks car je pense comme Rasmus Lerdorf : "all PHP frameworks suck"...
Je me suis lancé dans la reprise du projet PhpMyNewsletter (GNU GPL), que je vous invite à essayer.

echo ($user=='enregistré?"je t'aide":"je t'aide pas !");

Eléphanteau du PHP | 27 Messages

18 sept. 2014, 09:46

Les dic et span sont à prioriser même pour une table, ça a l'avantage d'être plus maléable pour la portablilité.
Les tableaux ne sont plus dans le coup.
Les div sont faciles à gérer en css, donc oui !
Okay, merci pour ces précisions.

Eléphanteau du PHP | 27 Messages

18 sept. 2014, 11:24

Sur vos boutons, vous utilisez l'attribut "class" qui fera le lien avec JS.
echo '<input type="button" name="action" class="actionMail" value="UPDATE" id="update" />';
J'utilise Bootstrap et pour définir le bouton, l'attribut "class" est déjà utilisé.
<button class="btn btn-primary btn-mini"><i class="glyphicon glyphicon-pencil"></i> Editer</button>
Comment faire ? :(
Dois-je, dans le JS, noter :

[javascript] $('button.btn btn-primary btn-mini').click( function() {[/javascript]

Et si j'ai bien compris, c'est dans votre "manager_mails.php" que vous effectuer l'update/delete dans la BDD?

Nestecha
Invité n'ayant pas de compte PHPfrance

18 sept. 2014, 16:22

Sur vos boutons, vous utilisez l'attribut "class" qui fera le lien avec JS.
echo '<input type="button" name="action" class="actionMail" value="UPDATE" id="update" />';
J'utilise Bootstrap et pour définir le bouton, l'attribut "class" est déjà utilisé.
<button class="btn btn-primary btn-mini"><i class="glyphicon glyphicon-pencil"></i> Editer</button>
Comment faire ? :(
Dois-je, dans le JS, noter :

[javascript] $('button.btn btn-primary btn-mini').click( function() {[/javascript]

Et si j'ai bien compris, c'est dans votre "manager_mails.php" que vous effectuer l'update/delete dans la BDD?
Ca empêche pas, tu peux rajouter autant de classe que tu veux ;) Donc tu peux mettre button class="btn btn-primary btn-mini actionMail" et le chopper ensuite via jQuery $('button.actionMail')

Par contre j'veux pas ouvrir un débat, mais quand on veut faire un tableau, autant utiliser <table>. On ne fait pas un site entier avec <table> comme avant, (comme JADIS) mais on peut quand même encore l'utiliser !

Eléphanteau du PHP | 27 Messages

18 sept. 2014, 16:26

Ca empêche pas, tu peux rajouter autant de classe que tu veux ;) Donc tu peux mettre button class="btn btn-primary btn-mini actionMail" et le chopper ensuite via jQuery $('button.actionMail')

Par contre j'veux pas ouvrir un débat, mais quand on veut faire un tableau, autant utiliser <table>. On ne fait pas un site entier avec <table> comme avant, (comme JADIS) mais on peut quand même encore l'utiliser !
Okay pour les classes! Super!

Pour la question de la table, je ne comprends pas ta remarque, vu que je garde <table> qui englobe mes <div> & <span>. Est-ce une erreur ?

Merci ;)

Eléphanteau du PHP | 27 Messages

22 sept. 2014, 07:45

Bonjour à tous,

En ce dur lundi matin, j'ai une question à propos d'Ajax.

Je j'n'arrive pas à utiliser ce Javascript pour faire mon évènement! Déjà, je ne vois jamais mes "Alert" donc il me semble que je ne rentre même pas dans la partie action du Javascript. Voici comment je procède :

Show.php
<?php include "../include/constantes.php";
	  include_once "../class/MySQL.php";
?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<!-- Responsive Design -->
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<meta content="" name="Tableau d'affichage">
	<meta content="" name="Unnamed">
	<title>Application université</title>
	<!-- Application du CSS -->
	<link rel="stylesheet" href="../css/bootstrap.min.css"/>
	<link rel="stylesheet" href="../css/supplement.css"/>
	<link rel="stylesheet" href="../css/glyphicons.css"/>
</head>
<body>
	<?php include "../include/header.php"; ?> 
	<div class="container">
		<div class="col-md-12">
			<div class="table-responsive"> 
				<table class="table table-hover">
					<h2>Multifonctions</h2>
					<thead>
						<div>
							<span>Id</span>
							<span>Modèle</span>
							<span>N° de série</span>
							<span>N° SIUF</span>
							<span>Emplacement</span>
							<span>Actions</span>
						</div>
						<tbody>
						<?php 
							$madatabase = new MySQL();
							$link = $madatabase->connect();
							$madatabase->select();
							$sql = "SELECT devices_fricopy.id, model, serialNumber, siufNumber, building 
									FROM emplacements_fricopy 
									INNER JOIN devices_fricopy 
									ON emplacements_fricopy.id = devices_fricopy.emplacement_id";
							$result = mysqli_query($link,$sql) 
							OR DIE (mysqli_error($link));
							$numberId = 0;
							while ($ligne = $result->fetch_assoc()) {
								++$numberId;
								// Injection HTML & PHP
								print(
								"<div id='$numberId'>".
								"<span>".$ligne['id']." "."</span>".
								"<span>".$ligne['model']." "."</span>".
								"<span>".$ligne['serialNumber']." "."</span>".
								"<span>".$ligne['siufNumber']." "."</span>".
								"<span>".$ligne['building']."</span>".
								"<span>".
								'<button class="btn btn-primary btn-mini actionUpdateButton">
								<i class="glyphicon glyphicon-pencil">
								</i> Editer</button>'.
								'<button class="btn btn-danger btn-mini actionDeleteButton">
								<i class="glyphicon glyphicon-remove">
								</i> Supprimer</button>'.
								"</span>".
								"</div>");
							}
						?>
						</tbody>
					</thead>
				</table>
			</div>
		</div>
	</div>
	<?php include "../include/footer.php"; ?>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/ajaxDelete.js"</script>
	<script src="../js/ajaxUpdate.js"</script>
	<!-- <script type="text/JavaScript" src="js/ajax.js"></script> -->
</body>
</html>

Un de mes 2 fichiers Javascript (ajaxDelete.js / ajaxUpdate.js) :

[javascript]$(document).ready( function () {
$('button.actionDeleteButton').click( function() { // à la soumission du formulaires
event.preventDefault(); //pas recharger la page
$.ajax({ // fonction permettant de faire de l'ajax
type: "POST", // methode de transmission des données au fichier php
url: "../Universite/crud.php", // url du fichier php
data: $(this).serialize(); // données sérialisées
dataType: 'json'; // type de données
success: function(msg){ // si l'appel a bien fonctionné
if(msg==1) // si la connexion en php a fonctionnée
{
alert("DELETE réussie");
}
else // si la connexion en php n'a pas fonctionnée
{
alert("Recherche échouée");
}
}
});
return false; // permet de rester sur la même page à la soumission du formulaire
});
});[/javascript]