Salut à tous

J'ai une code php qui affiche un form puis le traitement de ce formulaire se fait en AJAX. voici mon code :

Le HTML :

<form name="form-question" method="post" action="validate_question.php" id="form_question">
                        <div>
                            <h1 class="mt-1 mb-4 text-center"><?= $data['question']; ?></h1>
                        </div>
                        <div id="loose" style="display: none;">
                            <?php include 'templates/not_correct.php';  ?>
                        </div>
                        <div>
                            <?php foreach ($data['propositions'] as $key => $proposition): ?>
                                <div class="option">
                                    <input type="radio" id="<?= $key; ?>" name="option" value="<?= $key; ?>" >
                                    <label for="<?= $key; ?>"><?= $proposition; ?></label>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="bottom-button" id="validateButtonWrapper">
                            <input type="hidden" name="code_step" value="<?= $code_step; ?>" />
                            <input type="hidden" name="id_team" value="<?= $check_password['id']; ?>" />
                            <input type="submit" id="validateButton" class="btn btn-primary" value="Valider" />
                        </div>
                    </form>


<div id="win" style="display: none;">
    <?php include 'templates/correct.php';  ?>
</div>

<div id="already_answered" style="display: none;">
    <?php include 'templates/already_answered.php';  ?>
</div>

Puis voici le code PHP de traitement :

<?php
header('Content-Type: application/json');
require_once __DIR__ . '/vendor/autoload.php';
use Dotenv\Dotenv;
$dotenvPath = __DIR__;
$dotenv = Dotenv::createImmutable($dotenvPath);
$dotenv->load();

require_once 'config.php';
require_once 'functions.php';

$response_data = array();

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['option'])) {
    // get response of question 
    $response = isset($_POST['option']) ? $_POST['option'] : NULL;
    $code_step = $_POST['code_step'];
    $id_team = $_POST['id_team'];
    $id_step = get_id_step_by_code($db, $code_step);
    $already_answered = check_step_team($db, $id_team, $id_step['id']);

    if (NULL !== $response) {
        if (!$already_answered) {
            // check if response correct
            $result = get_answer_by_step($db, $code_step, $response);            
            if ($result['is_answer_correct']) { 
                $response_data['success'] = true;
                $response_data['message'] = 'Réponse correcte';
                $response_data['correct_answer'] = $result['correct_answer'];
                record_step_for_team($id_team, $code_step, $db);
            } else {
                $response_data['success'] = false;
                $response_data['message'] = 'Réponse incorrecte';
                $response_data['correct_answer'] = $result['correct_answer'];
                record_step_for_team($id_team, $code_step, $db, false);
            }
        } else {
            $response_data['success'] = false;
            $response_data['message'] = 'Cette question a déjà été répondue.';
        }
    } else {
        $response_data['success'] = false;
        $response_data['message'] = 'Aucune réponse reçue.';
    }
} else {
    exit();
}

echo json_encode($response_data);
?>

Je précise que j'ai déplacé le "header()" en haut car j'avais la fameuse erreur "Cannot modify header information - headers already sent ...".
Depuis que je l'ai déplacé, je n'ai plus l'erreur MAIS lorsque j'envoie le form depuis Chrome uniquement sur mobile, il me renvoie la réponse en json au lieu de me montrer les templates souhaités que j'ai dans mon code ci dessus.

Cela fonctionne bien sur d'autres nav et fonctionne bien sur Desktop. Je ne sais pas si tout cela a du sens mais j'aimerai trouvé un moyen de renvoyer proprement ma réponse pour afficher ensuite mes templates quelque soit le contexte.

Merci de votre aide.
La partie JS :

$('#form_question').submit(function(e){
        e.preventDefault(); 
        console.log('envoi du formulaire');

        var formData = $(this).serialize();

        $.ajax({
            type: 'POST',
            url: 'validate_question.php',
            data: formData,
            success: function(response){
                var correctLabel = $('label[for="' + response.correct_answer + '"]');
                correctLabel.addClass('correct-answer');
                if (response.message == 'Réponse correcte') {
                    $('#form_question').hide();
                    $('#win').show();
                }
                if (response.message == 'Réponse incorrecte') {
                    $('#loose').show();
                }
                if (response.message == 'Cette question a déjà été répondue.') {
                    $('#form_question').hide();
                    $('#already_answered').show();
                }
            },
            error: function(xhr, status, error){
                console.error(xhr.responseText);
                console.log('truc');
            }
        });
    });

Voici ce que cela rend sur chrome :

-
Edité par zazzou 24 mars 2024 à 22:48:34

Salut

histoire de comprendre pourquoi tu avais des erreurs , le header already send vient du fait que tu avais du contenu envoyé (ton html, tout texte que tu aurais pu afficher...) avant l'appel à ta fonction header.

ligne 5 de ton traitement php inutile (tu n'utilises la variable nulle part ailleurs de ce que je vois) autant passer directement ton "__DIR__" à la fonction create de dotenv.

conseil personnel utilise des chemins absolus pour tes requires

Si cette condition ci "$_SERVER['REQUEST_METHOD'] === 'POST'&& isset($_POST['option'])" n'est pas valide alors tu ne renvois 0 json malgré ton en-tête le spécifiant , dans ton else essaie de placer un retour d'erreur au lieu de ton exit. D'ailleurs pour ton retour ligne 49 placer un die(json_encode(...)); au lieu de ton echo pour éviter toute sortie derrière

Ta ternaire ligne 16 ne sert à rien vu que tu vérifie l'existence de ton post option sur le if.

Ligne 17 et 18 , comment tu peux être sûr que ces valeurs $_POST existent ? 

Plus bas je ne saisi pas vraiment ton soucis , que veux tu dire par il me renvoi la réponse en json au lieu de m'afficher les templates ? Tu attend une réponse json donc si tu te rends sur le lien de traitement via ton url tu auras ton json récupéré normalement par ajax d'affiché , c'est normal .

Bonjour,

Merci j'ai fait quelques modifications en ce sens.

Concernant mon soucis : lorsque je réponds au form et que validate question renvoie le json alors mon traitement en javascript affiche quelque chose en faisant un $('#loose').show(); par exemple.

Or lorsque je suis sur Chrome et uniquement en mobile, j'ai un affichage du Json brute comme le montre mon image dans mon premier message.

Je ne sais pas si mon problème est plus clair ?

-
Edité par zazzou 25 mars 2024 à 18:30:42

C'est justement parce que tu ne fais qu'afficher les champs cachés à la base que ton problème est étrange.

Vu la manière qu'a chrome d'afficher ta réponse (impression élégante) c'est que ta page ne contient que du json rien d'autre c'est bien ça ? l'impression que tu es redirigé .

Essaie de poster l'url avant puis après validation ainsi que le html de ton inspecteur après validation.

Par url j'entends juste ce qu'il y a après ton nom domaine .  

Update 2 :

En reprenant ton code, je n'arrive pas à reproduire le bug indiqué (tout semble fonctionner). Peux-tu reposter les modifications de code que tu as apportées, et réexpliquer le nouveau problème stp ?

Update :

Pardon, "type" existe bien et il s'agit d'un alias à "method" (ça fait un bail que je n'utilise plus jQuery purée). Du coup je continue à chercher une potentielle raison à ton code et j'update mon message si je trouve.

-----------------

Hello,

La propriété pour définir le verbe HTTP dans $.ajax() s'appelle method et non type

$.ajax({
   method: 'POST', // ✅
   …
})

Essaie et tiens-nous au courant, mais cela devrait résoudre ton soucis puisque ton formulaire était bel et bien envoyé en GET (et non en POST), donc le traitement côté PHP ne passait pas dans la condition principale et devait renvoyer un objet vide

-
Edité par ninjavascript 26 mars 2024 à 13:53:15