11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai un souci avec mon code lors d'envoi d'un formulaire (traitement Ajax et PHP).
Je ne comprend pas d’où vient le problème car j'ai fait le même test ça a marché au début et subitement un problème survient après.
En effet, j'ai un formulaire avec 2 champs que je valide en ajax et php. Ma requête échoue lors de l'envoie (Statut = Aborted) sans même appeler le fichier php.

J'utilise firefox comme navigateur, il ne m'affiche aucune erreur. Sur chrome c'est pareil. Par contre sur internet explorer, j'ai ce message : (SCRIPT7002: XMLHttpRequest: Erreur réseau 0x2ef3, Impossible d'effectuer l'opération à cause de l'erreur suivante 00002ef3.).

Je ne comprend pas l'origine de ce problème.

Toute aide est la bienvenue. Merci par avance !

Ci-dessous le code du formulaire et traitements :


// Formulaire
<form method="post" action="action.php" id="myform">
      <input type="text" name="titre" id="titre">
      <textarea name="description" id="description" rows="5" cols="50"></textarea>
  
      <input type="submit" name="valider_q" value="Valider" class="btn_valider">
      <input type="hidden" name="id_valid">
</form>
 
// jQuery - Ajax
$(document).ready(function() {
    $('#myform').on('submit', function(e) {
        e.preventDefault();
  
        var $this = $(this); // l'objet jquery du formulaire
  
        // Je récupère les valeurs
        var titre = $('#titre').val();
        var description = $('#description').val();
  
        // Je vérifie une première fois pour ne pas lancer la requête HTTP
        // si je sais que mon PHP renverra une erreur
        if(titre === '' || description === '') {
            document.write('Les champs doivent être remplis.');
        } else {
            $.ajax({
                url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
                type: $this.attr('method'), // La méthode indiquée dans le formulaire (get ou post)
                data: $this.serialize(),
                beforeSend: function() { // traitements JS à faire AVANT l'envoi
                    $this.after('<img src="inc/img/loader.gif" alt="loading" id="load1">'); 
                    // ajout d'un loader pour signifier l'action
                },
                success: function(data){
                    $('#status').html(data).delay(10000).hide(200);
                }
            });
        }
});
 
// PHP
require_once('db.php'); // connexion à la BD
  
if (isset($_POST['id_valid'])) { // si le formulaire est valide
   if (isset($_POST['titre']) && isset($_POST['description'])) { // champs saisis
        $titre = $_POST['titre'])));
        $description = $_POST['description'];
  
        $q = array('titre'=>$titre, 'description'=>$description);
        $sql = "INSERT INTO question (question_titre, question_description, question_date) 
        VALUES  (:titre, :description, now())";
        $req = $db->prepare($sql);
        $req->execute($q) or die(print_r($db->errorInfo()));
        $data = $req;
  
        echo '<p class="success">Message envoyé !</p>';
    } else {
        echo 'Champs non valides';
    }
}
dinolam a écrit :
Bonjour à tous,
J'ai un souci avec mon code lors d'envoi d'un formulaire (traitement Ajax et PHP).
Je ne comprend pas d’où vient le problème car j'ai fait le même test ça a marché au début et subitement un problème survient après.
En effet, j'ai un formulaire avec 2 champs que je valide en ajax et php. Ma requête échoue lors de l'envoie (Statut = Aborted) sans même appeler le fichier php.
J'utilise firefox comme navigateur, il ne m'affiche aucune erreur. Sur chrome c'est pareil. Par contre sur internet explorer, j'ai ce message : (SCRIPT7002: XMLHttpRequest: Erreur réseau 0x2ef3, Impossible d'effectuer l'opération à cause de l'erreur suivante 00002ef3.).
Je ne comprend pas l'origine de ce problème.
Toute aide est la bienvenue. Merci par avance !
Ci-dessous le code du formulaire et traitements :

// Formulaire
&lt;form method="post" action="action.php" id="myform"&gt;
      &lt;input type="text" name="titre" id="titre"&gt;
      &lt;textarea name="description" id="description" rows="5" cols="50"&gt;&lt;/textarea&gt;
  
      &lt;input type="submit" name="valider_q" value="Valider" class="btn_valider"&gt;
      &lt;input type="hidden" name="id_valid"&gt;
&lt;/form&gt;
 
// jQuery - Ajax
$(document).ready(function() {
    $('#myform').on('submit', function(e) {
        e.preventDefault();
  
        var $this = $(this); // l'objet jquery du formulaire
  
        // Je récupère les valeurs
        var titre = $('#titre').val();
        var description = $('#description').val();
  
        // Je vérifie une première fois pour ne pas lancer la requête HTTP
        // si je sais que mon PHP renverra une erreur
        if(titre === '' || description === '') {
            document.write('Les champs doivent être remplis.');
        } else {
            $.ajax({
                url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
                type: $this.attr('method'), // La méthode indiquée dans le formulaire (get ou post)
                data: $this.serialize(),
                beforeSend: function() { // traitements JS à faire AVANT l'envoi
                    $this.after('&lt;img src="inc/img/loader.gif" alt="loading" id="load1"&gt;'); 
                    // ajout d'un loader pour signifier l'action
                },
                success: function(data){
                    $('#status').html(data).delay(10000).hide(200);
                }
            });
        }
});
 
// PHP
require_once('db.php'); // connexion à la BD
  
if (isset($_POST['id_valid'])) { // si le formulaire est valide
   if (isset($_POST['titre']) &amp;&amp; isset($_POST['description'])) { // champs saisis
        $titre = $_POST['titre'])));
        $description = $_POST['description'];
  
        $q = array('titre'=&gt;$titre, 'description'=&gt;$description);
        $sql = "INSERT INTO question (question_titre, question_description, question_date) 
        VALUES  (:titre, :description, now())";
        $req = $db-&gt;prepare($sql);
        $req-&gt;execute($q) or die(print_r($db-&gt;errorInfo()));
        $data = $req;
  
        echo '&lt;p class="success"&gt;Message envoyé !&lt;/p&gt;';
    } else {
        echo 'Champs non valides';
    }
}

