[Résolu] Ajax ne fonctionne pas

Bonsoir,
J'ai le code js suivant :

function choix_etat(val) {
	var retour = $.ajax({
		url: "suite.php",
		method: "POST",
		data: "choix=" + val,
		dataType: "html"
	});
	retour.done(function (datas) {
		alert(datas);
		$("#choix_affichage").html(datas);
	});
	retour.fail(function () {
		alert("retour erreur");
	});
};

Dans le php 'suite.php' il y a :

		global $datas;	
if (lstRubrique()) {
				$retour = '<fieldset class="fieldset-color"><legend class="fieldset-color-legend">Sélectionner</legend>
				<div class="col-xs-offset-1 col-xs-4"><div class="input-group input-group-sm"><label class="control-label" for="rubrique">Une rubrique</label><br>
				<select name="rubrique" id="rubrique" class="form-control" onChange="traitRefs(this.value);">' . $datas['option_rubrique'] . '</select></div></div></fieldset>';
			} else {
				$retour = '<p>Erreur</p>';
			}
echo $retour;
exit();

L'appel au js et le retour se fait dans le php suivant :

<label><input type="radio" name="bouton" id="boutonradio1" value="etat1" onclick="choix_etat(this.value);"> Entrée/sortie d\'un article</label>
<div id="choix_affichage"></div>

J'ai bien un retour de la fonction ajax avec la commande alert(datas) mais c'est un pup-up vide qui s'affiche. Je ne vois pas où se trouve mon erreur.
Merci pour votre aide.

Salut,

C'est facile ¹

html

<div class="grid-container margin-vertical-3">
    <form id="myForm" action="./suite.php" method="post">
        <div class="input text">
            <label>
                <span>nom</span>
                <input type="text" name="name">
            </label>
        </div>
        <div class="grid-x grid-padding-x">
            <fieldset class="large-5 cell">
                <legend>Couleur favorite</legend>
                <input type="radio" name="choice" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
                <input type="radio" name="choice" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
                <input type="radio" name="choice" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
            </fieldset>
        </div>
        <div class="input submit">
            <button class="button">envoyer</button>
        </div>
    </form>
    <div id="result"></div>
</div>

php

<?php
    if(!empty($_POST)){
        echo json_encode([
            'response' => $_POST['choice']
        ]);
        die;
    }
?>

js

$(function(){
    let pathname = window.location.pathname,
        baseUrl = /php$/.test(pathname)? pathname.substring(0, pathname.lastIndexOf('/')) : pathname
    $('#myForm :radio').each(function(i){
        $(this).on('change', function(e){
            $.ajax({
                url: `${baseUrl}/suite.php`,
                method: 'POST',
                data: `choice=${e.target.value}`,
                dataType: 'json',
            }).done(function(d){
                $('#result').html(d['response'])
            }).fail(function(err){
                console.error(err);
            })
        })
    })
})

¹ code fait rapidement (pour le moment, je ne vois pas l'intérêt de faire une requête serveur pour ça)
Modifié par niuxe (12 Oct 2023 - 11:56)

Bonjour Niuxe,
Merci pour ton aide. J'ai trouvé d'où venait mon problème. Un teste sur une mauvaise variable dans suite.php retournait un contenu vide au js.
Bon week-end