Forums des Zéros

14 mars 2016 à 14:02:25

Hello,

J'ai remarqué quelque erreurs sur le chapitre de modification de contenu :

$(':radio#H:checked').val(); //renvoi true ou undefined (et non false)

$(':radio').val(['H']); // ne retourne pas le radio H mais set tous les radios à la valeur 'H'. Ce qui me semble logique avec un setter.

Il me semble avoir vu la première erreurs sur cette page, sur un poste en Octobre. Et vu que l'auteur n'a jamais repondu sur ce forum, je suppose que c'est un peu peine perdue...

Un accès premium d'un mois avec le code AXEL-8RR3 C'est cadeau et c'est illimité !

kisow24

14 mars 2016 à 15:23:10

yoanncabourg a écrit:

Bonjour,

Lorsque j’exécute les codes ajax sur mon serveur local (wamp), rien ne marche, pourtant les même codes marchent sur mon serveur hébergé.

Les autres codes de fonctionnent bien sur le local normalement.

Quelqu'un a déjà rencontré ce genre de soucis?

Merci.

Yoann

Bonjour,

Le principal c'est que ça fonctionne au moins sur hébergement pour avancer. Sinon, il faudrait que tu ailles dans le système d'administration de ton serveur pour voir si tout est dans le vert.

In this world, sky's the true limit. All the others are man-made...

kisow24

19 mars 2016 à 15:52:18

Bonjour à tous,

Concernant mon code, je pensais avoir tout bon mais il ne fonctionne pas.

Est-ce que quelqu'un en voit la raison?

Le code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="style7.css"/>
        <title>Liste d'élèves</title>
    </head>
    
    <body>
    
        <span id="liste"></span><Br/>
        <span id="tri"></span><Br/>
        <button id="sup">supérieur à 4</button>
        <button id="inf">inférieur à 4</button>
        <button id="sans">sans Mathis, Yanis et Luca</button>
        
        <script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
        <script>        
		$(function() {
		   //var tableau2 = $.grep(tableau, function(élément, index) { … }, inv);

		   var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé', 'Nathan', 'Manon', 'Noah', 'Sarah ', 'Louis', 'Luna', 'Kylian', 'Clara', 'Ethan', 'Camille', 'Hugo', 'Lylou', 'Théo', 'Zoé', 'Yanis', 'Maélys'];
		   var tableau2;
		   $('#liste').text('Données originales : ' + tableau.join(', '));
		   $('#sup').click(function() {
			    tableau2 = $.grep(tableau, function(el,ind) {
				 return (ind > 4);
			    }); 
			    $('#tri').text('Les élèves après la 4ème position:' + tableau2.join(', '));
		   });
		   $('#inf').click(function() {
			    tableau2 = $.grep(tableau, function(el,ind) {
				 return (ind > 4);
			    }, true); 
			    $('#tri').text('Les élèves avant la 4ème position:' + tableau2.join(', '));
		   });
		   $('#sans').click(function() {
			    tableau2 = $.grep(tableau, function(el,ind) {
				 return ( el != 'Mathis' && el!= 'Yanis' && != 'Luca' );
			    }); 
			    $('#tri').text('Les élèves sans Mathis, Yanis et Luca' + tableau2.join(', '));
		   });		  
		});
        </script>
    </body>
</html>

Merci d'avance.

-
Edité par kisow24 19 mars 2016 à 15:59:01

In this world, sky's the true limit. All the others are man-made...

Guettoudou

19 mars 2016 à 16:50:43

@kisow24,

Bonjour,

il manque "el" dans ton code :

return ( el != 'Mathis' && el!= 'Yanis' && != 'Luca' );

qui fonctionne si tu écris :

return ( el != 'Mathis' && el!= 'Yanis' && el != 'Luca' );

Cordialement

kisow24

19 mars 2016 à 18:07:25

Merci Guettoudou,

Il ne faut pas grand chose.

Casser la tête permet de bien mémoriser.

T'en a fini avec jQuery? Ça va être intéressant de tout maîtriser.

-
Edité par kisow24 19 mars 2016 à 19:06:48

In this world, sky's the true limit. All the others are man-made...

Guettoudou

20 mars 2016 à 0:10:50

kisow24 a écrit:

T'en a fini avec jQuery? Ça va être intéressant de tout maîtriser.

Je crois plutôt que ce n'est qu'un début... Là, je suis en train de me prendre la tête avec "Créez un jeu de plateau tour par tour avec Javascript", de M@teo21, et c'est une toute autre paire de manches !

Bonne continuation à toi aussi chez les "disciples de Javascript" !

CrazyGold.fr : gagner de l'argent gratuitement

30 mars 2016 à 16:07:46

Bonjour,

Comme beaucoup je galère avec l'activité "Créez un générateur de formulaire" du cours "Simplifiez vos développements avec jQuery".
Comme on est plus tenu par le temps, j'ai laissé un peu reposer le tout et je reviens avec un oeil neuf.
Ca a été profitable car il me semble que j'ai fini par arriver à faire ce qui est demandé. Sauf que j'aimerais bien que le bouton qui a été ajouté au formulaire créé puisse faire un affichage des infos que l'on peut saisir dans le formulaire créé. Et je n'arrive pas à détecter son activation sans lui ajouter d'id. Un exemple de code simplifié :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        margin: 0;
      }
      #gauche {
        float: left;
        width: 70%;
        height: 1000px;
        background-color: #EFECCA;
      }
      #droite {
        background-color: #CEFFF8;
        height: 1000px;
        padding : 10px;
        padding-left: 71%;
      }
    </style>
  </head>
  <body>
    <div id="gauche">
    </div>
    <div id="droite">
      <button>test droite</button>
    </div>
    <script src="jquery.js"></script>
    <script>
$(function() {
	$('#droite button').click(function(){
		alert('Button droite click');
		$('#gauche').html($('#gauche').html()+'<button>test gauche</button>');
	});
	$('#gauche button').click(function(){
		alert('Button gauche click');
	});
});
      </script>
  </body>
</html>

Lorsque l'on clique sur le bouton 'test droite' cela affiche bien la fenêtre de l'alerte et cela ajoute un bouton 'test gauche'. Mais quand on clique sur le bouton 'test gauche' rien ne se passe.

C'est comme si le sélecteur $('#gauche button') n'avait aucun effet du fait que le bouton a été ajouté par le script.
Peut être que quelque chose m'a échappé mais je n'ai rien vu dans le cours à ce sujet et je ne suis pas arrivé à trouver une info avec les moteurs de recherche ou le forum.
Quelqu'un a-t-il une idée ?

Merci d'avance,

Amicalement, Jean-Paul

magicprog

30 mars 2016 à 16:24:13

Tu doit déléguer l'évenement étant donné que le HTML est ajouté au DOM apres l'execution du script.

$( "#gauche" ).on( "click", "button", function() {
    alert('Button gauche click');
});

30 mars 2016 à 17:04:10

@magicprog

Ouais ! C'est magique ;-)
Je me doutais bien d'un truc comme ça mais je n'ai pas su trouver les bon mots clés pour chercher.

Merci beaucoup.

Amicalement, Jean-Paul

Framboise29

30 mars 2016 à 18:59:42

Bonsoir ,

je suis actuellement sur l'activité" Créer un Générateur de formulaires".

Suite à la lecture de ce forum , je me rends compte que je n'ai pas choisi le moyen le plus judicieux pour réaliser ce TP.

En effet , j'ai ajouté du code HTML et je rencontre un soucis lorsque je clique plusieurs fois sur chaque boutons.

Les valeurs sont comme "maintenus" et du coup les labels et les champs de texte s'additionnent .

Est ce qu'a partir du code suivant, il est possible de créer un générateur sans que les boutons qui s'affichent à gauche crées se "multiplis"?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        margin: 0;
      }
      #gauche {
        float: left;
        width: 70%;
        height: 1000px;
        background-color: #EFECCA;
      }
      #droite {
        background-color: #CEFFF8;
        height: 1000px;
        padding : 10px;
        padding-left: 71%;
      }
    </style>
  </head>
  <body>
    <div id="gauche">

       
      
    </div>
    <div id="droite">
      Utilisez ces boutons pour créer votre formulaire<br><br>
      <button id="label">Label</button>
      <button id="zonedetexte">Zone de texte</button>
      <button>Bouton</button>
    <br>
    <hr> <!--Insérer une ligne -->
   
        
    <!--Insérer le bouton label-->
    <label for="text" class="text">Texte du label</label>
    <input type="text" id="text">
    <button id="ok">OK</button>
    
    <!--Insérer le bouton zone de texte-->  
    
    <label for="zoneDeTexte" class="zoneDeTexte">ID de la zone de texte</label>
    <input type="text" id="zoneDeTexte">
    <button id="ok1">OK</button 
    
      
    </div>     
        
    <script src="jquery.js"></script>
    <script src="index.js"></script>
  </body>
</html>

/* Activer le bouton label*/

$(function () {
    $('.text').hide();
    $('#text').hide();
    $('#ok').hide();
    $('#zoneDeTexte').hide();
    $('.zoneDeTexte').hide();
    $('#ok1').hide();
});


// Action lors du clique sur le bouton label
$('#label').click(
    function () {

        $('.text').show();
        $('#text').show();
        $('#ok').show();


        $('#ok').click(
            function () {
                
                
                var saisinom = $('#text').val(); //Lit la saisie du champs texte
            
        
                 var span = $('<span>' + saisinom + '</span>').appendTo('#gauche'); //Afficher la saisie à gauche de l'écran;
                
            
                $(function () {
                    $('.text').hide();
                    $('#text').hide();
                    $('#ok').hide();
                });
//var span = $('span')[0];
  //  $.removeData(span,saisinom);// Supprimer les données pour que ça ne s'additionne pas (cela ne marche pas)
                
                
            });
$('#gauche').append('<br>');
    });


// Action lors du clique sur le bouton zone de texte


$('#zonedetexte').click(
    function () {

        $('.zoneDeTexte').show();
        $('#zoneDeTexte').show();
        $('#ok1').show();


        $('#ok1').click(
            function () {

                

                $('<input>').appendTo('#gauche'); //Afficher la saisie à gauche de l'écran
                $(function () {
                    $('.zoneDeTexte').hide();
                    $('#zoneDeTexte').hide();
                    $('#ok1').hide();
                });


            });

        
    });

Merci beaucoup pour votre aide : )

CrazyGold.fr : gagner de l'argent gratuitement

31 mars 2016 à 10:06:57

Bonjour Framboise,

En ce qui me concerne, au lieu de jouer sur des hide/show d'éléments faisant partie du code html, j'ai ajouté ou supprimé les éléments html via jQuery.
Pour cela, j'ai utilisé after (pour ajouter) et remove (pour supprimer ce qui doit disparaître). Et pour mettre les éléments du formulaire dans la partie gauche, j'ai utilisé html :

$('#gauche').html($('#gauche').html()+ce qui doit être ajouté);

Mais je suis comme toi un élève, je n'ai rien d'un expert.

Bonne continuatuion

Amicalement, Jean-Paul

magicprog

31 mars 2016 à 10:29:40

Bonjour Framboise29,

Tout d'abord, dans ton HTML, au niveau du dernier bouton il manque le > :

<button id="ok1">OK</button>

Ensuite les $(function(){.... partout ne sont pas utiles. entoure simplement la totalité de ton code avec :

$(function() {

Pour ce qui est des hide, tu peux mettre toutes les classes/id dans le meme selecteur separé par des virgules (meme principe pour .show() ) :

$('.text, #text, #ok').hide(); /*Par ex. pour les 3 premiers*/

Pour finir, tes evenements clics ne doivent pas etres les un dans les autres. Par ex:

$('#label').click(function() {
    $('#ok').click(function() {

    });
});

Ici, a chaque clic sur #label, un evenement supplementaires est ajouté sur #ok, c'est ce qui est a l'origine de la duplication.

JS corrigé:

$('.text,#text,#ok,#zoneDeTexte,.zoneDeTexte,#ok1').hide();
$('#label').click(function() {
    $('.text, #text, #ok').show();
    $('#gauche').append('<br>');
});
$('#ok').click(function() {
    var saisinom = $('#text').val();
    var span = $('<span>' + saisinom + '</span>').appendTo('#gauche');
    $('.text, #text, #ok').hide();
});
$('#zonedetexte').click(function() {
    $('.zoneDeTexte, #zoneDeTexte, #ok1').show();
});
$('#ok1').click(function() {
    $('<input>').appendTo('#gauche');
    $('.zoneDeTexte, #zoneDeTexte, #ok1').hide();
});

Framboise29

31 mars 2016 à 13:05:05

Merci beaucoup pour cette réponse très détaillée.

J'ai maintenant décidé de créer les éléments à partir de JS pour mieux répondre aux attentes de l'exercice.

De ce fait , j'ai un nouveau problème XD

Je ne trouve pas quel sélecteur choisir pour supprimer le bouton label suite à la validation ( L'étoile"*" n'est pas sensé tout supprimer?)

En outre , je ne comprends pas comment insérer le bouton de validation.

// Activer le libélé

$("#zoneLabel").click(function () {
		// les variables crée les éléments dans la partie de droite
		var idZoneLabel = '<span>Texte du label</span>'; //Le libélé du champs
		var LabelId = $('<input type="text" id="idLabel">');// Le champs de texte
		var labelBtn = $('<input type="button" value="OK" id="valide1">'); //Le bouton de validation

		$('#newBtnCreate').before(idZoneLabel, LabelId, labelBtn);// Insertion de l'élément avant la sélection

		$("#valide1").click(function () {
			var idElementLabel = $("#idLabel").val();
			var elementLabel =$('<input type="text"/><br/>');

			$('#gauche').append(idElementLabel);
			$(':label').attr('id', idElementLabel);
			$('#newBtnCreate *').remove();
		});
	});



// Activer le bouton zone de texte

$('#zoneTexte').click(function () {
		// les variables crées les éléments dans la partie de droite
		var idZoneTxt = '<span>Entrez l\'id de la zone de texte </span>'; // Le libélé du champs
		var iptID = $('<input type="text" id="idInput">'); // Le champs de texte
		var iptBtn = $('<input type="button" value="OK" id="valide">'); // Le bouton de validation

		$('#newBtnCreate').append(idZoneTxt, iptID, iptBtn); // Insertion des variables dans le div

		$('#valide').click(function () { // Action à chaque clique
			var idElementInput = $('#idInput').val(); // Lit la valeur du champs
			var elementIput =$('<input type="text"/><br/>');

			$('#gauche').append(elementIput); // Insertion à gauche de l'écran 
			$(':input').attr('id', idElementInput);
			$('#newBtnCreate *').remove();
		});
	});

// Activer le bouton de validation

$('#confirmer').click(function () {
		// les variables crées les éléments dans la partie de droite
		var idZoneConfirmer = '<span>Insérer le bouton de validation</span>'; // Le libélé du champs
		var idConfirmer = $('<button type="button" id="idButton"></button>'); // Le champs de texte
		var confirmerBtn = $('<button type="button" value="Valider" id="valide2">'); // Le bouton de validation

		$('#newBtnCreate').after(confirmerBtn , idZoneConfirmer); // Insertion des variables dans le div

		$("#valide2").click(function () { // Action à chaque clique
			var idElementConfirmer = $('#idButton').val(); // Lit la valeur du champs - Je ne suis pas sûr que cela soit nécessaire ici
			var elementConfirmer =$('<button type="button" value="Valider"></button>');

			$('#gauche').append(elementConfirmer); // Insertion à gauche de l'écran 
			$(':button').attr('id', idElementConfirmer);
			$('#newBtnCreate *').remove();
		});
	});

Merci beaucoup pour votre aide

31 mars 2016 à 16:08:45

Re-Bonjour Framboise29,

Moi j'ai choisi de mettre des id à mes éléments et ça me permet d'utiliser remove en utilisant les id comme sélecteurs.
Il y a peut être plus sioux (en supprimant tout d'un coup comme tu cherches à le faire) mais je n'ai pas l'impression que c'était interdit d'ajouter des id.

Amicalement, Jean-Paul

Framboise29

31 mars 2016 à 16:32:03

Merci pour votre réponse .

C'est étrange car je n'arrive pas a ensuite effacer les boutons "label" en utilisant remove() comme pour le bouton "zone de texte".

J'ai essayé avec d'autres id mais non XD

daerkenar

7 avril 2016 à 11:20:20

Bonjour,

Je suis sur ce cours dans le chapitre "Premiers pas avec AJAX". Lorsque j'essaye de regarder les exemples et donc de cliquer sur les liens "Essayer le code" (par exemple : https://course.oc-static.com/ftp-tutos/cours/jquery/partie%204/chapitre%201/ajax%201/ajax.html).

Rien ne fonctionne. De même si je copie-colle le code et que je le fais tourner en local sur mon wamp, rien ne se passe.

Avez-vous aussi le même problème?

7 avril 2016 à 11:43:31

Ouvre le debugger de ton navigateur pour voir une éventuelle erreur?

Pour moi, l'url du script JQuery n'est pas en https, si tu es sur chrome cela pose problème car il y a une perte de sécurité.

Un accès premium d'un mois avec le code AXEL-8RR3 C'est cadeau et c'est illimité !

daerkenar

7 avril 2016 à 13:06:00

Effectivement c'est le https qui posait problème. Merci

MekniRihem

11 avril 2016 à 14:55:08 - Message modéré pour le motif suivant : Toute forme de publicité est interdite

18 avril 2016 à 8:33:57

Bonjour,

j'ai un petit souci dans la partie premier pas avec AJAX au sujet de la fonction $.get().

dans l'exemple donnée dans le cour la fonction.

$(function() {

  $('#action').click(function() {
    $.get('proverbes.php?l=9', function(data) {
       alert(data);
     });    
  });  
 });

retourne dans un alert().

<u>Proverbe chinois N° 9</u><br><br><b>Si ce que tu as à dire n'est pas plus beau que le silence, tais toi.</b>

mais moi quand je copie colle le code donné ça me retourne toute la structure HTML de la page proverbes.php avec le bon proverbe.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document proverbes Chinois</title>
</head>
<body>
   <u>Proverbe chinois N° 9</u><br><br><b>Si ce que tu as à dire n'est pas plus beau que le silence, tais toi.</b>
</body>
</html>

je voudrais savoir pour quoi toute la structure HTML est retournée et nom pas juste la ligne demandée.

merci de vos réponse :).

18 avril 2016 à 11:33:25

Salut,

Peux-tu fournir ton code PHP.

Dans le cours, la page PHP ne s'occupe pas de générer une page HTML mais bien uniquement de renvoyer le proverbe correspondant à la requête. Il n'y a pas de balise HTML dans ce code.

La balise echo n'est pas le morceau de texte qui sera retrouné. Tout ce qui est en dehors des balises PHP le sera aussi. Il faut voir une balise comme un morceau dynamique qui sera analysé et qui va placer du texte à cette endroit via la commande echo. Une fois le php terminé, tout le texte restant (les balises "sont retiré" après la lecture) sera envoyé.

-
Edité par AxelHuberty 18 avril 2016 à 11:35:49

Un accès premium d'un mois avec le code AXEL-8RR3 C'est cadeau et c'est illimité !

18 avril 2016 à 14:26:09

AxelHuberty a écrit:

Salut,

Peux-tu fournir ton code PHP.

Dans le cours, la page PHP ne s'occupe pas de générer une page HTML mais bien uniquement de renvoyer le proverbe correspondant à la requête. Il n'y a pas de balise HTML dans ce code.

effectivement je viens de supprimer toute la structure HTML c'est-à-dire

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Ajax - Load</title>
</head>
<body>
  ici y avais le code PHP
</body>

</html>

du coup mon fichier proverbes.php retourne bien l'alerte comme ceci

<u>Proverbe chinois N° 2</u><br><br><b>Connaître son ignorance est la meilleure part de la connaissance.</b>

merci

18 avril 2016 à 14:37:38

Je te conseille de te renseigner sur le PHP pour continuer vers Ajax (ou un autre langage serveur).

Un accès premium d'un mois avec le code AXEL-8RR3 C'est cadeau et c'est illimité !

18 avril 2016 à 15:13:31

ok merci pour conseil, c'est prévu par la suite.

vawec

22 avril 2016 à 18:49:24

Bonjour, j'ai créé un post ici https://openclassrooms.com/forum/sujet/jquery-impossible-de-selectionner-un-bouton-cree

pour mon soucis mais je pense que c'est mieux de le mettre ici.

Je n'arrive pas à sélectionner un bouton que je créé pour ensuite déclencher un événement dessus.

voici le code :

// On attend que le DOM Soit chargé
$(document).ready(function() { // équivalent de $(function() {}); 
	$( "button:first" ).on( "click", function() {
		//On enlève les éléments éventuellement en place
		$('hr').remove();
		$('span').remove();
		$('input').remove();
		$('.validation').remove();
		// On Crée les nouveaux éléments
		$('<hr/>').appendTo('#button');
		$('<span>Nom du label : </span>').appendTo('#button');
		$('<input type="text" id="label">').appendTo('#button');
		$('<button type="submit" class="validation">ok</button>').appendTo('#button');
	});
// ici est mon soucis
//ce code ne marche pas et je ne comprends pas pourquoi
	$("button.validation").on("click", function() {
			console.log('fin2');
	});
});

merci d'avance

vawec.fr - "Qui maîtrise l'internet, maîtrise le monde " Christophe Bonnefont, Culturiste

23 avril 2016 à 13:14:21

slt,

regarde la ligne 17

$("button.validation").click(function() {
            console.log('fin2');
    });

https://openclassrooms.com/forum/sujet/jquery-impossible-d-ajouter-puis-supprimer

23 avril 2016 à 13:20:19

anthrax13910 a écrit:

slt,

regarde la ligne 17

$("button.validation").click(function() {
            console.log('fin2');
    });

Je te conseille d'aller sur son post, il a mis le lien dans son message. Je pense avoir trouvé le soucis et posté la réponse là.

Sinon, la fonction click(handler) n'est qu'un raccourci pour la fonction on('click', handler) donc je ne pense pas que cela changera quoi que ce soit

Un accès premium d'un mois avec le code AXEL-8RR3 C'est cadeau et c'est illimité !

vawec

24 avril 2016 à 9:42:48

Oui en effet le post est résolu grâce à Axel.
Par contre, j'ai fait un autre post pour un autre problème une fois le clic effectué.
Au clic sur le bouton, je souhaite rajouter le texte que l'on aura mis dans l'input texte dans une div et ensuite remove le hr, le span, le input et le bouton sur lequel on vient de cliquer.

Voici le lien du post.

-
Edité par vawec 24 avril 2016 à 9:43:12

vawec.fr - "Qui maîtrise l'internet, maîtrise le monde " Christophe Bonnefont, Culturiste