Je ne suis pas un pro Ajax / JQuery mais en faisant un recherche sur Google avec les mots clés "Error 00002ef3" il semble que cette erreur soit bien connue des forums et qu'il existe plusieurs façons de la contourner suivant les contextes.
Trop long pour être résumé ici... y a plus qu'à lancer la même recherche et faire le tri.
Salut sepecat,

Avant de poster mon message, j'ai fait le tour de tous les forums mais malheureusement je n'ai pas trouvé de solution résolvant mon problème. Il y a plusieurs façons, comme tu le disais de contourner ce problème, ce qui veut dire que chaque cas est spécifique selon le sujet.

En essayant tous les cas, je ne trouve pas de solution à mon problème.

Cdlt,
dinolam a écrit :
Salut sepecat,

Avant de poster mon message, j'ai fait le tour de tous les forums mais malheureusement je n'ai pas trouvé de solution résolvant mon problème. Il y a plusieurs façons, comme tu le disais de contourner ce problème, ce qui veut dire que chaque cas est spécifique selon le sujet.

En essayant tous les cas, je ne trouve pas de solution à mon problème.

Cdlt,

A priori, après avoir lu en diagonale deux ou trois réponses sur les forums, il semble que ce soit la plupart du temps lié à un problème de paramètres de la requête Ajax et/ou de dépassement de délai.
Si j'avais ce genre de dysfonctionnement sous Java, la première approche serait d'isoler ladite requête dans un petit bout de code test, histoire de pouvoir surveiller avec les outils du navigateur comment se comporte l'échange au niveau réseau (headers HTTP effectivement envoyés / reçus, temps, etc.).
Ceci permet de ne pas être pollué par le reste de la page HTML. Si, lors du test, tout est OK sans rien changer au code initial, alors c'est une autre partie de la page HTML qui interfère avec la requête Ajax.
Fais notamment attention si ta requête est synchrone ou asynchrone... Je viens de me faire avoir dans l'un de mes développements avec ce genre de subtilité. La façon de réagir peut varier d'un navigateur à l'autre, même si l'utilisation de JQuery gomme, a priori, cet aspect.
Bref, découpe ton code en petits morceaux pouvant être testés séparément et essaies plusieurs combinaisons de paramètres sur la requête (indication du jeu de caractères ou non, indication d'un type mime ou non, etc.).