Messagerie envoi en jQuery avec fonction ajax en traitement

**stefde3** · 09/03/2015, 12h35

Bonjour à toutes et tous,

Voilà mon soucis, je suis en train de créer une messagerie interne au jeu et sur la boite de réception, le client aura la possibilité de choisir entre supprimer les message cochés ou les archiver. Naturellement tout ça est sur le même "form". Mon soucis, diriger vers le bon script.

Je n'ai donc pas mis d'action à mon formulaire puisque je veux le définir dans une function button1() et function button2() comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
$(document).ready(function(){
 
// Traitement des formulaires messagerie
 
    function button1(a){
	$('.loading').hide();
	$.ajax({
	    type:"POST",
	    url:"includes/functions/supprimer.php",
	    data:"id="+a,
 
	    beforeSend: function(){
	        $('.loading').show();
		$('#supprimer').attr('value', "Traitement...");
	    },
 
	    success:function(a){
		$('.loading').hide();
		$('#supprimer').attr('value', "Supprimer");
		if(data.message){
		    $('.infos').addClass(data.success).html(data.message).fadeIn(600);
		    setTimeout(function(){
			$('.infos').fadeOut(600);
			location.reload();
		    }, 4000);
		}
            }
	});
        return false;
    }
 
    function button2(a){
        $.ajax({
	    type:"POST",
	    url:"includes/functions/archiver.php",
	    data:"id="+a,
 
	    beforeSend: function(){
		$('.loading').show();
		$('#archiver').attr('value', "Traitement...");
	    },
 
	    success:function(a){
		$('.loading').hide();
		$('#archiver').attr('value', "Archiver");
		if(data.message){
		    $('.infos').addClass(data.success).html(data.message).fadeIn(600);
		    setTimeout(function(){
			$('.infos').fadeOut(600);
			location.reload();
		    }, 4000);
		}
            }
	});
        retun false;
    }
});

Pour mieux comprendre la partie html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<form name="messager" method="post">
    <div class="messagesTop">
	<div class="messCol1"><img src="view/img/lu.png" alt="lu.png"/></div>
	<div class="messCol2">Expéditeur</div>
	<div class="messCol3">Sujet</div>
	<div class="messCol4">Reçu le</div>
	<div class="messCol5"><img src="view/img/suppr.png" alt="suppr.png"/></div>
    </div>
 
    <?php
        include '../includes/config/config.php';
        $q=$db->prepare('SELECT * FROM messagerie WHERE to_id = ? AND archives = "0" ORDER BY timstamp DESC');
        $q->execute(array($_SESSION['id']));
        while($m = $q->fetch()){
            $nb = $q->rowCount();
            if($nb > 0) {
        ?>
	<div class="messagesCont">
	    <div class="messCol1"><?php if($m['lu'] != 0){ ?><img src="view/img/lu2.png" alt="lu2.png"/><?php }else {?><img src="view/img/lu.png" alt="lu.png"/><?php } ?></div>
	    <div class="messCol2"><?php echo htmlentities($m['from_name']); ?></div>
	    <div class="messCol3"><span class="link"><a href="readmessage.php?id=<?php echo htmlentities($m['id']); ?>"><?php echo htmlentities($m['sujet']); ?></a></span></div>
	    <div class="messCol4"><?php echo htmlentities(date('d/m/Y', $m['timstamp'])); ?></div>
	    <div class="messCol5"><input type="checkbox" name="list[]" value="<?php echo htmlentities($m['id']); ?>" /></div>
	</div>
	<?php } } 
                if($nb == 0) { echo '<div class="messCol6">Auncun message</div>'; } else {?>
		<div class="mess">
                    <input type="submit" id="supprimer" onsubmit="button1(<?php echo htmlentities($m['id']); ?>);" class="bt_mess" value="Supprimer" />
	            <input type="submit" id="archiver" onsubmit="button2(<?php echo htmlentities($m['id']); ?>);" class="bt_mess" value="Archiver" />
                </div>
	<?php } ?>
</form>
<script src="includes/ajax/traitemessages.js"></script>

Il ne devrait pas y avoir de rechargement mais pourtant il y en a... aller comprendre pourquoi. De plus, il n'archive pas ni ne supprime les messages alors que les script php de traitement eux, tous seuls, fonctionnent parfaitement et exécute bien les update et delete derrière.

