Fonction Ajax sur clique qui s'exécute plusieurs fois [Résolu]

[arthuro45]

Bonjour,

Je n'arrive pas à comprendre pourquoi cette fonction "insertionCde" s'exécute une ou plusieurs fois sur un clique de bouton de façon aléatoire.

Je m'explique:
Parfois la fonction insère bien une seule commande, et à partir de 3 articles (ou plus) la probabilité d'avoir plusieurs fois la même commande augmente et je me retrouve avec 2 ou 3 fois la même commande.

Le clique peut-il se jouer 2 fois ? (à mon insu )

Voici ce qui est chargé dans le DOM :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("document").ready(function()  {
 
affMasqBtn(); // Affiche ou masque le bouton "Valider la commande" au chargement de la page.
 
$("#validerCde").click(function() {
  insertionCde(); // Insertion commande.
});
 
annulerCde(); // Annulation d'une commande au clique sur l'icone Annuler (croix rouge).
 
visuCde();
 
$('.input_cmd').keyup(function() {
   affMasqBtn(); // Si une donnée est saisie dans quantité on affiche le bouton "Valider la commande".
})
 
controleQte();
 
});

La fonction qui insère les commandes :

Code :

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
function insertionCde(){
        var date = $("#date").val();
        var commentaire = $("#commentaire").val();
            if(date!="") {
                if(confirm("Veuillez confirmer la création de la commande")) {
                    var str = $(".input_cmd").serialize(); // serialize les données.                     
                    $.ajax({
                        type: "GET",
                        url: "nouvelle_commande.php", // Insertion de la commande
                        data: { refqte:str,d:date,c:commentaire },
                        success: function(data){
                            if(data!="")
                            {
                                chargerData(); // Rechargement de la page avec un submit.
                            }
                            else
                            {
                                $('#cdeOk').html("une erreur est survenue !");
                            }
                        }
                    });
                } 
                else {
                                return false;
                }
            }
            else {
                alert("Veuillez saisir une date de livraison");
                $( "#date" ).datepicker( "show" ); // On affiche le calendrier.
            }
}

[SpaceFrog]

Code :

$("#validerCde")

c'est un bouton de formulaire ?

[arthuro45]

c'est un bouton de formulaire ?

Oui.
type="button"

[SpaceFrog]

et chargerData(); fait quoi ?

[arthuro45]

et chargerData(); fait quoi ?

Juste recharger la page comme avec F5.

Code :

$("form").submit();

[SpaceFrog]

et l'action du form c'est quoi ?

[nadox]

Bonjour,
Je suis peut-être un peu hors-sujet, mais quel est l'intérêt d'enregistrer les données avec un requête ajax si à chaque appel on envoie le formulaire ?
Ne suffirait-il pas d'enregistrer les données sur le serveur avant rechargement ?

[SpaceFrog]

d'ou la question de savoir ce qu'il y a dans l'action du form...

si le form pointe sur la même page il y a de fortes chances pour que ça boucle ...

[arthuro45]

et l'action du form c'est quoi ?

Code :

<form name="form" id="form" action="<?php echo $self; ?>" method="POST">

J'ai testé la page sans form, donc elle ne se recharge pas, mais le bug est toujours présent.

[arthuro45]

Ne suffirait-il pas d'enregistrer les données sur le serveur avant rechargement ?

Si effectivement, mais n'ayant pas encore réussi à mettre une partie de ma page à jour avec ajax, j'ai opté pour un vulgaire rechargement, moins propre.

[SpaceFrog]

ben fait soit l'un soit l'autre, mais pas les deux ...

[nadox]

Ok ! Le but final est tout de même de ne pas recharger la page entièrement !
Je tiens alors à vous présenter mes excuses à tout les deux !
J'avais mal compris la question de SpaceFrog et l'utilisation du submit.
Je pensais du coup que le submit aurait pu suffire, sans utiliser d'ajax...

[SpaceFrog]

Non nadox tu as tout a fait raison ...

il peut soit mettre ses tables à jour au moyen d'ajax et mettre la page a jour sur le onsuccess

ou

soumettre le form avec rechargement complet de la page sans ajax.

Honêtement je ne vois l'nteret de faire un mix des deux si ce n'est de mettre deux fois plus de temps ???

[arthuro45]

ben fait soit l'un soit l'autre, mais pas les deux ...

Le rechargement n'est pas en cause.
Le rechargement ne relance pas l'insertion des données puisque sans celui-ci, j'ai quand même le doublement ou le triplement des commandes.

Je reconnais que c'est "Shadoks" de se servir du rechargement et de l'ajax dans la même page.

[arthuro45]

Honêtement je ne vois l'nteret de faire un mix des deux si ce n'est de mettre deux fois plus de temps ???

Je suis d'accord, mais je n'ai pas encore réussi à mettre la page a jour sur le onsuccess.

[nadox]

Oui oui si je comprends bien (cette fois-ci) le rechargement avec un submit n'est qu'une façon d'éviter de faire F5 pour la mise au point

Le problème vient donc du JS ou du PHP(voire SQL...). Le paramètre refqte est-il vraiment en cause(donc erreur coté serveur) ?

Je ne sais pas quels outils tu utilise pour la mise au point, mais il faudrait savoir si la requête est unique ou non (je vérifie ça avec l'onglet réseau de firebug)

[SpaceFrog]

alors le souci est coté serveur ...

le bouton submit envoie les données au serveur sur une page qui insère les données

sur le retour la page du form est rechargée et renvoyant les données maios qui apparemment ne sont pas réinsérées dans la table ?

Si c'est le cas le bug est au niveau de l'insertion coté serveur donc
rien a voir avec js

[nadox]

Le bug existe sans le rechargement du formulaire, de plus l'action du formulaire n'est pas "nouvelle_commande.php", aucun risque que le post enregistre sur le serveur !
Donc le rechargement n'est véritablement pas en cause.

Par contre, le seul moyen de s'assurer que le javascript n'est pas en cause est de vérifier si plusieurs requêtes ne sont pas envoyées au moment du click. J'ai proposé firebug qui permet de vérifier côté client, mais on peut aussi afficher les logs coté serveur (en écrivant une ligne de debug pour chaque requete)

Si il n'y a bien qu'une seule et unique requête, alors le bug se situe sûrement du côté serveur (ce qui expliquerait le lien avec la quantité puisque c'est un des paramètre envoyés...)

[arthuro45]

Le bug existe sans le rechargement du formulaire

Oui.

le bouton submit envoie les données au serveur sur une page qui insère les données

Je n'ai pas de bouton submit.

[SpaceFrog]

rajoute par sécurité

Code :

1
2
3
4
$("#validerCde").click(function() {
  $(this).attr('disabled','disabled')
  insertionCde(); // Insertion commande.
});

au moins ça ne viendra pas de clicks multiples