Bonjour,
Je créer actuellement un gestionnaire de note de frais pour la société ou je bosse.
Mon but c'est de créer un formulaire à remplir, à sa soumission les données sont envoyées à la base de données mysql puis si ces données sont bien ajoutées, alors j'ajoute les champs du formulaire au tableau représentant la liste des mes dépenses.
Jusque là aucun problème !
J'ai ajouté à la fin de ce tableau et pour chaque ligne un lien me permettant de supprimer une dépense. Suppression qui se fait en ajax via Jquery, tout comme l'ajout d'ailleurs.
Si je veux supprimer une dépense saisie lors d'un précédent passage (la page n'a pas de nouveau éléments ajoutés via jquery) pas de soucis, mais si je veux supprimer une dépenses que je viens d'ajouter à l'instant alors ça ne fonctionne pas. Je sais normalement, si j'ai bien compris, qu'une fonction utilisée avec jquery ne peut être utilisée qu'avec les éléments déjà dans la page lors de son chargement. Si j'ajoute donc des éléments au tableau je ne peuyx pas les supprimer via jquery ... Ai je bien compris ?
Puis je utiliser donc .live() pour faire ce que je veux ?
Je vous donne donc le code de ma page :
Et ensuite mon script pour gérer tout ça (script dans un fichier extérieur à la page) :
Dans ce script j'ai mis en remarque la partie qui me permet de supprimer une dépense, qui elle fonctionne sur les éléments charger sans jquery. Et j'ai laissé la partie avec .live() qui elle ne supprime plus rien.
Avez vous déjà fait ce genre de chose ? Si oui comment ?
Quelqu'un peu m'aider ??
Merci par avance.
Modifié par czara (16 Mar 2010 - 20:51)
Je créer actuellement un gestionnaire de note de frais pour la société ou je bosse.
Mon but c'est de créer un formulaire à remplir, à sa soumission les données sont envoyées à la base de données mysql puis si ces données sont bien ajoutées, alors j'ajoute les champs du formulaire au tableau représentant la liste des mes dépenses.
Jusque là aucun problème !
J'ai ajouté à la fin de ce tableau et pour chaque ligne un lien me permettant de supprimer une dépense. Suppression qui se fait en ajax via Jquery, tout comme l'ajout d'ailleurs.
Si je veux supprimer une dépense saisie lors d'un précédent passage (la page n'a pas de nouveau éléments ajoutés via jquery) pas de soucis, mais si je veux supprimer une dépenses que je viens d'ajouter à l'instant alors ça ne fonctionne pas. Je sais normalement, si j'ai bien compris, qu'une fonction utilisée avec jquery ne peut être utilisée qu'avec les éléments déjà dans la page lors de son chargement. Si j'ajoute donc des éléments au tableau je ne peuyx pas les supprimer via jquery ... Ai je bien compris ?
Puis je utiliser donc .live() pour faire ce que je veux ?
Je vous donne donc le code de ma page :
<?php
require('config.inc.php');
// On appelle la session
session_start();
//verifier que l'utilisateur à le droit d'etre la !
//On vérifie que l'utilisateur soit bien connecté
if(!isset($_SESSION['login'])) {
die('Vous devez être enregistré pour accéder à cette partie du site');
exit();
}
include('connect.inc.php');
//Interrogation de la base pour avoir les info sur la note en fonction de l'id passé en GET
//Creation d'un tableau note avec les infos
$sql = "SELECT id, date, statut FROM notes WHERE id = ".addslashes(($_GET['idnote']));
$req = mysql_query($sql) or die('Erreur SQL : <br />'.$sql);
$note = mysql_fetch_assoc($req);
//Affichage de la note dans un tableau avec les liens si elle est en court d'édition, sans les liens et sans le formulaire si elle est en court de validation
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gestionnaire de Note de Frais - <?php echo htmlentities(($_SESSION['nom'])); ?></title>
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
<link type="text/css" href="js/themes/blue/style.css" rel="stylesheet"/>
<link type="text/css" href="style.css" rel="stylesheet" />
<meta name="description" content="Page d'authentification au gestionnaire des notes de frais" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>
<script type="text/javascript" src="js/ui.datepicker-fr.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="logo" id="logo">
<img src="img/logo.png" alt="logo de la societe" style="float: right; vertical-align: top"/>
</div>
<a href="main.php">Retour à la liste des Notes</a>
<h1>Note de <?php echo htmlentities(($note['date'])); ?> - <?php echo htmlentities(($_SESSION['nom'])); ?></h1>
<div id="droite" width="20%">
<div id="depense_div">
<div id="message_erreur" class="erreur" style="color:#FF0000;"></div>
<fieldset id="cadre_depense">
<legend> Ajouter une dépense</legend>
<form id="depense_form" method="post" action="">
<label id="label_date">Date</label><br />
<input type="text" name="date" id="datepicker"></input><br />
<label id="label_client">Client / lieu</label><br />
<input id="client" name="client" type="text" name="client" /><br />
<label id="label_categories">Catégories</label><br />
<select name="categories" id="categories">
<option name="" value="0"></option>
<?php
//Interroger la base mysql sur un numéro de note précis (attention, il faut vérifier si l'utilisateur courant à le droit d'afficher cette note)
$sql = "SELECT id,type, plafond, TVA FROM categories";
$req = mysql_query($sql) or die('Erreur SQL : <br />'.$sql);
while($categorie = mysql_fetch_assoc($req)) {
echo "<option name=\"".htmlentities($categorie['id'])."\" value=\"".htmlentities($categorie['id'])."\">".htmlentities($categorie['type'])."</option>\n\t\t";
}
?>
</select><br />
<label id="label_montan">Montant TTC en euros (€)</label><br />
<input id="montant" type="text" name="montant" size="5" maxlength="5"/><br />
<input id="IdNotes" type="hidden" name="IdNotes" value="<?php echo htmlentities(($note['id'])); ?>" />
<input type="submit" id="ajout" value="Ajouter">
<div id="loader" style="display:none" ><img src="img/loader.gif" width="32" height="32" alt="Image de chargement"></div>
<!--<input type="submit" id="cloture" value="Clôturer la note">-->
</form>
</fieldset>
</div>
<div id="export">
<fieldset id="export_field">
<legend>Exporter la note</legend>
<a href="export.php"><img src="img/excel_ico.png" alt="Icone Excel" /></a>
<a href="export.php"><img src="img/pdf_ico.png" alt="Icone PDF" /></a>
</fieldset>
</div>
<div id="div_statut">
<fieldset id="statut_field">
<legend>Statut ou erreur</legend>
<span id="statut"></span>
</fieldset>
</div>
</div>
<div id="table_div" width="70%">
<table id="table_depenses" class="tablesorter" border="0" cellspacing="1">
<thead>
<tr>
<th> Date </th>
<th> Client / lieu </th>
<th> Catégorie </th>
<th> Montant TTC en €</th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<?php
//Interroger la base mysql sur un numéro de note précis (attention, il faut vérifier si l'utilisateur courant à le droit d'afficher cette note)
$sql = "SELECT depenses.id, depenses.date, depenses.client, depenses.categorie, depenses.montant, categories.type AS type ";
$sql .= "FROM depenses JOIN categories ON categories.id = depenses.categorie ";
$sql .= "WHERE depenses.utilisateur = '".addslashes($_SESSION['id'])."' ";
$sql .= "AND depenses.IdNotes = ".addslashes($note['id']);
//echo $sql;
$req = mysql_query($sql) or die('Erreur SQL : <br />'.$sql);
while($depense = mysql_fetch_assoc($req)) {
echo "<tr id=\"".htmlentities($depense['id'])."\">\n";
echo "\t\t<td>".htmlentities($depense['date'])."</td>\n";
echo "\t\t<td>".htmlentities($depense['client'])."</td>\n";
echo "\t\t<td>".htmlentities($depense['type'])."</td>\n";
echo "\t\t<td>".htmlentities($depense['montant'])."</td>\n";
echo "\t\t<td><a id=\"editer\" name=\"editer\" href=\"#\"><img src=\"img/edit_depense_16.png\" alt=\"Icone edition\" /></a>  \n";
echo "\t\t<a id=\"supprimer\" class=\"suppr\" name=\"supprimer\" href=\"#\"><img src=\"img/del_depense_16.png\" alt=\"Icone suppr\" /></a></td>\n";
echo "\t</tr>\n";
}
?>
</tbody>
</table>
</div>
</body>
</html>
Et ensuite mon script pour gérer tout ça (script dans un fichier extérieur à la page) :
$(function() {
//Initilalisation de la fonction tri du tableau (plugin tablesorter)
$("#table_depenses").tablesorter( {
headers: {
// On choisi ici la colonne 5 (l'index commence à 0)
4: {
// On désactive le tri sur cette colonne
sorter: false
}
},
//Option permettant de colorer une ligne sur deux
widgets: ['zebra']
});
//Initialisation du champ date format + français (plugin datepicker UI)
$("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
$.datepicker.setDefaults($.datepicker.regional['fr']);
//Détection de l'évenement envoi du formulaire
$("#depense_form").submit (function() {
//Initialisation de la variable valid qui sera modifié si il 'y a une erreur de saisie dans le formulaire
var valid = true;
//On vide le champ statut et on modifie son style (rouge)
$("#statut").empty();
$("#statut").css("color","red");
//Si pas de date données
if ($("#datepicker").val() == "" ){
$("#datepicker").css("border-color", "#FF0000");
$("#statut").append("<br /><b>Vous devez indiquer une date</b>");
valid = false;
}
else {
date = $(this).find("input[name=date]").val();
}
//Si pas de nom de client
if ($("#client").val() == "" ){
$("#client").css("border-color", "#FF0000");
$("#statut").append("<br /><b>Vous devez indiquer un client ou un lieu</b>");
valid = false;
}
else {
client = $(this).find("input[name=client]").val();
}
//Si pas de montant saisie
if ($("#montant").val() == "" ){
$("#montant").css("border-color", "#FF0000");
$("#statut").append("<br /><b>Vous devez indiquer un montant</b>");
valid = false;
}
else {
montant = $(this).find("input[name=montant]").val();
}
//Si pas de categorie choisie
if ($("#categories").val() == "0" ){
$("#categories").css("border-color", "#FF0000");
$("#statut").append("<br /><b>Vous devez indiquer une catégorie</b>");
valid = false;
}
else {
categorie = $(this).find("select[name=categories]").val();
}
IdNotes = $(this).find("input[name=IdNotes]").val();
//On doit tester valid avant cet envoi
if (valid){
$("#loader").show();
//alert ("donnees valides");
$.post("add_depense.php", {date: date, client: client, categorie: categorie, montant: montant, IdNotes: IdNotes}, function(data){
$("#loader").hide();
if(data!="ok"){
//Si les donnees ne sont pas bonnes, alors on vide le div erreur et on y ajoute le retour du fichier PHP
$("#statut").empty().append(data);
}
else {
//Si ls données sont bonnes, on vide le div erreur
$("#statut").empty();
//On enlève les bordures rouges puisque les valeurs étaient bonnes et sont maintenant stockées
$("#depense_form > *").css("border-color", "#FFF");
//On doit ici ajouter une ligne au tableau, ligne qui correspond à notre depense
//On ajoute les nouvelles données dans le tableau
//On rafraichit le tri dans le tableau
$("#table_depenses").append("<tr><td>"+$("#datepicker").val()+"</td><td>"+$("#client").val()+"</td><td>"+$('select#categories option:selected').text()+"</td><td>"+$("#montant").val()+"</td><td><a id=\"editer\" name=\"editer\" href=\"#\"><img src=\"img/edit_depense_16.png\" alt=\"Icone edition\" /></a>  <a id=\"supprimer\" class=\"suppr\" name=\"supprimer\" href=\"#\"><img src=\"img/del_depense_16.png\" alt=\"Icone suppr\" /></a></td></tr>");
$("#table_depenses").trigger("update");
//Initialisation des valeurs du tri (0 représente la premier colonne t 1 l'ordre de tri.)
var sorting = [[0,1],[1,0]];
// On retri le tableau
$("#table_depenses").trigger("sorton",[sorting]);
//On vide le formulaire
$("#depense_form").each(function() {
//this.empty();
this.reset();
});
//On prévient l'utilisateur que ses données ont été insérées
$("#statut").css("color","green").append("<b>Votre dépense à été ajoutée</b>");
}
});
}
else {
//alert ("non valide");
}
return false;
});
//suppression d'une dépense dans la base et suppression de la ligne affichant ces données
// Le lien de suppression a la classe suppr
//On récupère son id qui est normalement l'id de la dépense dans la base
//$("a.suppr").click(function() {
// if (confirm("Voulez-vous supprimer cette dépense ?")) {
// var id_tr = $(this).parents("tr").attr("id");
// //alert (id_tr);
// $.post("suppr_depense.php", {id: $(this).parents("tr").attr("id")}, function(data2){
// if(data2!="ok"){
// //Si les donnees ne sont pas bonnes, alors on vide le div erreur et on y ajoute le retour du fichier PHP
// $("#erreur").empty().append(data2);
// }
// else {
// //Si les donnees sont bonnes on supprime la ligne dans le tableau
// $('#table_depenses tr[id="' + id_tr + '"]').fadeTo("slow", 0, function(){
// $(this).hide();
// //On tri de nouveau le tableau
// $("#table_depenses").trigger("update");
// var sorting = [[0,1],[1,0]];
// // On retri le tableau
// $("#table_depenses").trigger("sorton",[sorting]);
// });
// }
// //url: $(this).attr("href")
// });
// }
//});
$("a.suppr").live ("click", function() {
if (confirm("Voulez-vous supprimer cette dépense ?")) {
var id_tr = $(this).parents("tr").attr("id");
alert (id_tr);
alert (this);
$.post("suppr_depense.php", {id: $(this).parents("tr").attr("id")}, function(data2){
if(data2!="ok"){
//Si les donnees ne sont pas bonnes, alors on vide le div erreur et on y ajoute le retour du fichier PHP
$("#erreur").empty().append(data2);
}
else {
//Si les donnees sont bonnes on supprime la ligne dans le tableau
$('#table_depenses tr[id="' + id_tr + '"]').fadeTo("slow", 0, function(){
$(this).hide();
//On tri de nouveau le tableau
$("#table_depenses").trigger("update");
var sorting = [[0,1],[1,0]];
$("#table_depenses").trigger("sorton",[sorting]);
});
}
});
}
});
});
Dans ce script j'ai mis en remarque la partie qui me permet de supprimer une dépense, qui elle fonctionne sur les éléments charger sans jquery. Et j'ai laissé la partie avec .live() qui elle ne supprime plus rien.
Avez vous déjà fait ce genre de chose ? Si oui comment ?
Quelqu'un peu m'aider ??
Merci par avance.
Modifié par czara (16 Mar 2010 - 20:51)