J'ai tenter de remplacer submit par onclick mais il me dit que button2 not defined et en développant il me dit : onclick.

Pourtant à la fin du code html, j'appelle bien le fichier traitemessages.js ou y a mes deux fonctions... et le chemin est bon je l'ai déjà vérifier...

Je ne sais plus comment faire là après avoir tenté mainte et maintes variantes je sais plus comment obtenir une réponse fonctionnelle sans chargement de page.

Merci d'avance pour vos lumières

**Darkaurora** · 09/03/2015, 13h58

Pour le rechargement de ta page c'est tout à fait normale. Tu fait un location.reload() qui a pour but de recharger la page. Pour ce qui est de la suppression ou de l'archivage, je ne vois pas ou est le problème si tes requêtes s’exécutent correctement.

**stefde3** · 09/03/2015, 15h52

oui en fait je voulais faire un rechargement juste de la page mais sans qu'on vois le rechargement si je m'exprime bien ^^
j'ai fais un test de mes requêtes sans JS et sur le submit, tout est ok, ça valide bien les scripts PHP et la BDD est bien modifiée, mais avec le jquery... rien ne se passe et pourtant les liens sont bons (en tout cas rien au niveau de ma console)

Sinon comment faire un rechargement de page une fois que c'est validé ?

Si tu remarques bien aussi mon reload() doit se faire au bout de 4 secondes quand le message de validation ou d'error s'efface et non au moment de la validation (click sur le submit) comme c'est le cas ici.

**Golgotha** · 09/03/2015, 15h59

Je pige pas l'intérêt de faire de l'ajax , à moiter.

**stefde3** · 09/03/2015, 16h10

bah je suis pas un pro de l'ajax moi ^^ j'apprends et tout ce qu'on trouve sur le net c'est du jquery avec des fonctions ajax dedans dans la plupart des cas ^^

**ABCIWEB** · 09/03/2015, 16h20

Rien ne se passe mais à quel niveau ? La requête est-elle envoyée ?

Mets des "console.log('ok')" à différents endroits de ton code javascript pour vérifier le cheminement du script.

Sinon tu ne devrais pas utiliser htmlentities car cette fonction n'est pas compatible utf-8 par défaut et il faut spécifier le paramètre d'encodage. Utilises plutôt htmlspecialchars() car c'est suffisant et cette fonction est compatible utf-8 sans avoir besoin de spécifier l'encodage.

**stefde3** · 09/03/2015, 16h43

Euh..... rien à voir ^^

le htmlspecialchars() sert aux caractères spéciaux de la BDD alors que htmlentities() sécurise les données récupérées de la BDD ^^

Mais bon oui je vais mettre des console.log() un peu partout pour voir comment se déroule le script.

Merci du conseil.

[edit 16h57] Bon bah ça n'a pas le temps de me retourner quoi que se soit puisque la page se recharge et que rien ne s'affiche sauf une erreur que j'arrive à voir comme quoi onclick="button2() is not defined...

**Golgotha** · 09/03/2015, 17h13

Bah le principe même de l'ajax c'est de ne pas recharger la page.

Donc là le pattern va être du type :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
("#id_bouton_supprime").click(
	$.ajax( 
	// appel à la page php en ajax pour supprimer l'enregistrement
		)
	.done(
	 // supprimer l'élément dans la page.
		)
	 .fail(
	 // message d'erreur.
	 	);
 
 
("#id_bouton_archive").click(
	$.ajax( 
	// appel à la page php en ajax pour archiver l'enregistrement
		)
	.done(
	 // supprimer l'élément dans la page.
		)
	 .fail(
	 // message d'erreur.
);

**stefde3** · 09/03/2015, 17h28

houlà ça devient complexe pour moi là ^^ si tu regardes dans mon profil à la base je suis webdesigner ^^ par la force des choses je me suis mis à la programmation mais là j'ai jamais vu cette forme d'écriture.

j'ai déjà effectué une requête de traitement de formulaire à un seul submit qui fonctionne très bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
$(document).ready(function(){
 
// Traitement formulaires
 
	$('form').submit (function(e) {
		$(".loading").hide();	
		$.ajax({
			url: $(this).attr('action'),
			type: $(this).attr('method'),
			data: $(this).serialize(),
			dataType: 'json',
 
			beforeSend: function(){
			$('#submit').attr("value", "Traitement en cours...");
			$(".loading").show();
			},
 
			success:function(data){
				$(".loading").hide();
				if(data.message){
				$('.infos').addClass(data.success).html(data.message).fadeIn(600);
				setTimeout(function(){
					$('.infos').fadeOut(600);
					location.reload();
				}, 4000);
				$('#submit').attr("value", "Valider");
				$(':input[type=text]','form').val('');
				}
			}
		});
		return false;
	});
});

mais celui-ci étant différent, j'ai du passer par des fonctions à la place mais le principe est le même et je ne comprends pas pourquoi ça fonctionne pas...

[EDIT 17H44]

Bon je viens d'essayer avec ta méthode maintenant le soucis est qu'il ne récupère pas les data ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$('#archiver').click(function(){
		$('.loading').hide();
		$.ajax({
			type:"POST",
			url:"includes/functions/archiver.php",
			data:$(this).serialize(),
 
			beforeSend: function(){
				$('.loading').show();
				$('#archiver').attr('value', "Traitement...");
				console.log('ok');
			},
 
			success:function(data){
				$('.loading').hide();
				$('#archiver').attr('value', "Archiver");
				if(data.message){
					$('.infos').addClass(data.success).html(data.message).fadeIn(600);
					setTimeout(function(){
						$('.infos').fadeOut(600);
					}, 4000);
				}
			}
		});
		return false;
	});

Je sais pas trop comment les récupérer.

J'ai aussi modifié mon html en mettant ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<input type="submit" id="supprimer" class="bt_mess" value="Supprimer" />
<input type="submit" id="archiver" class="bt_mess" value="Archiver" /></div>

je pensais qu'en les mettant en type="submit" il allait récupérer les données mais non... n'ayant plus ma variable dans la requête je vois pas comment les récupérer à présent

**Golgotha** · 09/03/2015, 18h05

Effectivement,

il y a plusieurs manière de faire, en voici deux :

Première méthode, en mode "je_met_tout_dans_l'id" : <input type="submit" id="supprimer_1" class="bt_mess" value="Supprimer" />
et dans ce cas là tu peux récupérer ton id de cette façon : $(this).attr('id').split('_')[1]

Deuxième méthode, peut être plus propre :

tu utilise une balise data : <input type="submit" id="supprimer" data-id="1" class="bt_mess" value="Supprimer" />
et là tu retrouvera ton id de cette façon : $(this).data("id")

Voilà

**stefde3** · 09/03/2015, 18h09

Bon j'ai réussi à avoir le traitement déjà avec ce qui se passe et ce qu'il retourne. Voici dans la console ce qu'il y a :

Request URL:http://monsite/includes/functions/archiver.php
Request Method

OST
Status Code:200 OK
--------------------------------------------------------------------------------------------------
Response Headers
view source
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html
Date:Mon, 09 Mar 2015 17:02:06 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Pragma:no-cache
Server:o2switch PowerBoost Server v2.6.000 - Build 211120141025
Set-Cookie:_mcnc=1; Max-Age=2; Path=/
Transfer-Encoding:chunked
Vary:Accept-Encoding
X-Microcachable:0
X-Powered-By

HP/5.4.37
-------------------------------------------------------------------------------------------------
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Content-Length:12
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie

HPSESSID=caché
Host:diarypeople.fr
Origin:http://monsite.fr
Referer:http://monsite/messagerie.php
User-Agent:Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.74 Safari/537.36
X-Requested-With:XMLHttpRequest
----------------------------------------------------------------------------------------------------
Form Data
view source
view URL encoded
list[]:5

donc déjà tout est ok il y a accès et il récupère bien la valeur (list[]:5)... mais j'ai plus de loading qui se fait avec rafraissement de la page (enfin le message archivé ou supprimé reste dans la boite de réception)

voici mon dernier code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$('#archiver').click(function(){
		$('.loading').hide();
		$.ajax({
			type:"POST",
			url:"includes/functions/archiver.php",
			data:$('#messager').serialize(),
 
			beforeSend: function(){
				$('.loading').show();
				$('#archiver').attr('value', "Traitement...");
			},
 
			success:function(data){
				$('.loading').hide();
				$('#archiver').attr('value', "Archiver");
				if(data.message){
					$('.infos').addClass(data.success).html(data.message).fadeIn(600);
					setTimeout(function(){
						$('.infos').fadeOut(600);
					}, 4000);
				console.log('ok');
				}
			}
		});
		return false;
	});

dans le data là je récupère l'id du formulaire #messager et je sérialize le contenu du form.

et j'ai bien le message dans la preview de la console :

message: "Le(s) message(s) sélectionné(s) ont été archivé(s)."
success: "agree2"

met il ne s'affiche pas sur le site

**jquery18** · 09/03/2015, 18h23

Salut, je suis débutant en jquery, je voulais savoir comment utiliser les classe et les attribut deja prédéfinis dans le fichier jquery dans le site officiel c'est a dire est c qu'il faut les connaitre ou est ce qu ils se trouvent dans le site ... ? Merci

**stefde3** · 09/03/2015, 18h27

ça aurait été bien que tu créés ton propre message plutôt que de polluer le mien

**jquery18** · 09/03/2015, 18h33

je m'excuse :s je suis nouveau, c'est la premiere fois que je m'inscris dans un forum

**stefde3** · 09/03/2015, 18h49

je comprends mais quand on s'inscris sur un forum le truc est de créer son propre sujet sinon ça devient vite l'anarchie

**ABCIWEB** · 09/03/2015, 19h25

Si tu as des info qui passent dans le "success", dans un premier temps enlève les fade et setTimeout pour voir.
Sinon regarde dans le fichier de destination "includes/functions/archiver.php" et fait exécuter ce script séparément pour voir s'il retourne les valeurs attendues.

Pour le reste quand je te dis de remplacer htmlentities par htmlspecialchars pour afficher tes variables php, tu peux me faire confiance.
Ou si pour une raison obscure tu tiens absolument à garder ton htmlentities - bien que htmlspecialchars sécurise aussi bien l'affichage de tes données - je te dis simplement qu'il faut indiquer l'encodage sinon dans certains cas tu auras des problèmes.
Avec htmlentities et utf-8, il faudrait écrire echo htmlentities($str, ENT_COMPAT, "UTF-8");. C'est pénible et comme htmlspecialchars est suffisant et qu'avec htmlspecialchars on a pas besoin de spécifier le charset utf-8... -> tu ne trouveras quasiment plus d'exemples d'utilisation de htmlentities dans des scripts modernes.

**stefde3** · 09/03/2015, 19h46

j'ai trouvé ce qui n'allait pas ^^

j'ai oublié simplement de rajouter le dataType: 'json', ^^ puisque je l'encode ainsi dans le traitement php.

Ensuite je n'ai aucun soucis d'encodage lors de l'affichage car ma BDD est en INNODB et en UTF-8 general_Ci et donc j'ai toujours les accents qui s'affichent sans problème. donc hors mis sécuriser mes requêtes de BDD je n'ai aucun besoin d'utiliser htmlspecialchars ou d'ajouter des code d'encodage dans mon htmlentities.

Si tu préfères moi dans ma BDD j'ai ça d'inscrit :

exemple de text avec des accents : il est un peu illuminé mais il va être très sage

c'est inscrit tel quel dans ma BDD et je n'ai à aucun moment de @Ã pour remplacer les "é".

Merci à tous en tous les cas pour votre aide

Résolu.

**ABCIWEB** · 09/03/2015, 21h29

Envoyé par stefde3

je n'ai aucun besoin d'ajouter des code d'encodage dans mon htmlentities.

Effectivement je viens de re consulter la doc et depuis php 5.4, htmlentities est en utf-8 par défaut (alors qu'avant 5.4 c'était iso). Pour protéger l'affichage des données php cela n'apporte rien de plus que htmlspecialchars mais au moins ça ne bugue plus. Tu es passé entre les gouttes

Messagerie envoi en jQuery avec fonction ajax en traitement

jQuery

Discussions similaires

Partager

Partager