IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Question complémentaires par rapport au sujet PHP "Recharger page après exécution code"


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut Question complémentaires par rapport au sujet PHP "Recharger page après exécution code"
    Bonjour,
    Le sujet auquel je fais référence dans le titre est résolu sur le fond avec AJAX et grâce aux conseils de ABCIWEB.

    Toutefois, il me reste trois questions:
    1. Pourquoi mon code ne fonctionne pas sans arguments pour la méthode send() en mode post?
    2. ABCIWEB utilise un jeton qui m'intéresse pour protéger ma page AJAX mais je n'arrive pas à le faire fonctionner. Il s'affiche dans le champ 'token' (si le type est 'text') mais n'est pas transmis dans le $_POST. EDIT: J'ai trouvé, il fallait mettre ce jeton en argument du send() ce qui fait que ce point 2 rejoint le point 1 ci-dessus.
    3. Comment transmettre les variables au formulaire sans passer par un argument dans le exit()?


    Voici le code source (ctrl+U) de ma page formulaire:
    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
    34
    35
    36
    37
    38
    39
    <!DOCTYPE html>
    <html lang="fr">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     
    		<meta http-equiv="Expires" content="-1" />
    		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
     
    		<base href="http://racine.local" />
     
    		<link rel="stylesheet" media="all" type="text/css" href="../css/structure.css" />
    		<link rel="stylesheet" media="all" type="text/css" href="../css/screen.css" />
    		<link rel="stylesheet" media="print" type="text/css" href="../css/print.css" />
    	</head>
     
    	<body>
     
    <form method="post" name="tabForm">
    		<input type="hidden" id="id0" name="id" value="3011">
    	<input type="hidden" name="token" value="89e5da68bf3988022f92f40f7e56054ae5d4dd1a2a037167">
    <div class="formFlex">
    		<fieldset><legend>Activités répertoriées</legend>
    			<p class="note">
    				du texte.
    			</p>
    			<fieldset><legend>Zone d'édition&nbsp;: Sélection d'une activité</legend>
    				<label for="naf1">Section</label><select name='naf[1]' id='naf1' required='required'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select><br>
    				<label for="naf2">Division</label><select name='naf[2]' id='naf2'><option value='' label='&lt; ---- &gt;'></option></select><br>
    				<label for="naf3">Groupe</label><select name='naf[3]' id='naf3'><option value='' label='&lt; ---- &gt;'></option></select><br>
    				<label for="naf4">Activité</label><select name='naf[4]' id='naf4'><option value='' label='&lt; ---- &gt;'></option></select><br>
    			</fieldset>
     
    	</div>
    </form>
     
    <script type="module" src="../js/customerActivitiesHandler.js"></script>
     
    	</body>
    </html>
    Fichier "../js/customerActivitiesHandler.js
    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
    24
    25
    26
    27
    28
    29
    30
    const
    	nafs	= document.querySelectorAll("[id*='naf']")
    	,root	= window.location.origin
    	;
     
    console.log(nafs);
     
    function handleChange(lastList, idx) {
    	var xhr = new XMLHttpRequest()
    		;
     
    	xhr.onreadystatechange = function(){
    		if (xhr.readyState == 4 && xhr.status == 200){
    			console.log(xhr.responseText);
    			nafs[idx].innerHTML = xhr.responseText;
    		}
    	}
    	xhr.open('POST', root+'/frontend/customerActivityAjax.php', true);
    	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // necessary for postmode
    	xhr.send(lastList.name+'='+lastList.value);
    	//xhr.send(); // Ne fonctionne pas. Pourquoi?
    }
     
    if (nafs.length){
    	nafs.forEach(function(curNaf, index){
    		curNaf.addEventListener('change', function(e){
    			handleChange(curNaf,index+1);
    		}, false );
    	});
    }
    Et mon fichier Ajax:
    Code php : 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
    <?php
     
    require_once('../classes/moimp/OptListSelect.php'); // permet de créer une liste d'options <select>
    require_once('../classes/moimp/OptListOption.php'); // permet de créer une option de liste <option>
    require_once('../config.php');
    require_once('../model/model.php');
     
    if ( empty(session_id()) )
    	session_start();
     
    use OptListSelect\OptListSelect;
    use OptListOption\OptListOption;
     
    var_export($_POST);echo "\r\n\r\n"; // Ne renvoie pas le jeton
    var_export($_SESSION['tokenLists']);echo "\r\n\r\n";
    $token = isset($_POST['token']) ? $_POST['token'] : null;
    var_export($token);
    if(!isset($_SESSION['tokenLists'][$token])) exit('token invalide'); // Voir le mode de sortie, voir pourquoi le jeton n'est pas reconnu.
     
    function doNafList(int $iPrevLevel){
    	$language = $_SESSION['language'];
     
    	$iNewLevel	= $iPrevLevel+1;
    	$iPrevId	= $_POST['naf'][$iPrevLevel];
    	$data		= getNAF($language, $iNewLevel, $iPrevId);
    	$lst		= new OptListSelect("naf[$iNewLevel]", ['id'=>"naf$iNewLevel", 'required'=>'required']);
    	$lst->addOption(new OptListOption('', '', ['label'=>getDBText($language,16)]));
    	if (!empty($data)){
    		foreach($data as $aItem){
    			$lst->addOption(new OptListOption($aItem['id'], $aItem['code'].' - '.$aItem[$language.'_text']));
    		}
    		unset($aItem);
    	}
    	return $lst;
    }
     
    for ($i=1;$i<5;$i++){
    	if (isset($_POST['naf'][$i])){
    		$lstNaf[$i+1] = doNafList($i);
    		exit($lstNaf[$i+1]);
    	}
    }
    var_export($_POST['naf']);

  2. #2
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 418
    Par défaut
    Salut,

    Alors c'est résolu ? J'ai vu dans l'autre sujet que tu avais mis résolu...

    Sinon pour envoyer plusieurs valeurs ciblées dans ton send() le plus simple est de créer un objet formData et d'utiliser la méthode "append" pour rentrer des couples clé, valeur.
    Code javascript : 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
    const
    	nafs	= document.querySelectorAll("[id*='naf']")
    	,root	= window.location.origin
    	,form = document.querySelector("form[name=tabForm]")
    	;
     
    console.log(nafs);
     
    function handleChange(lastList, idx) {
    	var xhr = new XMLHttpRequest();
     
    	xhr.onreadystatechange = function(){
     
    		if (xhr.readyState == 4 && xhr.status == 200){
    			console.log(xhr.responseText);
    			nafs[idx].innerHTML = xhr.responseText;
    		}
    	}
    	xhr.open('POST', root+'/frontend/customerActivityAjax.php', true);
     
    	var data = new FormData();
    	data.append(lastList.name, lastList.value);
    	data.append('token', form.querySelector("input[name=token]").value);
     
    	/*
    	var data = new FormData(form);
    	xhr.send(data);
    	*/
     
    	xhr.send(data);
    }
    ...

    Notes que j'ai créé une constante "form" qui représente ton formulaire. C'est à partir de cette valeur que tu devrais ensuite sélectionner tes champs, ce qui permet de les cibler précisément sans besoin d'avoir recours à des id.

    Notes aussi que j'ai mis en commentaire /*...*/ une méthode qui permet d'envoyer tous les champs du formulaire dans la requête ajax.

    Après sur le principe tu te compliques la vie avec tous tes id. Tu pourrais tout aussi bien faire : <label>Section<select name= .... </select></label> plutôt que d'utiliser des "for" qui imposent d'avoir un id correspondant.

    Aussi tu aurais pu noter tous tes champs select avec la notation tableau "naf[]", cela dit dans ce cas il faudrait faire "data = new FormData(form)" pour envoyer toutes les valeurs des sélect dans la requête ajax et avoir un tableau "naf" indexé automatiquement (qui commencerait à 0), sinon tu ne saurais pas de quel select il s'agit si tu n'en envoie qu'un.

    D'un point de vue général il faut éviter d'avoir des id dans un formulaire, surtout pour un formulaire dynamique car les id doivent être uniques, et en ajoutant des champs à la volée c'est vite fait d'avoir des id dupliqués, de même si on veut dupliquer le formulaire. La bonne méthode est de cibler le formulaire et ensuite de cibler les éléments internes par rapport à cet objet (comme je l'ai fait pour sélectionner le token).

    Enfin bon si ton code fonctionne ce n'est pas la peine de tout changer, mais penses y pour les prochaines fois, tu verras qu'au final c'est beaucoup plus simple sinon ça devient vite un casse tête, sans compter que cela te fait un code plus lourd et moins facilement évolutif.

  3. #3
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut
    Tout d'abord un grand merci pour toutes ces suggestions.

    Citation Envoyé par ABCIWEB Voir le message
    Alors c'est résolu ? J'ai vu dans l'autre sujet que tu avais mis résolu...
    C'est résolu dans le sens où la sélection en cascade fonctionne et où la question n'est plus la même. Mais dans le cas de 4 listes, si je change la valeur d'une liste, seule celle qui la suit est réinitialisée. Les autres conservent leurs options ce qui est gênant pour l'utilisateur dans le cas où il se trompe. C'est d'autant plus gênant que dans la suite du développement, j'envisage d'utiliser le même formulaire pour pouvoir modifier les sélections précédentes.

    Citation Envoyé par ABCIWEB Voir le message
    Sinon pour envoyer plusieurs valeurs ciblées dans ton send() le plus simple est de créer un objet formData et d'utiliser la méthode "append" pour rentrer des couples clé, valeur.
    Code javascript : 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
    const
    	nafs	= document.querySelectorAll("[id*='naf']")
    	,root	= window.location.origin
    	,form = document.querySelector("form[name=tabForm]")
    	;
     
    console.log(nafs);
     
    function handleChange(lastList, idx) {
    	var xhr = new XMLHttpRequest();
     
    	xhr.onreadystatechange = function(){
     
    		if (xhr.readyState == 4 && xhr.status == 200){
    			console.log(xhr.responseText);
    			nafs[idx].innerHTML = xhr.responseText;
    		}
    	}
    	xhr.open('POST', root+'/frontend/customerActivityAjax.php', true);
    	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // necessary for postmode
     
    	var data = new FormData();
    	data.append(lastList.name, lastList.value);
    	data.append('token', form.querySelector("input[name=token]").value);
     
    	/*
    	var data = new FormData(form);
    	xhr.send(data);
    	*/
     
    	xhr.send(data);
    }
    ...
    Notes que j'ai créé une constante "form" qui représente ton formulaire.
    Notes aussi que j'ai mis en commentaire /*...*/ une méthode qui permet d'envoyer tous les champs du formulaire dans la requête ajax.
    Je te remercie pour cette suggestion que je vais creuser.

    Citation Envoyé par ABCIWEB Voir le message
    C'est à partir de cette valeur que tu devrais ensuite sélectionner tes champs, ce qui permet de les cibler précisément sans besoin d'avoir recours à des id.
    Après sur le principe tu te compliques la vie avec tous tes id. Tu pourrais tout aussi bien faire : <label>Section<select name= .... </select></label> plutôt que d'utiliser des "for" qui imposent d'avoir un id correspondant.
    Je connais cette possibilité, mais je ne l'utilise pas à cause du CSS qui me permet de traiter séparément les étiquettes et les champs pour mieux aligner verticalement les uns et les autres. Je ne vois pas comment obtenir cet alignement avec un champ imbriqué dans un label.

    Citation Envoyé par ABCIWEB Voir le message
    Aussi tu aurais pu noter tous tes champs select avec la notation tableau "naf[]", cela dit dans ce cas il faudrait faire "data = new FormData(form)" pour envoyer toutes les valeurs des sélect dans la requête ajax et avoir un tableau "naf" indexé automatiquement (qui commencerait à 0), sinon tu ne saurais pas de quel select il s'agit si tu n'en envoie qu'un.
    Si tu regardes bien tu verras que c'est ce que j'ai fait.

    Citation Envoyé par ABCIWEB Voir le message
    D'un point de vue général il faut éviter d'avoir des id dans un formulaire, surtout pour un formulaire dynamique car les id doivent être uniques, et en ajoutant des champs à la volée c'est vite fait d'avoir des id dupliqués, de même si on veut dupliquer le formulaire. La bonne méthode est de cibler le formulaire et ensuite de cibler les éléments internes par rapport à cet objet (comme je l'ai fait pour sélectionner le token).
    Compte tenu de ce qui précède, je génère les noms et les id en php comme ceci: id='naf'.$i name='naf[$i]'

    Citation Envoyé par ABCIWEB Voir le message
    Enfin bon si ton code fonctionne ce n'est pas la peine de tout changer, mais penses y pour les prochaines fois, tu verras qu'au final c'est beaucoup plus simple sinon ça devient vite un casse tête, sans compter que cela te fait un code plus lourd et moins facilement évolutif.
    Par rapport à mon sujet au début de cette discussion, il me reste à régler les questions 1 et 3.

  4. #4
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 418
    Par défaut
    Bonjour,

    Le plus simple est que tu testes le code ci-dessous dans une page séparée.

    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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    <!DOCTYPE html>
    <html lang="fr">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     
    		<meta http-equiv="Expires" content="-1" />
    		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
     
    		<base href="http://racine.local" />
     
    		<link rel="stylesheet" media="all" type="text/css" href="../css/structure.css" />
    		<link rel="stylesheet" media="all" type="text/css" href="../css/screen.css" />
    		<link rel="stylesheet" media="print" type="text/css" href="../css/print.css" />
     
            <style>
                    form[name="tabForm"] .activite p {
                            line-height:30px;
                    }
                    
                    form[name="tabForm"] .activite span {
                            display:inline-block;
                            width:100px;
                    }
                    
                    form[name="tabForm"] .activite select {
                            width:200px;
                    }
                    </style>
    	</head>
     
    	<body>
     
    <form method="post" name="tabForm" >
    		<input type="hidden" id="id0" name="id" value="3011">
    	<input type="hidden" name="token" value="89e5da68bf3988022f92f40f7e56054ae5d4dd1a2a037167">
    <div class="formFlex">
    		<fieldset><legend>Activités répertoriées</legend>
    			<p class="note">
    				du texte.
    			</p>
    			<fieldset class="activite"><legend>Zone d'édition&nbsp;: Sélection d'une activité</legend>
    				<p><label><span>Section</span><select name='naf[]' required='required'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
    				<p><label><span>Division</span><select name='naf[]'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
    				<p><label><span>Groupe</span><select name='naf[]'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
    				<p><label><span>Activité</span><select name='naf[]'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option></select></label></p>
    			</fieldset>
     
    	</div>
    </form>
     
     
    <script>
    const
            form = document.querySelector("form[name=tabForm]")
            ,nafs = form.querySelectorAll("select[name='naf[]']")
            ,root   = window.location.origin
            ;
     console.log(nafs);
    function handleChange(lastList, idx) {
            var xhr = new XMLHttpRequest();
     
            xhr.onreadystatechange = function(){
                    
                    if (xhr.readyState == 4 && xhr.status == 200){
                            console.log(xhr.responseText);
                            //nafs[idx].innerHTML = xhr.responseText;
                    }
            }
            xhr.open('POST', root+'/frontend/customerActivityAjax.php', true);              
            
            var data = new FormData(form);
            
            xhr.send(data);
    }
     
    if (nafs.length){
            nafs.forEach(function(curNaf, index){
                    curNaf.addEventListener('change', function(e){
                            handleChange(curNaf,index);
                    }, false );
            });
    }
    </script>
    	</body>
    </html>
    Tu vois qu'on peut faire des alignements facilement même avec des select imbriqués dans les labels. il suffit d'entourer le texte d'un "span" et ensuite de le mettre en display:inline-block et de lui attribuer une largeur, j'ai fait pareil pour les select (qui par défaut sont en display:inline-block), et je me sert des <p> pour un conteneur qui permet d'espacer les lignes en définissant leur hauteur.

    Il n'y a pas besoin d'id pour cibler tes champs, là j'utilise juste une classe "activite", et les span, select, et p sont ciblés par rapport à cet élément pour le css. Et la classe "activité" est elle même ciblée par form[name="tabForm"], ce qui fait qu'il n'y aura aucune ambiguïté possible avec les autre éléments de ta page (même si plus loin ils ont une classe "activite"). Evidemment j'aurais aussi pu utiliser un id="activite" pour faire plus simple, c'était pour te montrer que l'on peut aisément s'en passer si besoin (car il faut faire attention avec les id qui doivent être uniques pour tout le document).

    Tu vois aussi que j'ai utilisé la syntaxe "naf[]" sans indiquer d'index, car pas besoin avec javascript/html/php qui s'entendent très bien ensemble (pour dire que cette syntaxe ne fonctionne pas forcément avec tous les langages serveur, mais tant que tu utilises php c'est ok). Mais attention les index commenceront à 0 (il faudra modifier ton code php en conséquence) et c'est mieux ainsi pour compatibilité avec les tableaux javascript et php.

    Testes ce script dans une page séparée dans un premier temps et dans ta page customerActivityAjax.php fait en première ligne (le temps de tester) exit(var_dump($_POST));. Dans la console du navigateur -> onglet "réseau" et en cliquant sur la requête tu verras dans l'onglet "réponse" un tableau comme il faut, facilement exploitable par php. Ensuite tu pourras supprimer les options des trois derniers select dans le html que j'ai inclues pour le test.

    Ah oui une chose, j'avais repris ton dernier code mais avec FormData il ne faut pas utiliser xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); que j'ai supprimé.

    Concernant tes questions, le send de la requête ajax envoie des données, si tu n'en envoie pas, php ne recevra pas de données. Et concernant le exit côté php, il sert à sortir de la page et quand on lui met une variable en argument, il l'affiche en même temps. Pour afficher quelque chose et ne pas sortir du script fais des echo $valeur; et mets le exit (sans valeur) exit; à la suite de ta boucle (pas à l'intérieur), pour ordonner au script de sortir quand tu as terminé ton affichage.

    Concernant le fonctionnement des selects, faudrait nous montrer le retour de "console.log(xhr.responseText);" car je ne vois pas ton code.

  5. #5
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut
    Citation Envoyé par ABCIWEB Voir le message
    Bonjour,

    Le plus simple est que tu testes le code ci-dessous dans une page séparée.
    ...
    Tu vois qu'on peut faire des alignements facilement même avec des select imbriqués dans les labels. il suffit d'entourer le texte d'un "span" et ensuite de le mettre en display:inline-block et de lui attribuer une largeur, j'ai fait pareil pour les select (qui par défaut sont en display:inline-block), et je me sert des <p> pour un conteneur qui permet d'espacer les lignes en définissant leur hauteur.

    Il n'y a pas besoin d'id pour cibler tes champs, là j'utilise juste une classe "activite", et les span, label, et p sont ciblés par rapport à cet élément pour le css. Et la classe "activité" est elle même ciblée par form[name="tabForm"], ce qui fait qu'il n'y aura aucune ambiguïté possible avec les autre éléments de ta page (même si plus loin ils ont une classe "activite"). Evidemment j'aurais aussi pu utiliser un id="activite" pour faire plus simple, c'était pour te montrer que l'on peut aisément s'en passer si besoin (car il faut faire attention avec les id qui doivent être uniques pour tout le document).
    Ton code marche très bien et répond à une problématique que je ne savais pas résoudre. Par contre il ne fonctionne plus si je remplace la liste par une variable. Dans ce cas dans le rendu, la liste passe en dessous de l'étiquette, comme-ci il y avait un '<br>' après le '</span>'. Je n'arrive pas à comprendre pourquoi.
    Voici ce que donnent le rendu et la console:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <label><span>Section</span><select name='naf[1]'><option value=''></option><option value='5'>Texte de l'option</option></select></label><br>
    le contenu de ma variable:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <select name='naf[1]'><option value=''></option><option value='5'>Texte de l'option</option></select>
    et le code html du formulaire:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <label><span>Section</span><?= $lstNaf[1]; ?></label><br>

  6. #6
    Expert confirmé
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 127
    Par défaut
    Salut

    Peut être que la nouvelle balise simplifié <?= n'est pas reconnu par ta version PHP, <?= = <php echo
    :whistle:pourquoi pas, pour remercier, un :plusser: pour celui/ceux qui vous ont dépannés.
    saut de ligne
    OOOOOOOOO👉 → → Ma page perso sur DVP ← ← 👈

  7. #7
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 418
    Par défaut
    Citation Envoyé par moimp Voir le message
    et le code html du formulaire:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <label><span>Section</span><?= $lstNaf[1]; ?></label><br>
    Bah si tu vois ça dans ton html (dans la console), c'est manifestement que le code php n'est pas interprété dans ta page. Il sort d'où ce code ? C'est le code php affiché initialement dans ta page de formulaire ou c'est le retour de ta requête Ajax ?

    Si c'est le retour de ta requête ajax, c'est que ton code php n'a pas interprété les variables php, et javascript ne le fera pas à sa place. Consultes le retour de la réponse Ajax, il faut que ton html soit formé, tu ne dois plus voir de traces de php car php ne sera pas interprété en retour de la requête ajax.

    Si c'est le code affiché initialement par php dans ton formulaire, c'est que tu as un problème pour transmettre des variables php dans le formulaire (la vue). Comment fais-tu pour tes autres codes ?

    Au passage, concernant les index de ton tableau "naf", si tu tiens absolument à les indiquer dans le html (mais encore une fois tu n'es pas obligé avec php), commences les index à 0 et non pas à 1, sinon comme déjà dit, ça met le bin's avec javascript et php dont les tableaux sont naturellement indexés à partir de 0. Si tu dois faire une correction par la suite pour afficher 1 plutôt que 0 pour l'utilisateur, ne le fais qu'au dernier moment pour l'affichage utilisateur mais pas avant. Dans le code et les langages de programmation les tableaux numériques commencent avec l'index 0.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 0
    Dernier message: 03/12/2020, 01h35
  2. Question math par rapport à la procédure varclus
    Par joyeux_lapin13 dans le forum SAS STAT
    Réponses: 5
    Dernier message: 01/08/2011, 15h18
  3. [MySQL] Actualiser données PHP sans recharger page
    Par herve94400 dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 15/10/2008, 15h44
  4. Recharger page après validation de formulaire par POST
    Par Flynt dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 01/02/2008, 16h33
  5. Réponses: 18
    Dernier message: 08/04/2006, 10h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo