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

jQuery Discussion :

Renseigner des champs à partir de données de div


Sujet :

jQuery

  1. #1
    Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2006
    Messages
    132
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2006
    Messages : 132
    Points : 66
    Points
    66
    Par défaut Renseigner des champs à partir de données de div
    Bonjour,
    Je travaille sur un exercice qui consiste à renseigner des champs crées dynamiquement avec les données de champs div et fait le total d'une div qui contient les prix.
    Mais je suis confronté à deux problème :
    1 - Lorsque je fais un click sur le lien le champ input est crée deux fois ;
    2 - j'ai une erreur de récursivité de la fonction total :
    Uncaught InternalError: too much recursion
    Code html
    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
    <div class="col-lg-12 col-md-7 col-12">
    		<div class="container">
    			<div class="row">
    				<article class="col-lg-4 col-sm-6 col-md-4 col-12">
    					<div class="food-item" id="food-item">
    						<div class="inner-content">
    							<div class="food-simg"><img src="photos/alloco.jpg" alt="alloco" class="img-fluid" /></div>
    								<div class="food-desc" id="food-desc">
    									<div class="food-name" id="food-name">
    										<img src="#" alt="" class="img-fluid"/>
    										<h4 class="title">Alloco abidjanais</h4>
    									</div>
    									<div class="food-price col-lg-9 col-xs-9" id="prix">
    										<div id="prix" style="display: inline-block;">1500</div><sup>FCFA</sup></div>
    										<div class="food-add col-lg-3 col-xs-3 offset-9"><a href="#">+</a></div>
    									</div>
     
    								</div>
    						</div>
    				</article>
                             </div>
                    </div>
          </div>

    Code JQuery
    Code : 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
    $(document).ready(function(){
     
      $("article").on("click",".food-add>a", function(e){
    	e.preventDefault();
     
    	var $article = $(this).closest("article"),
    	      nomMenu = $article.find("#food-name>h4").html(),
    	     prix = $article.find("#prix>div").html();
     
        var $input = $('<input type="text" name="menu" size="31" value="'+nomMenu+'"><input type="text" name="prix" size="10" value="'+prix+'">');
    	    console.log($input);
    	  	$input.html(nomMenu+"  "+prix+" FCFA").appendTo($(".listeCmd"));
    	 	$("#prixSelection").css("textAlign", "right");
     
    		TotalCommande(); //Appel de la fonction claculer le total de la commande  
      });
     
      $("#itemChoix").on("click","li",function(){
        	var $this = $(this);
    		$this.addClass("removing").slideUp(function(){
    			$this.remove();
    			TotalCommande();  //Appel de la fonction reclaculer le total de la commande après la suppression d'un menu  
       		});
     
      });
     
     
      function TotalCommande(){
        var $prixTotal = 0; //initialisation du total commande à 0
     
        $(".listeCmd").each(function(){
     
          	var $prix = $(this).html;
     
    		$prixTotal += parseInt($prix);
        });
     
        if ($prixTotal == undefined){
          $prixTotal=0;
        }   
          var $boxTotal = $('<div id="#totalcommande"></div>');
          $boxTotal.html(TotalCommande()+" FCFA");
      };
     
    });
    Images attachées Images attachées  

  2. #2
    Membre averti Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    Novembre 2002
    Messages
    194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : Novembre 2002
    Messages : 194
    Points : 357
    Points
    357
    Par défaut
    Salut à tous,

    Et comme ça ?

    Code JQuery : 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
     
    function TotalCommande() {
        var $prixTotal = 0; //initialisation du total commande à 0
     
        $('input[name*="prix"]').each(function () {
            $prixTotal += parseInt($(this).val());
        });
     
        if (!$('#totalcommande').length) {
            $('.food-desc').append('<div id="totalcommande"></div>');
        }
     
        $('#totalcommande').html('Total commande: ' + $prixTotal + ' FCFA');
    };
     
    $(function () {
        (function ($) {
     
            $('article').on('click', '.food-add > a', function (e) {
                var $input, nomMenu = $('.title').html(), prix = $('#prix > div').html();
                e.preventDefault();
     
                $input = $('<input type="text" name="menu" size="31" value="' + nomMenu + '"><input type="text" name="prix" size="10" value="' + prix + '"></br>');
                $('#food-name').append($input);
     
                TotalCommande(); //Appel de la fonction claculer le total de la commande  
            });
     
            $('#food-name').on('change keyup', 'input[name*="prix"]', function () {
                if (!$(this).val()) {
                    $(this).val(0);
                }
     
                TotalCommande();
            });
     
        })(jQuery);
    });

  3. #3
    Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2006
    Messages
    132
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2006
    Messages : 132
    Points : 66
    Points
    66
    Par défaut
    Merci pour ta réponse mais le menu s'affiche deux fois pour un click (comme indiquer dans l'image) et c'est le même menu qui s'affiche même quand on choisit un autre.
    Cependant mon script fonctionne correctement
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    var $article = $(this).closest("article"),
    nomMenu = $article.find("#food-name>h4").html(),
    prix = $article.find("#prix>div").html();

  4. #4
    Membre averti Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    Novembre 2002
    Messages
    194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : Novembre 2002
    Messages : 194
    Points : 357
    Points
    357
    Par défaut
    Salut,

    Ton code dans l'état ne fonctionne pas chez moi.

    Que cherches tu à faire avec ces deux lignes. Insérer deux éléments 'input' ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    var $input = $('<input type="text" name="menu" size="31" value="'+nomMenu+'"><input type="text" name="prix" size="10" value="'+prix+'">');        
            $input.html(nomMenu + "  " + prix + " FCFA").appendTo($(".listeCmd"));

  5. #5
    Membre du Club
    Homme Profil pro
    Webmaster
    Inscrit en
    Janvier 2006
    Messages
    132
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2006
    Messages : 132
    Points : 66
    Points
    66
    Par défaut
    A travers ce code, je crée deux champs avec pour valeur le menu choisi et son prix et je le affiche dans la div avec la class listeCmd.
    Le problème c'est que les champs sont affichés en doublons : 2 champs menu et 2 champs prix à chaque fois qu'on click sur un menu.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    au passage
    Citation Envoyé par moudjahidine
    2 - j'ai une erreur de récursivité de la fonction total :
    Uncaught InternalError: too much recursion
    il ne peut en être autrement ta fonction s'appelant elle même sans condition d'arrêt !
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function TotalCommande(){
      var $prixTotal = 0; //initialisation du total commande à 0
     
      $(".listeCmd").each(function(){
        var $prix = $(this).html;
        $prixTotal += parseInt($prix);
      });
     
      if ($prixTotal == undefined){
        $prixTotal=0;
      }   
      var $boxTotal = $('<div id="#totalcommande"></div>');
      // ICI tu la re-appelles ... et ainsi de suite
      $boxTotal.html(TotalCommande()+" FCFA");
    };
    il y a quand même beaucoup de lacunes dans ton code !

Discussions similaires

  1. Sélection des champs à partir des requêtes
    Par rec82 dans le forum Bases de données
    Réponses: 4
    Dernier message: 09/12/2008, 20h49
  2. Generer des graphes à partir de données contenue dans un serveur
    Par Premium dans le forum API standards et tierces
    Réponses: 1
    Dernier message: 09/05/2007, 18h31
  3. Légende des boutons à partir de données d'une table
    Par yancimer dans le forum Access
    Réponses: 4
    Dernier message: 12/09/2006, 11h46
  4. Réponses: 4
    Dernier message: 19/07/2006, 11h07
  5. Réponses: 4
    Dernier message: 05/07/2006, 16h47

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