Bonjour j'ai un input de type numbers dans un formulaire qui est une quantité, j'ai fais deux bouton un + et un - pour augmenter, diminuer la quantité, le problème c'est que dans certains cas l'incrémentation ne seras pas de 1, mais de 2, 5, 15, etc.. 

 J'ai donc fais ce genre de choses : 

mon input : 

<input type="number" id="reassort_scan_quantite" name="reassort_scan[quantite]" required="required" min="15" value="15" class="form-control" colisage="15">

et mon  JS : ..

window.onload=function(){
        var input = document.getElementById('reassort_scan_quantite'),
            plus = document.getElementById('plus'),
            moins = document.getElementById('moins');
        var colisage = document.getElementById('reassort_scan_quantite').getAttribute('colisage');
        var miniCommande = document.getElementById('reassort_scan_quantite').getAttribute('min');
        if(miniCommande < 2){
            plus.onclick=function(e){
                e.preventDefault();
                input.value++;
            }
            moins.onclick=function(e){
                e.preventDefault();
                if(input.value>1) input.value--;
            }
        }
        else{
            plus.onclick=function(e){
                value = input.value;
                e.preventDefault();
                input.value = value + colisage;
            }
            moins.onclick=function(e){
                value = input.value;
                e.preventDefault();
                if(input.value>1) input.value = value + colisage;
            }
        }
    };

Où est le problème ?? J'ai l'impression qu'il ne rentre jamais dans le else car, il incrémente tjr de 1. 

Merci pour votre aide.

-
Edité par FaresElWilliams1 26 août 2016 à 9:34:19

Salut,

https://jsfiddle.net/2xt9yv6b/

Moi ca marche très bien, il passe dans le else et incrémente de 15

(pense à utiliser parseInt() pour éviter que 15 + 15 = 1515 au lieu de 15 + 15 = 30)

bryan33000 a écrit:

Salut,

https://jsfiddle.net/2xt9yv6b/

Moi ca marche très bien, il passe dans le else et incrémente de 15

(pense à utiliser parseInt() pour éviter que 15 + 15 = 1515 au lieu de 15 + 15 = 30)

Moi ça ne marche pas du tout, la valeur disparaît laisse l'input d'aucune valeur..

edit : j'ai ceci qui ressort dans ma console navigateur après le clique sur un bouton. : 

The specified value "NaN" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

-
Edité par FaresElWilliams1 26 août 2016 à 10:06:41

???? Dans le JSFiddle ?? Là y'a un gros soucis, moi ça fonctionne nickel !

Tu as des erreurs dans la console?

bryan33000 a écrit:

???? Dans le JSFiddle ?? Là y'a un gros soucis, moi ça fonctionne nickel !

Tu as des erreurs dans la console?

Non j'ai repris ton code pour le mettre dans le mien et ça ne marche pas, même le +1 qui marchais avant ne marche plus la valeur dans l'input disparaît dans chaque cas.

Dans le JSFiddle ça marche très bien pourtant

-
Edité par FaresElWilliams1 26 août 2016 à 10:12:40

Ouais en gros ton erreur te dit que ce n'est pas un nombre. Mais je comprends pas comment ca peut bien fonctionneer dans le fiddle et pas dans ton fichier...

bryan33000 a écrit:

Ouais en gros ton erreur te dit que ce n'est pas un nombre. Mais je comprends pas comment ca peut bien fonctionneer dans le fiddle et pas dans ton fichier...

Je comprend pas non plus :/

Je peux voir ton code dans le fichier?

Je pense

qu'il parle de sa page

Au delà de ça, il y a plein de problèmes dans ton script.

Il est déconseillé de créer plusieurs événements comme tu le fais. Il vaut mieux que tu gères ta condition dans le gestionnaire d'événement pour ne pas dupliquer de code, ou quand c'est possible, de simplement créer une variable intermédiaire comme je l'ai fait ici pour te passer de condition tout court.

Ne re-sélectionne pas plusieurs fois tes éléments par leur id. Tu l'as fais une fois, sers-toi de ta variable.

Utilise addEventListener quand tu utilises preventDefault. Là tu mélanges les événements DOM 1 et DOM 2. Ce n'est pas standard, ça peut marcher comme ça peut créer des comportements exotiques en fonction de l'implémentation du navigateur.

N'utilise jamais onload. Si tu as un autre script qui utilise cet événement, le dernier va écraser le premier. AddEventListener permet d'avoir plusieurs événements load dans la page et de faire cohabiter plusieurs scripts.

Comme l'a dit bryan, utilise parseInt car un input renvoie une valeur de type texte. Et même si un input type number renvoyait un nombre, tu ne peux pas savoir si le navigateur gère cette balise (qui va se transformer en input text si il ne la gère pas). À noter que la façon correcte d'utiliser parseInt est de préciser la base du nombre à parser (ici on est en base 10).

N'incrémente pas directement la valeur d'un input. On ne peut pas incrémenter un texte, il faut utiliser parseInt et donc passer par une valeur intermédiaire (attention, ça n'a pas été corrigé dans le jsfiddle)

N'utilise pas d'input type number si tu crées tes propres boutons, ou modifie le comportement des boutons de l'input (risqué s'il n'est pas supporté). Là on a deux jeux de boutons, ça fait bizarre.

Quand tu utilises un attribut HTML qui n'existe pas (colisage) utilise la syntaxe data-* (data-colisage, et data-min si tu choisis de faire un input text qui ne supporte pas min)

window.addEventListener("load", function () {
  var input = document.getElementById('reassort_scan_quantite');
  var plus = document.getElementById('plus');
  var moins = document.getElementById('moins');
  var colisage = parseInt(input.getAttribute("data-colisage"), 10);
  var min = parseInt(input.getAttribute("data-min"), 10);
  var step = (min < 2) ? 1 : colisage;

  plus.addEventListener("click", function () {
    var value = parseInt(input.value, 10);
    input.value = value + step;
  });

  moins.addEventListener("click", function () {
    var value = parseInt(input.value, 10);
    input.value = (value > min) ? value - step : value;
  });
});

ConcombreRouge a écrit:

Je pense

qu'il parle de sa page

Au delà de ça, il y a plein de problèmes dans ton script.

Il est déconseillé de créer plusieurs événements comme tu le fais. Il vaut mieux que tu gères ta condition dans le gestionnaire d'événement pour ne pas dupliquer de code, ou quand c'est possible, de simplement créer une variable intermédiaire comme je l'ai fait ici pour te passer de condition tout court.

Ne re-sélectionne pas plusieurs fois tes éléments par leur id. Tu l'as fais une fois, sers-toi de ta variable.

Utilise addEventListener quand tu utilises preventDefault. Là tu mélanges les événements DOM 1 et DOM 2. Ce n'est pas standard, ça peut marcher comme ça peut créer des comportements exotiques en fonction de l'implémentation du navigateur.

N'utilise jamais onload. Si tu as un autre script qui utilise cet événement, le dernier va écraser le premier. AddEventListener permet d'avoir plusieurs événements load dans la page et de faire cohabiter plusieurs scripts.

Comme l'a dit bryan, utilise parseInt car un input renvoie une valeur de type texte. Et même si un input type number renvoyait un nombre, tu ne peux pas savoir si le navigateur gère cette balise (qui va se transformer en input text si il ne la gère pas). À noter que la façon correcte d'utiliser parseInt est de préciser la base du nombre à parser (ici on est en base 10).

N'incrémente pas directement la valeur d'un input. On ne peut pas incrémenter un texte, il faut utiliser parseInt et donc passer par une valeur intermédiaire (attention, ça n'a pas été corrigé dans le jsfiddle)

N'utilise pas d'input type number si tu crées tes propres boutons, ou modifie le comportement des boutons de l'input (risqué s'il n'est pas supporté). Là on a deux jeux de boutons, ça fait bizarre.

Quand tu utilises un attribut HTML qui n'existe pas (colisage) utilise la syntaxe data-* (data-colisage, et data-min si tu choisis de faire un input text qui ne supporte pas min)

window.addEventListener("load", function () {
  var input = document.getElementById('reassort_scan_quantite');
  var plus = document.getElementById('plus');
  var moins = document.getElementById('moins');
  var colisage = parseInt(input.getAttribute("data-colisage"), 10);
  var min = parseInt(input.getAttribute("data-min"), 10);
  var step = (min < 2) ? 1 : colisage;

  plus.addEventListener("click", function () {
    var value = parseInt(input.value, 10);
    input.value = value + step;
  });

  moins.addEventListener("click", function () {
    var value = parseInt(input.value, 10);
    input.value = (value > min) ? value - step : value;
  });
});

même erreur : 

The specified value "NaN" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

 j'ai relus mon code et quelque chose m'à interpellé,  les valeurs data-colisage et min n'existe pas au chargement de la page, peux-être que ça change quelque chose(certainement ..). 

bryan33000 a écrit:

Je peux voir ton code dans le fichier?

Le fichier JS ?  

EDIT : j'ai modifier

window.addEventListener("load", function () {

par 

$('#plus').click(function ()

et ça marche niquel ^^'

-
Edité par FaresElWilliams1 26 août 2016 à 10:59:42

Non, tu utilises un événement qui repousse l'exécution de ton code après le chargement justement pour éviter ça.

Ce que tu viens de faire n'a aucun sens.

Tu n'arriveras à rien en JS si tu copies/colles des trucs et que tu remplaces des bouts de code aveuglément.

-

Bryan veut tout voir, et moi aussi. Ton JS est dépendant de ton HTML. Depuis le début on ne voit qu'un bout de JS, on ne sait pas dans quel environnement il est exécuté.

-
Edité par tabouretBleu 26 août 2016 à 11:05:11

ConcombreRouge a écrit:

Non, tu utilises un événement qui repousse l'exécution de ton code après le chargement justement pour éviter ça.

Ce que tu viens de faire n'a aucun sens.

Tu n'arriveras à rien en JS si tu copies/colles des trucs et que tu remplaces des bouts de code aveuglément.

-

Bryan veut tout voir, et moi aussi. Ton JS est dépendant de ton HTML. Depuis le début on ne voit qu'un bout de JS, on ne sait pas dans quel environnement il est exécuté.

-
Edité par ConcombreRouge il y a moins de 30s

Mais en fait les valeurs min et colisage n'existe pas au chargement de la page c'est normal que ça ne marche pas ? 


 Pour le plaisir des yeux : 

 

{% extends 'plateforme/base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

{% block body_plateforme %}
    <div>
        <h1>
            {% if type == constant('ExtranetBundle\\Entity\\Commande::TYPE_PROMO') %}
                Commande Promo
            {% else %}
                Commande de r&eacute;assort
            {% endif %}
        </h1>
        {% if type == constant('ExtranetBundle\\Entity\\Commande::TYPE_PROMO') %}
            <p>
                {{ promo.numeroPromo }} - {{ promo.designation }} - commande du {{ promo.dateDebut|date('d/m/Y') }} au {{ promo.dateFin|date('d/m/Y') }} - Livraison du {{ promo.dateDebutLivraison|date('d/m/Y') }} au {{ promo.dateFinLivraison|date('d/m/Y') }}
            </p>
        {% endif %}
    </div>
    {% for flash_message in app.session.flashbag.get('error') %}
        <div class="row alert alert-danger" role="alert">
            {{ flash_message }}
        </div>
    {% endfor %}
    {% for flash_message in app.session.flashbag.get('success') %}
        <div class="row alert alert-success" role="alert">
            {{ flash_message }}
        </div>
    {% endfor %}
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    {{ form_start(filter_form, {'attr': {'id' : 'form-reassort', 'class' : 'form-inline'}}) }}
                        {{ form_errors(filter_form) }}

                        <div class="form-group">
                            {{ form_label(filter_form.arbo) }}
                            {{ form_errors(filter_form.arbo) }}
                            {{ form_widget(filter_form.arbo) }}
                        </div>
                        <br>
                        <div class="form-group">
                            {{ form_label(filter_form.fournisseur) }}
                            {{ form_errors(filter_form.fournisseur) }}
                            {{ form_widget(filter_form.fournisseur) }}
                        </div>

                        <div class="form-group">
                            {{ form_label(filter_form.designation) }}
                            {{ form_errors(filter_form.designation) }}
                            {{ form_widget(filter_form.designation) }}
                        </div>

                        <div class="form-group">
                            {{ form_label(filter_form.gencod) }}
                            {{ form_errors(filter_form.gencod) }}
                            {{ form_widget(filter_form.gencod) }}
                        </div>

                        <div class="form-group">
                            {{ form_label(filter_form.referenceFournisseur) }}
                            {{ form_errors(filter_form.referenceFournisseur) }}
                            {{ form_widget(filter_form.referenceFournisseur) }}
                        </div>
                        <br>
                        <div class="form-group">
                            {{ form_label(filter_form.pageLimit) }}
                            {{ form_errors(filter_form.pageLimit) }}
                            {{ form_widget(filter_form.pageLimit) }}
                        </div>
                        <div class="form-group">
                            {{ form_label(filter_form.articlesEnCommande) }}
                            {{ form_errors(filter_form.articlesEnCommande) }}
                            {{ form_widget(filter_form.articlesEnCommande) }}
                        </div>
                        <div class="form-group">
                            {{ form_label(filter_form.articlesMdd) }}
                            {{ form_errors(filter_form.articlesMdd) }}
                            {{ form_widget(filter_form.articlesMdd) }}
                        </div>

                        {% if type == constant('ExtranetBundle\\Entity\\Commande::TYPE_PROMO') %}
                            <div class="form-group hidden">
                                {{ form_label(filter_form.articlesNouveaux) }}
                                {{ form_errors(filter_form.articlesNouveaux) }}
                                {{ form_widget(filter_form.articlesNouveaux) }}
                            </div>
                            {#<div class="form-group">#}
                                {#{{ form_label(filter_form.tract) }}#}
                                {#{{ form_errors(filter_form.tract) }}#}
                                {#{{ form_widget(filter_form.tract) }}#}
                            {#</div>#}
                            {#<div class="form-group">#}
                                {#{{ form_label(filter_form.reassort) }}#}
                                {#{{ form_errors(filter_form.reassort) }}#}
                                {#{{ form_widget(filter_form.reassort) }}#}
                            {#</div>#}
                        {% else %}
                            <div class="form-group">
                                {{ form_label(filter_form.articlesNouveaux) }}
                                {{ form_errors(filter_form.articlesNouveaux) }}
                                {{ form_widget(filter_form.articlesNouveaux) }}
                            </div>
                            {#<div class="form-group hidden">#}
                                {#{{ form_label(filter_form.tract) }}#}
                                {#{{ form_errors(filter_form.tract) }}#}
                                {#{{ form_widget(filter_form.tract) }}#}
                            {#</div>#}
                            {#<div class="form-group hidden">#}
                                {#{{ form_label(filter_form.reassort) }}#}
                                {#{{ form_errors(filter_form.reassort) }}#}
                                {#{{ form_widget(filter_form.reassort) }}#}
                            {#</div>#}
                        {% endif %}
                        <div class="form-group hidden">
                            {{ form_label(filter_form.commandeType) }}
                            {{ form_errors(filter_form.commandeType) }}
                            {{ form_widget(filter_form.commandeType) }}
                        </div>
                        <div class="form-group hidden">
                            {{ form_label(filter_form.idPromo) }}
                            {{ form_errors(filter_form.idPromo) }}
                            {{ form_widget(filter_form.idPromo) }}
                        </div>
                        <div class="pull-right">
                            <a href="{{ path('plateforme_reassort') }}" class="btn btn-sm btn-default">Effacer</a>
                            <input type="submit" value="Filtrer" class="btn btn-sm btn-menu" />
                        </div>
                    {{ form_end(filter_form) }}
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="navigation col-sm-6 pull-left">
            {{ knp_pagination_render(pagination) }}
        </div>
        <div class="col-sm-6 pull-right">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="pull-left">Total</div>
                    <div class="pull-right" id="total-reassort" data-franco="{{ franco }}">
                        {% if commande %}
                            {{ commande.totalCommande|number_format }}
                        {% endif %}
                    </div>
                    <div class="alert alert-warning center-block {% if not afficherFranco %} hidden{% endif %}" id="alert-franco2">
                        <span class="glyphicon glyphicon-warning-sign"></span> Franco non atteint ({{ franco|number_format }})
                    </div>
                    {% if commande %}
                        <div class="clearfix"></div>
                        {{ render(controller('ExtranetBundle:Plateforme/Reassort:validationCommande')) }}
                    {%  endif %}
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="table-responsive">
                <table class="table table-bordered table-condensed" id="tab-reassort" data-type="{{ type }}" data-idpromo="{{ idPromo }}" data-ajax-url="{{ path('plateforme_reassort_modification') }}" data-total-url="{{ path('plateforme_reassort_total') }}" data-valid-url="{{ path('plateforme_validation_commande') }}">
                    <thead>
                        <tr>
                            <th rowspan="2">{{ knp_pagination_sortable(pagination, 'Arbo', 'sf.id') }}<span class="glyphicon glyphicon-sort"></span></th>
                            <th rowspan="2">{{ knp_pagination_sortable(pagination, 'Fournisseur', 'fc.nom') }}<span class="glyphicon glyphicon-sort"></span></th>
                            <th rowspan="2">{{ knp_pagination_sortable(pagination, 'Désignation produit', 'a.nom') }}<span class="glyphicon glyphicon-sort"></span></th>
                            <th>{{ knp_pagination_sortable(pagination, 'Code-barres', 'g.codeBarre') }}<span class="glyphicon glyphicon-sort"></span></th>
                            <th>{{ knp_pagination_sortable(pagination, 'Reférence Fou', 'ap.referenceFournisseur') }}<span class="glyphicon glyphicon-sort"></span></th>
                            <th>Colisage /<br />Qté par pal.</th>
                            <th>Date de d&eacute;but</th>
                            <th>Date de d&eacute;but</th>
                            <th rowspan="2">Taux TVA</th>
                            <th rowspan="2">PV Cons</th>
                            <th>Qt&eacute;</th>
                            <th rowspan="2">Mt HT</th>
                            <th rowspan="2">Informations</th>
                        </tr>
                        <tr>
                            <th>Code Centrale</th>
                            <th>Ref&eacute;rence GV</th>
                            <th>Mini. commande</th>
                            <th>PA HT Actuel</th>
                            {% if type == constant('ExtranetBundle\\Entity\\Commande::TYPE_PROMO') %}
                                <th>PA HT Promo</th>
                            {%  else %}
                                <th>PA HT Futur</th>
                            {% endif %}
                            <th>Stock<br>théo.</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for article in pagination %}
                            <tr class="ligne-article">
                                <td rowspan="2">
                                    {{ article.sousFamille.id }}<br>
                                    {% if article.articlePlateforme|first.isNouveaute %}
                                        <span class="glyphicon glyphicon-asterisk"></span>
                                    {% endif %}
                                    {%  if article.marque and article.marque.mdd %}
                                        <strong>MDD</strong>
                                    {% endif %}
                                </td>
                                <td rowspan="2">{{ article.articlePlateforme|first.fournisseurCommun.nom }}</td>
                                <td rowspan="2">{{ article.nom }}{% if type == constant('ExtranetBundle\\Entity\\Commande::TYPE_PROMO') %}{% if article.articlePlateforme|first.prixPromo|first.offreComplementaire %}<br><span title="Offre Complémentaire" style="font-weight: bold;">(OC)</span>{% endif %}{% endif %}</td>
                                <td>{{ article.articleGencod|first.gencod.codeBarreComplet }}</td>
                                <td>{{ article.articlePlateforme|first.referenceFournisseur }}</td>
                                <td>{{ article.articlePlateforme|first.colisage }}{% if article.articlePlateforme|first.qtePalette > 0 %} / {{ article.articlePlateforme|first.qtePalette }}{% endif %}</td>
                                <td>
                                    {%  if article.articlePlateforme|first.prixActuelsAffichage|length > 0 %}{{ article.articlePlateforme|first.prixActuelsAffichage|first.dateDebut|date('d/m/Y') }}{% endif %}
                                    {% if not article.conditionnementUnitaire %}<br>{{ article.uniteAchatComplete }}{% endif %}
                                </td>
                                <td>
                                    {% if type == constant('ExtranetBundle\\Entity\\Commande::TYPE_PROMO') %}
                                        {% if article.articlePlateforme|first.prixPromosAffichage|length > 0 %}{{ article.articlePlateforme|first.prixPromosAffichage|first.dateDebut|date('d/m/Y') }}{% endif %}
                                    {% else %}
                                        {% if article.articlePlateforme|first.prixFutursAffichage|length > 0 %}{{ article.articlePlateforme|first.prixFutursAffichage|first.dateDebut|date('d/m/Y') }}{% endif %}
                                    {% endif %}
                                </td>
                                <td rowspan="2">{{ article.tauxTva.taux }}</td>
                                <td rowspan="2">
                                    {% if type == constant('ExtranetBundle\\Entity\\Commande::TYPE_PROMO') %}
                                        {% if article.articlePlateforme|first.prixPromosAffichage|length > 0 %}
                                            {{ article.articlePlateforme|first.prixPromosAffichage|first.prixVenteConseille|number_format }}
                                        {% endif %}
                                    {% else %}
                                        {{ article.prixVenteConseille }}
                                     {% endif %}
                                    {% if not article.conditionnementUnitaire %}<br>{{ article.uniteVenteComplete }}{% endif %}
                                </td>
                                <td>
                                    <input class="qte" type="text" data-id="{{ article.id }}" data-min-cde="{{ article.articlePlateforme|first.minimumCommande }}" data-colisage="{{ article.articlePlateforme|first.colisage }}" data-decolisage="{{ app.user.plateforme.pourcentageDecolisage }}"{% if commande and article.id in commande.details|keys %} value="{{ commande.details[article.id].quantite }}"{% endif %} title="Quantité à commander">
                                </td>
                                <td rowspan="2">
                                    {% if commande and article.id in commande.details|keys %}
                                        {{ commande.details[article.id].totalLigne }}
                                    {% else %}
                                        0.00
                                    {% endif %}
                                </td>
                                <td rowspan="2">
                                    {% set url = article.urlPhoto %}
                                    {% if url %}
                                        <a class="fancybox-effects-c" href="{{ url }}"><img src="{{ url }}" alt="Photo"/></a><br>
                                    {% endif %}
                                    {% set url_fds = article.urlFicheSecurite %}
                                    {% if url_fds %}
                                        <a href="{{ url_fds }}" target="_blank">Fiche de s&eacute;curit&eacute;</a>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td>{{ article.id }}</td>
                                <td>{{ article.articlePlateforme|first.codeProduitGv }}</td>
                                <td>
                                    {%  if article.articlePlateforme|first.prixActuelsAffichage|length > 0 %}
                                        {% if article.articlePlateforme|first.prixActuelsAffichage|first.quantiteMinimum %}
                                            {{ article.articlePlateforme|first.prixActuelsAffichage|first.quantiteMinimum }}
                                        {% else %}
                                            {{article.articlePlateforme|first.minimumCommande }}
                                        {% endif %}
                                    {% else %}
                                        {{article.articlePlateforme|first.minimumCommande }}
                                    {% endif %}
                                </td>
                                <td>
                                    {%  if article.articlePlateforme|first.prixActuelsAffichage|length > 0 %}
                                        {{ article.articlePlateforme|first.prixActuelsAffichage|first.prixNet|number_format }}
                                        {% if article.articlePlateforme|first.prixActuelsAffichage|length > 1 %}
                                            <span class="glyphicon glyphicon-triangle-bottom aff-prix-supp" id="aff-prix-supp-{{ article.id }}"></span>
                                        {% endif %}
                                    {% endif %}
                                </td>
                                <td>
                                    {% if type == constant('ExtranetBundle\\Entity\\Commande::TYPE_PROMO') %}
                                        {% if article.articlePlateforme|first.prixPromosAffichage|length > 0 %}
                                            {{ article.articlePlateforme|first.prixPromosAffichage|first.prixNet|number_format }}
                                        {% endif %}
                                        {% if article.articlePlateforme|first.prixPromosAffichage|length > 1 %}
                                            <span class="glyphicon glyphicon-triangle-bottom aff-prix-supp-promo" id="aff-prix-supp-promo-{{ article.id }}"></span>
                                        {% endif %}
                                    {% else %}
                                        {% if article.articlePlateforme|first.prixFutursAffichage|length > 0 %}
                                            {{ article.articlePlateforme|first.prixFutursAffichage|first.prixNet|number_format }}
                                        {% endif %}
                                        {% if article.articlePlateforme|first.prixFutursAffichage|length > 1 %}
                                            <span class="glyphicon glyphicon-triangle-bottom aff-prix-supp-futur" id="aff-prix-supp-futur-{{ article.id }}"></span>
                                        {% endif %}
                                    {% endif %}
                                </td>
                                <td>
                                    {{article.articlePlateforme|first.stock }}
                                </td>
                            </tr>
                            {% for prix_actuel in article.articlePlateforme|first.prixActuelsAffichage|slice(1) %}
                                <tr class="prix-supp prix-supp-{{ article.id }}">
                                    <td colspan="5" class="prix-supp-filler"></td>
                                    <td>
                                        {% if prix_actuel.quantiteMinimum %}
                                            {{ prix_actuel.quantiteMinimum }}
                                        {% else %}
                                            {{article.articlePlateforme|first.minimumCommande }}
                                        {% endif %}
                                    </td>
                                    <td>{{ prix_actuel.prixNet|number_format }}</td>
                                </tr>
                            {% endfor %}
                            {% for prix_futur in article.articlePlateforme|first.prixFutursAffichage|slice(1) %}
                                <tr class="prix-supp prix-supp-futur-{{ article.id }}">
                                    <td colspan="5" class="prix-supp-filler"></td>
                                    <td>
                                        {% if prix_futur.quantiteMinimum %}
                                            {{ prix_futur.quantiteMinimum }}
                                        {% else %}
                                            {{article.articlePlateforme|first.minimumCommande }}
                                        {% endif %}
                                    </td>
                                    <td></td>
                                    <td>{{ prix_futur.prixNet|number_format }}</td>
                                </tr>
                            {% endfor %}
                            {% for prix_promo in article.articlePlateforme|first.prixPromosAffichage|slice(1) %}
                                <tr class="prix-supp prix-supp-{{ article.id }}">
                                    <td colspan="5" class="prix-supp-filler"></td>
                                    <td>
                                        {% if prix_promo.quantiteMinimum %}
                                            {{ prix_promo.quantiteMinimum }}
                                        {% else %}
                                            {{article.articlePlateforme|first.minimumCommande }}
                                        {% endif %}
                                    </td>
                                    <td>{{ prix_promo.prixNet|number_format }}</td>
                                </tr>
                            {% endfor %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 pull-left">
            <a id="export-csv" class="btn btn-sm btn-menu" href="{{ path('plateforme_reassort_generationcsv') }}" title="Exporte les articles filtrés au format CSV">Export CSV</a>
            <a id="export-excel" class="btn btn-sm btn-menu" href="{{ path('plateforme_reassort_generationexcel') }}" title="Exporte les articles filtrés au format Excel">Export Excel</a>
            <a id="import-csv" class="btn btn-sm btn-menu btn-importer-csv" title="Importe dans la commande en cours les articles d'un fichier CSV (gencod;quantité)">Import CSV</a>
            <button class="btn btn-sm btn-menu" data-toggle="modal" data-target="#ModalScan">Scanner code-barres</button><br/>
            {{ pagination.getTotalItemCount }} article(s) trouv&eacute;(s)
        </div>
        <div class="col-sm-6 pull-right">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="pull-left">Total</div>
                    <div class="pull-right" id="total-reassort2" data-franco="{{ franco }}">
                        {% if commande %}
                           {{ commande.totalCommande|number_format }}
                        {% endif %}
                    </div>
                    <div class="alert alert-warning center-block{% if not afficherFranco %} hidden{% endif %}" id="alert-franco">
                        <span class="glyphicon glyphicon-warning-sign"></span> Franco non atteint ({{ franco|number_format }})
                    </div>
                    {% if commande %}
                        <div class="clearfix"></div>
                        {{ render(controller('ExtranetBundle:Plateforme/Reassort:validationCommande')) }}
                    {%  endif %}
                </div>
            </div>
        </div>
        <div class="navigation col-sm-6 pull-left">
            {{ knp_pagination_render(pagination) }}
        </div>
    </div>

    <div id="ModalScan" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                     Scannez les codes-barres à ajouter à la commande.
                </div>
                <div class="modal-body" style="height: 214px;">
                    <br/>
                    {{ form_start(scan_form, {'attr': {'id' : 'scan-reassort', 'class' : 'form-inline'}}) }}
                        {{ form_label(scan_form.gencode) }}
                        {{ form_errors(scan_form.gencode) }}
                        {{ form_widget(scan_form.gencode, {'attr': {'onkeyup': 'showHint(this.value)'} }) }}
                        <br><label>Designation : </label><span id="designationModal" style="padding-left: 20px;"></span><br>
                        <br><label>Prix unitaire : </label><span id="prixModal" style="padding-left: 20px;"></span><br>
                        <br><label>Colisage : </label><span id="colisageModal" style="padding-left: 40px;"></span><br>
                        {{ form_label(scan_form.quantite) }}
                        {{ form_errors(scan_form.quantite) }}
                        {{ form_widget(scan_form.quantite, {'attr': {'min': '','value': ''}})}}
                        &nbsp;<a href="#ajout" id="plus"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>&nbsp;&nbsp;<a href="#moins" id="moins"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></a><br/><br/>
                    {{ form_rest(scan_form) }}
                    {{ form_end(scan_form) }}
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-menu" value="Valider">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> Veuillez patienter pendant la génération du fichier.</h4>
                </div>
                <div class="modal-body">
                    <br/><br/><br/><br/><br/><center><div class="loader"></div></center>
                </div>
            </div>
        </div>
    </div>

    {{ render(controller('ExtranetBundle:Plateforme/Reassort:importCsv')) }}
{% endblock %}

regex_nombre_entier = new RegExp('^[0-9]*$');

/**
 * Formate un nombre en l'arrondissant au nombre de décimales et avec le séparateur de milliers spécifiés
 * @this {Number}
 * @param {number} decimal Nombre de décimales à afficher
 * @param {string} separateur Séparateur de milliers
 * @return {string} Le nombre formaté
 * @example
 * var nombre = 1000000 / 3
 * var affich = (nombre).format(2, " ")
 * alert(affich) // Affiche '333 333.33'
 */
Number.prototype.format = function(decimal, separateur) {
    var valeur = this;
    var deci = Math.round( Math.pow(10, decimal) * (Math.abs(valeur) - Math.floor(Math.abs(valeur))));
    var val = Math.floor(Math.abs(valeur));
    if ((decimal == 0) || (deci == Math.pow(10, decimal))){
        val = Math.floor(Math.abs(valeur)); deci = 0;
    }
    var val_format = val + "";
    var nb = val_format.length;
    for (var i = 1; i < 4; i++){
        if (val >= Math.pow(10, (3 * i))) {
            val_format = val_format.substring(0, nb - (3 * i)) + separateur + val_format.substring(nb - (3 * i));
        }
    }
    if (decimal > 0){
        var decim = "";
        for (var j = 0; j < (decimal - deci.toString().length); j++){
            decim += "0";
        }
        deci = decim+deci.toString();
        val_format = val_format + "." + deci;
    }
    if (parseFloat(valeur) < 0){
        val_format = "-" + val_format;
    }
    return val_format;
};

$(document).ready(function() {
    // Tooltips
    $('[data-toggle="tooltip"]').tooltip();

    // Icônes de tri
    var tabTriAsc = document.getElementsByClassName('asc');
    for (var i = 0; i < tabTriAsc.length; i++){
        tabTriAsc[i].parentNode.lastChild.className = 'glyphicon glyphicon-chevron-up';
    }

    var tabTriDesc = document.getElementsByClassName('desc');
    for (var j = 0; j < tabTriDesc.length; j++){
        tabTriDesc[j].parentNode.lastChild.className = 'glyphicon glyphicon-chevron-down';
    }

    // Accueil
    // Accès aux promos
    $('#liste-promos').find('tr').click(function(){
        this.firstElementChild.firstChild.click()
    });

    // Reassort
    // Affichage des prix supplémentaires
    $('.aff-prix-supp').click(function(){
        var idProduit = this.id.substr(14);
        if (this.classList.contains('glyphicon-triangle-bottom')){
            this.classList.remove('glyphicon-triangle-bottom');
            this.classList.add('glyphicon-triangle-top');
        } else {
            this.classList.remove('glyphicon-triangle-top');
            this.classList.add('glyphicon-triangle-bottom');
        }
        $('.prix-supp-' + idProduit).each(function (){
            if (this.style.display == 'table-row'){
                this.style.display = 'none';
            } else {
                this.style.display = 'table-row';
            }
        });
    });
    $('.aff-prix-supp-futur').click(function(){
        var idProduit = this.id.substr(20);
        if (this.classList.contains('glyphicon-triangle-bottom')){
            this.classList.remove('glyphicon-triangle-bottom');
            this.classList.add('glyphicon-triangle-top');
        } else {
            this.classList.remove('glyphicon-triangle-top');
            this.classList.add('glyphicon-triangle-bottom');
        }
        $('.prix-supp-futur-' + idProduit).each(function (){
            if (this.style.display == 'table-row'){
                this.style.display = 'none';
            } else {
                this.style.display = 'table-row';
            }
        });
    });
    // Modification des quantites
    $('.qte')
        .focus(function(){
            this.defaultValue = this.value;
        })
        .change(function(){
            var self = this;

            if (!regex_nombre_entier.test($(this).val())){
                setTimeout(function(){$(self).focus();},5);
                this.value = this.defaultValue;
            } else {
                if (Number(this.value) < Number(this.getAttribute('data-min-cde')) && Number(this.value) > 0) {
                    alert('La quantité minimale de commande est de ' + this.getAttribute('data-min-cde'));
                    setTimeout(function () {
                        $(self).focus();
                    }, 5);
                    this.value = this.defaultValue;
                } else if (Number(this.getAttribute('data-colisage')) <= Number(this.getAttribute('data-min-cde')) && Number(this.value) % Number(this.getAttribute('data-colisage')) != 0 && Number(this.getAttribute('data-min-cde')) != 1) {
                    alert('La quantité doit être un multiple du colisage de ' + this.getAttribute('data-colisage'));
                    setTimeout(function () {
                        $(self).focus();
                    }, 5);
                    this.value = this.defaultValue;
                } else if (Number(this.getAttribute('data-colisage')) > Number(this.getAttribute('data-min-cde')) && Number(this.value) % Number(this.getAttribute('data-min-cde')) != 0 && Number(this.getAttribute('data-min-cde')) != 1) {
                    alert('La quantité doit être un multiple du minimum de commande ' + this.getAttribute('data-min-cde'));
                    setTimeout(function () {
                        $(self).focus();
                    }, 5);
                    this.value = this.defaultValue;
                } else if (Number(this.value) % Number(this.getAttribute('data-colisage')) >= Number(this.getAttribute('data-decolisage')) * Number(this.getAttribute('data-colisage')) / 100
                    && Number(this.getAttribute('data-min-cde')) == 1) {
                    alert('Le décolisage n\'est autorisé qu\'en dessous de ' + this.getAttribute('data-decolisage') + '% du colisage de ' + Number(this.getAttribute('data-colisage')));
                    setTimeout(function () {
                        $(self).focus();
                    }, 5);
                    this.value = this.defaultValue;
                } else {
                    $.ajax({
                        async: false,
                        type: 'POST',
                        url: document.getElementById('tab-reassort').getAttribute('data-ajax-url'),
                        data: {codeProduit: this.getAttribute('data-id'), quantite: (self.value == '' ? 0 : self.value), type: document.getElementById('tab-reassort').getAttribute('data-type'), idPromo: document.getElementById('tab-reassort').getAttribute('data-idpromo')},
                        success: function(response){
                            self.parentNode.nextElementSibling.innerHTML = Number(response).format(2, ' ');
                            $.ajax({
                                async: false,
                                type: 'GET',
                                url: document.getElementById('tab-reassort').getAttribute('data-total-url'),
                                success: function(response){
                                    document.getElementById('total-reassort').innerHTML = Number(response).format(2, ' ');
                                    document.getElementById('total-reassort2').innerHTML = Number(response).format(2, ' ');
                                    var validModal = document.getElementById('valid-cde-modal');
                                    var divFranco = document.getElementById('alert-franco');
                                    if (Number(response) == 0){
                                        if (validModal){
                                            validModal.parentNode.removeChild(validModal.previousElementSibling);
                                            validModal.parentNode.removeChild(validModal);
                                        }
                                        if (divFranco){
                                            divFranco.parentNode.removeChild(divFranco);
                                        }
                                    } else {
                                        var franco = document.getElementById('total-reassort').getAttribute('data-franco');
                                        if (Number(response) < Number(franco)){
                                            $('#alert-franco').removeClass('hidden');
                                            $('#alert-franco2').removeClass('hidden');
                                        } else {
                                            $('#alert-franco').addClass('hidden');
                                            $('#alert-franco2').addClass('hidden');
                                        }
                                        if (!validModal){
                                            $.ajax({
                                                async: false,
                                                type: 'GET',
                                                url: document.getElementById('tab-reassort').getAttribute('data-valid-url'),
                                                success: function(response){
                                                    document.getElementById('total-reassort').parentNode.innerHTML += response;
                                                }
                                            })
                                        }
                                    }
                                }
                            });
                        }
                    });
                }
            }
        })
    ;
    // hack ie largeur formulaire
    if (navigator.userAgent.match(/Trident/i) != null || navigator.userAgent.match(/MSIE/i) != null){
        if (document.getElementById('reassort_filter_designation')){
            document.getElementById('reassort_filter_designation').style.width = "168px";
        }
    }
    // Validation de la commande
    $('#form-validation').submit(function(){
        $('#valid-cde-modal')
            .find('.modal-body-main').hide()
            .find('.modal-body-submit').show()
            .find('.modal-footer button').attr('disabled', true)
            .find('.modal-footer input').attr('disabled', true)
        ;
    });
    //Export CSV
    $('#export-csv').click(function(){
       this.href = this.href + location.search
    });

    //Export Excel
    $('#export-excel').click(function(){
        this.href = this.href + location.search;
        var x = this.href + location.search;
        $.ajax({
            url: x,
            beforeSend: function() {
                $('#myModal').modal('show');
            },
            statusCode:{
                500: function(){
                    //Error PHP
                },
                404: function(){
                    //Erreur dans ta route
                },
                200: function(){
                    $('#myModal').modal('hide');
                }
            }
        });
    });

    // Liste intelligentes
    $('.select2').select2();

    // Historique
    // Accès au détail
    $('#tab-historique').find('tr').click(function(e){
        if (e.target.nodeName.toLowerCase() != 'button'){
            this.firstElementChild.firstChild.click()
        }
    });
    // Continuer une commande
    $('.btn-continuer-cde').click(function(){
        $('input[name="form_continuer[idCommande]"]').val(this.getAttribute('data-id'));
        $('#continuer-cde-modal').modal();
    });
    $('#form-continuer').submit(function(){
        $('#continuer-cde-modal')
            .find('.modal-footer button').attr('disabled', true)
            .find('.modal-footer input').attr('disabled', true)
        ;
    });
    // Dupliquer une commande
    $('.btn-dupliquer-cde').click(function(){
        $('input[name="form_dupliquer[idCommande]"]').val(this.getAttribute('data-id'));
        $('#dupliquer-cde-modal').modal();
    });
    $('#form-dupliquer').submit(function(){
        $('#dupliquer-cde-modal')
            .find('.modal-footer button').attr('disabled', true)
            .find('.modal-footer input').attr('disabled', true)
        ;
    });
    // Devalider une commande
    $('.btn-devalider-cde').click(function(){
        $('input[name="form_devalider[idCommande]"]').val(this.getAttribute('data-id'));
        $('#devalider-cde-modal').modal();
    });
    $('#form-devalider').submit(function(){
        $('#devalider-cde-modal')
            .find('.modal-footer button').attr('disabled', true)
            .find('.modal-footer input').attr('disabled', true);
    });
    // Supprimer une commande
    $('.btn-supprimer-cde').click(function(){
        $('input[name="form_supprimer[idCommande]"]').val(this.getAttribute('data-id'));
        $('#supprimer-cde-modal').modal();
    });
    $('#form-supprimer').submit(function(){
        $('#supprimer-cde-modal')
            .find('.modal-footer button').attr('disabled', true)
            .find('.modal-footer input').attr('disabled', true);
    });
    //Importer CSV
    $('#import-csv').click(function(){
        $('#importer-csv-modal').modal();
    });
    ///Fancybox - zoom sur les images du réassort
    $(document).ready(function() {
        $(".fancybox-effects-c").fancybox({
            wrapCSS    : 'fancybox-custom',
            closeClick : true,

            openEffect : 'none',

            helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    css : {
                        'background' : 'rgba(238,238,238,0.85)'
                    }
                }
            }
        });
    });
    $('#plus').click(function () {
        var input = document.getElementById('reassort_scan_quantite');
        var plus = document.getElementById('plus');
        var moins = document.getElementById('moins');
        var colisage = parseInt(input.getAttribute("data-colisage"), 10);
        var min = parseInt(input.getAttribute("min"), 10);
        var step = (min < 2) ? 1 : colisage;

        plus.addEventListener("click", function () {
            var value = parseInt(input.value, 10);
            input.value = value + step;
        });

        moins.addEventListener("click", function () {
            var value = parseInt(input.value, 10);
            input.value = (value > min) ? value - step : value;
        });
    });
    $('#moins').click(function () {
        var input = document.getElementById('reassort_scan_quantite');
        var plus = document.getElementById('plus');
        var moins = document.getElementById('moins');
        var colisage = parseInt(input.getAttribute("data-colisage"), 10);
        var min = parseInt(input.getAttribute("min"), 10);
        var step = (min < 2) ? 1 : colisage;

        plus.addEventListener("click", function () {
            var value = parseInt(input.value, 10);
            input.value = value + step;
        });

        moins.addEventListener("click", function () {
            var value = parseInt(input.value, 10);
            input.value = (value > min) ? value - step : value;
        });
    });
});
function showHint(str) {
    if (str.length == 13) {
        $.ajax({
            url: 'http://localhost/sf/web/extranet_dev.php/plateforme/reassort_scan/'+str,
            method: "POST",
            dataType: "json",
            success: function(json){
                var nom = json.nom;
                var prix = json.prix;
                var colisage = json.colisage;
                var miniCommande = json.minicommande;
                document.getElementById("designationModal").innerHTML = nom;
                document.getElementById("prixModal").innerHTML = prix;
                document.getElementById("colisageModal").innerHTML = colisage;
                document.getElementById("reassort_scan_quantite").setAttribute("min", miniCommande);
                document.getElementById('reassort_scan_quantite').setAttribute("value", miniCommande);
                document.getElementById("reassort_scan_quantite").setAttribute("data-colisage", colisage);
            }
        });
    }
}

en fait je m'excuse mais ça ne marche pas effectivement je n'arriverais à rien en copie collant des trucs bêtement..

-
Edité par FaresElWilliams1 26 août 2016 à 12:11:09

Bon là tu as peut-être exagéré sur la quantité de code

Juste la partie qui concerne ton input et tes boutons en HTML et la partie qui concerne la même chose en JS aurait suffi

On n'étais pas obligé de voir le code côté serveur XD enfin c'est pas grave

Mais là effectivement si tu génères le code en AJAX c'est sûr que l'événement load ne ert à rien. Il faut attribuer tes événements après avoir modifié le DOM, pas avant.

Pense à créer des fonctions. Là tu imbriques des conditions dans des conditions dans des requêtes ajax dans d'autres requêtes ajax dans d'autres conditions... tu as même un $(document).ready à l'intérieur d'un $(document).ready... c'est un peu le bordel, je ne sais pas comment tu peux t'y retrouver. découpe ton code en actions et crée une fonction par action (enfin pour tes prochains projets, sauf si tu es assez maso pour tout réécrire). Là je te conseille de faire une fonction, plusClick et moinsClick par exemple, en dehors de ta requête AJAX, et d'attribuer l'événement dans le succes de la requête ajax. C'est ça qu'il faudrait faire la plupart du temps quand tu as des imbrications de code.

Si non, choisis ton camps, tu mélange du jQuery avec du JS natif, ça n'aide pas à rendre les choses plus claires.

bryan33000 a écrit:

Bon là tu as peut-être exagéré sur la quantité de code

Juste la partie qui concerne ton input et tes boutons en HTML et la partie qui concerne la même chose en JS aurait suffi

Effectivement xD 

<div id="ModalScan" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                     Scannez les codes-barres à ajouter à la commande.
                </div>
                <div class="modal-body" style="height: 214px;">
                    <br/>
                    {{ form_start(scan_form, {'attr': {'id' : 'scan-reassort', 'class' : 'form-inline'}}) }}
                        {{ form_label(scan_form.gencode) }}
                        {{ form_errors(scan_form.gencode) }}
                        {{ form_widget(scan_form.gencode, {'attr': {'onkeyup': 'showHint(this.value)'} }) }}
                        <br><label>Designation : </label><span id="designationModal" style="padding-left: 20px;"></span><br>
                        <br><label>Prix unitaire : </label><span id="prixModal" style="padding-left: 20px;"></span><br>
                        <br><label>Colisage : </label><span id="colisageModal" style="padding-left: 40px;"></span><br>
                        {{ form_label(scan_form.quantite) }}
                        {{ form_errors(scan_form.quantite) }}
                        {{ form_widget(scan_form.quantite, {'attr': {'min': '','value': ''}})}}
                        &nbsp;<a href="#ajout" id="plus"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>&nbsp;&nbsp;<a href="#moins" id="moins"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></a><br/><br/>
                    {{ form_rest(scan_form) }}
                    {{ form_end(scan_form) }}
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-menu" value="Valider">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

function showHint(str) {
    if (str.length == 13) {
        $.ajax({
            url: 'http://localhost/sf/web/extranet_dev.php/plateforme/reassort_scan/'+str,
            method: "POST",
            dataType: "json",
            success: function(json){
                var nom = json.nom;
                var prix = json.prix;
                var colisage = json.colisage;
                var miniCommande = json.minicommande;
                document.getElementById("designationModal").innerHTML = nom;
                document.getElementById("prixModal").innerHTML = prix;
                document.getElementById("colisageModal").innerHTML = colisage;
                document.getElementById("reassort_scan_quantite").setAttribute("min", miniCommande);
                document.getElementById('reassort_scan_quantite').setAttribute("value", miniCommande);
                document.getElementById("reassort_scan_quantite").setAttribute("data-colisage", colisage);
            }
        });
    }
}

    $('#plus').click(function () {
        var input = document.getElementById('reassort_scan_quantite');
        var plus = document.getElementById('plus');
        var moins = document.getElementById('moins');
        var colisage = parseInt(input.getAttribute("data-colisage"), 10);
        var min = parseInt(input.getAttribute("min"), 10);
        var step = (min < 2) ? 1 : colisage;

        plus.addEventListener("click", function () {
            var value = parseInt(input.value, 10);
            input.value = value + step;
        });

        moins.addEventListener("click", function () {
            var value = parseInt(input.value, 10);
            input.value = (value > min) ? value - step : value;
        });
    });
    $('#moins').click(function () {
        var input = document.getElementById('reassort_scan_quantite');
        var plus = document.getElementById('plus');
        var moins = document.getElementById('moins');
        var colisage = parseInt(input.getAttribute("data-colisage"), 10);
        var min = parseInt(input.getAttribute("min"), 10);
        var step = (min < 2) ? 1 : colisage;

        plus.addEventListener("click", function () {
            var value = parseInt(input.value, 10);
            input.value = value + step;
        });

        moins.addEventListener("click", function () {
            var value = parseInt(input.value, 10);
            input.value = (value > min) ? value - step : value;
        });
    });

déjà plus clair. 

le soucis maintenant c'est qu'avec un min de 1 (il devrais augmenter de 1 donc)
il fais 5, 13, 27, 43

en gros ça ne marche plus du tout x)

le soucis avec ce code c'est que je n'ai quasiment rien écrit c'est du code écrit la quasi totalité par mon prédécesseur en entreprise et mon boulot n'est pas de le réécrire complètement (et je suis pas dev JS aussi x)) 

-
Edité par FaresElWilliams1 26 août 2016 à 11:54:54

+1 ConcombreRouge!

Et pense à commenter ton code aussi, tant pour toi que pour les autres, c'est beaucoup plus compréhensible!

Pour le coup, je plussoie le coup des fonctions, ca permet beaucoup plus de clarté dans ton code et en plus ca te permet aussi de les réutiliser ailleurs sans réécrire ton onclick

bryan33000 a écrit:

+1 ConcombreRouge!

Et pense à commenter ton code aussi, tant pour toi que pour les autres, c'est beaucoup plus compréhensible!

Pour le coup, je plussoie le coup des fonctions, ca permet beaucoup plus de clarté dans ton code et en plus ca te permet aussi de les réutiliser ailleurs sans réécrire ton onclick

J'ai commencer la documentation de plus de 1000 pages php & symfony j'ai clairement pas pensé au JS (c'est plus de boulot de commenter que de produire du code j'ai l'impression).

Et dis toi que je bosse pour une filiale de la plus grosse compagnie européenne dans notre niche métier et que le code date des année 90-2000 et que je suis quasiment le seul dev 

-
Edité par FaresElWilliams1 26 août 2016 à 12:08:28

Ouais j'entends ca va pas être de la tarte...

Mais du coup, tu as pas le code généré par le vanigateur plutôt pour le HTML? Parce que du coup impossible de créer un fiddle correct qui reprends bien les inputs et tout (j'ai pas envie de me jouer la vie )

FaresElWilliams1 a écrit:

bryan33000 a écrit:

Ouais j'entends ca va pas être de la tarte...

Mais du coup, tu as pas le code généré par le vanigateur plutôt pour le HTML? Parce que du coup impossible de créer un fiddle correct qui reprends bien les inputs et tout (j'ai pas envie de me jouer la vie )

<form name="reassort_scan" method="post" id="scan-reassort" class="form-inline">
       <label class="control-label required" for="reassort_scan_gencode">Code-barres</label>
                        
       <input type="text" id="reassort_scan_gencode" name="reassort_scan[gencode]" required="required" onkeyup="showHint(this.value)" class="form-control">
       <br><label>Designation : </label><span id="designationModal" style="padding-left: 20px;">FILM DE PAILLAGE FRAISES FRESAFILM 1M40X10M</span><br>
       <br><label>Prix unitaire : </label><span id="prixModal" style="padding-left: 20px;">4.970</span><br>
       <br><label>Colisage : </label><span id="colisageModal" style="padding-left: 40px;">12</span><br>
       <label class="control-label required" for="reassort_scan_quantite">Quantité</label>
                        
       <input type="number" id="reassort_scan_quantite" name="reassort_scan[quantite]" required="required" min="1" value="1" class="form-control" data-colisage="12">
       &nbsp;<a href="#ajout" id="plus"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>&nbsp;&nbsp;<a href="#moins" id="moins"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></a><br><br>
       <div class="form-group"><button type="submit" id="reassort_scan_ajouter" name="reassort_scan[ajouter]" class="btn-default btn">Ajouter</button></div><input type="hidden" id="reassort_scan__token" name="reassort_scan[_token]" class="form-control" value="eYnHl8cwLNU6KHmYpwrdVy3SbkBumAC6RoiA15yAQI8">
</form>

désolé les valeurs min, prix unitaire, designation et colisage sont récupérér grâce au js depuis des entité symfony 

-
Edité par FaresElWilliams1 il y a moins de 5s

-
Edité par FaresElWilliams1 26 août 2016 à 12:22:52

Vu que tu utilises le jQuery je t'ai fait ça en jQuery

https://jsfiddle.net/83hsz2L0/

Tu fais encore des trucs qui n'ont pas de sens.

Dans ton $("#plus").click tu fais un plus.addEventListener ?

De plus, tu n'as toujours pas attribué tes événements au bon moment. Ton code $("#plus") et $("#moins") est certes exécuté après $.ajax,  mais rappelle-toi que $.ajax est asynchrone, donc le code à l'intérieur de ton success est appliqué après.

Aussi, je ne vois pas l'intérêt de récupérer des valeurs dans un attribut si c'est toi qui les a mis dans cet attribut avant. C'est inutile. Tout autant que sélectionner plusieurs fois la même chose.

Je pense que le plus propre vu les circonstances ce serait ça

function reassort_scan_quantite_success(json) {
  var colisage = parseInt(json.colisage, 10);
  var min = parseInt(miniCommande, 10);
  var step = (min < 2) ? 1 : colisage;
  
  $("#designationModal").html(json.nom);
  $("#prixModal").html(json.prix);
  $("#colisageModal").html(colisage);

  var $input = $('#reassort_scan_quantite');
  $input.attr({"value": min, "min": min});

  $('#plus').click(function () {
    var value = parseInt($input.val(), 10);
    $input.val(value + step);
  });
  $('#moins').click(function () {
    var value = parseInt($input.val(), 10);
    value = (value > min) ? value - step : value;
    $input.val(value);
  });
}

function showHint(str) {
  if (str.length == 13) {
    $.ajax({
      url: 'http://localhost/sf/web/extranet_dev.php/plateforme/reassort_scan/'+str,
      method: "POST",
      dataType: "json",
      success: reassort_scan_quantite_success
    });
  }
}

Ici les fonctions plus et moins était trop courtes pour avoir besoin d'être sorties, mais tu peux te dire en gros que dès que tu commences à avoir de fortes indentations c'est qu'il y a un problème.

ConcombreRouge a écrit:

Tu fais encore des trucs qui n'ont pas de sens.

Dans ton $("#plus").click tu fais un plus.addEventListener ?

De plus, tu n'as toujours pas attribué tes événements au bon moment. Ton code $("#plus") et $("#moins") est certes exécuté après $.ajax,  mais rappelle-toi que $.ajax est asynchrone, donc le code à l'intérieur de ton success est appliqué après.

Aussi, je ne vois pas l'intérêt de récupérer des valeurs dans un attribut si c'est toi qui les a mis dans cet attribut avant. C'est inutile. Tout autant que sélectionner plusieurs fois la même chose.

Je pense que le plus propre vu les circonstances ce serait ça

function reassort_scan_quantite_success(json) {
  var colisage = parseInt(json.colisage, 10);
  var min = parseInt(miniCommande, 10);
  var step = (min < 2) ? 1 : colisage;
  
  $("#designationModal").html(json.nom);
  $("#prixModal").html(json.prix);
  $("#colisageModal").html(colisage);

  var $input = $('#reassort_scan_quantite');
  $input.attr({"value": min, "min": min});

  $('#plus').click(function () {
    var value = parseInt($input.val(), 10);
    $input.val(value + step);
  });
  $('#moins').click(function () {
    var value = parseInt($input.val(), 10);
    value = (value > min) ? value - step : value;
    $input.val(value);
  });
}

function showHint(str) {
  if (str.length == 13) {
    $.ajax({
      url: 'http://localhost/sf/web/extranet_dev.php/plateforme/reassort_scan/'+str,
      method: "POST",
      dataType: "json",
      success: reassort_scan_quantite_success
    });
  }
}

Ici les fonctions plus et moins était trop courtes pour avoir besoin d'être sorties, mais tu peux te dire en gros que dès que tu commences à avoir de fortes indentations c'est qu'il y a un problème.

ta réfinition de mon 

function showHint(str) {
    if (str.length == 13) {
        $.ajax({
            url: 'http://localhost/sf/web/extranet_dev.php/plateforme/reassort_scan/'+str,
            method: "POST",
            dataType: "json",
            success: function(json){
                var nom = json.nom;
                var prix = json.prix;
                var colisage = json.colisage;
                var miniCommande = json.minicommande;
                document.getElementById("designationModal").innerHTML = nom;
                document.getElementById("prixModal").innerHTML = prix;
                document.getElementById("colisageModal").innerHTML = colisage;
                document.getElementById("reassort_scan_quantite").setAttribute("min", miniCommande);
                document.getElementById('reassort_scan_quantite').setAttribute("value", miniCommande);
                document.getElementById("reassort_scan_quantite").setAttribute("data-colisage", colisage);
            }
        });
    }
}

ne le fais plus marcher.

bryan33000 a écrit:

Vu que tu utilises le jQuery je t'ai fait ça en jQuery 

https://jsfiddle.net/83hsz2L0/

ça marche pas mieux.

-
Edité par FaresElWilliams1 26 août 2016 à 14:05:21

Je pense que le problème ne vient pas des morceaux de code que l'on t'a donné mais plutôt du reste de ton code, comme te l'a fait remarque ConcombreRouge (notamment les window.onload etc.. Il va falloir s'armer de patience et reprendre ton code proprement!

Tout ce que j'ai mis sur le fiddle fonctionne très bien à chaque fois..

Tu n'as pas d'erreurs dans la console?

bryan33000 a écrit:

Je pense que le problème ne vient pas des morceaux de code que l'on t'a donné mais plutôt du reste de ton code, comme te l'a fait remarque ConcombreRouge (notamment les window.onload etc.. Il va falloir s'armer de patience et reprendre ton code proprement!

Tout ce que j'ai mis sur le fiddle fonctionne très bien à chaque fois..

Tu n'as pas d'erreurs dans la console?

aucune erreur console. je récupère bien jquery dans le head :/, je comprend bien que ça fonctionne sur jsfiddle et que normalement ça devrais marcher chez moi je blâme personne.

la le bouton n'incrémente même pas que se sois 1 par 1 ou 15 par 15.

Quand je mets ton code l'IDE me sort sur

var plus = $('#plus');
var moins = $('#moins');

duplicate jQuery selector 

Je sais pas si ça indique quelque chose :/ 

-
Edité par FaresElWilliams1 26 août 2016 à 14:20:46

Le problème c'est que tu fais du copier-coller sans essayer de comprendre ce qu'on écrit.

Perso je m'arrête là. Je n'ai rien de plus à ajouter, tu as toutes les cartes en main, c'est à toi de faire un effort.

ConcombreRouge a écrit:

Le problème c'est que tu fais du copier-coller sans essayer de comprendre ce qu'on écrit.

Perso je m'arrête là. Je n'ai rien de plus à ajouter, tu as toutes les cartes en main, c'est à toi de faire un effort.

Je comprend quasiment tout ce qui est écrit, bonne continuation merci quand même.

duplicate jQuery selector

Signifie que tu as déjà déclaré ces variables ailleurs dans ton sript C'est pas une fatal error qui empêche l'exécution de ton script, mais ca ralentit son exécution.

Pose toi, et reprends tranquillement ton code en essayant de mettre en place les conseils que t'a donné concombreRouge, sur tout ce qui est window.onload, utilisation des fonctions etc..

Pour moi, le plus efficace, serait d'ouvrir un nouveau fichier vierge, tu le fous côte à côte et tu recrées ton fichier tranquillement.

Tu crées tes fonctions une par une, tu récupères les morceaux de code dans ton fichier existant et tu les mets au bon endroit.

Comme ça, tu vas pouvoir t'assurer que tu n'as pas de selecteur dupliqué par exemple. Tu vas aussi pouvoir commenter ton code ce qui te seras grandement utile par la suite.

Je sais, c'est chiant, mais en prenant bien ton temps et en faisant les choses correctement, normalement dans max 1h ton code fonctionne.

Actuellement je travaille sur un projet où je repasse derrière des gens qui ont codé comme des porcs en 2006, et je leur en veux pas mal

C'est la solution que j'applique: new file -> reprenons les bases

bryan33000 a écrit:

duplicate jQuery selector

Signifie que tu as déjà déclaré ces variables ailleurs dans ton sript C'est pas une fatal error qui empêche l'exécution de ton script, mais ca ralentit son exécution.

Pose toi, et reprends tranquillement ton code en essayant de mettre en place les conseils que t'a donné concombreRouge, sur tout ce qui est window.onload, utilisation des fonctions etc..

Pour moi, le plus efficace, serait d'ouvrir un nouveau fichier vierge, tu le fous côte à côte et tu recrées ton fichier tranquillement.

Tu crées tes fonctions une par une, tu récupères les morceaux de code dans ton fichier existant et tu les mets au bon endroit.

Comme ça, tu vas pouvoir t'assurer que tu n'as pas de selecteur dupliqué par exemple. Tu vas aussi pouvoir commenter ton code ce qui te seras grandement utile par la suite.

Je sais, c'est chiant, mais en prenant bien ton temps et en faisant les choses correctement, normalement dans max 1h ton code fonctionne.

Actuellement je travaille sur un projet où je repasse derrière des gens qui ont codé comme des porcs en 2006, et je leur en veux pas mal

C'est la solution que j'applique: new file -> reprenons les bases

Ouais je vais tenté ça merci.

il est forcément duppliqué si tu fais : var plus = $('#plus'); et  $('#plus').click(function (e) { 

-
Edité par FaresElWilliams1 26 août 2016 à 14:45:22

Je suis content de pas être pur dev, je sauterais par la fenêtre Enfin, il y a des aspects chiants dans chaque métier

Désolé d'avoir mal interprété tes réactions Fares. On a beau se dire qu'il ne faut pas avoir d'apriori, c'est comme une illusion d'optique : tu sais que c'est un piège mais tu tombes dedans à chaque fois.

ConcombreRouge a écrit:

Je suis content de pas être pur dev, je sauterais par la fenêtre Enfin, il y a des aspects chiants dans chaque métier

Désolé d'avoir mal interprété tes réactions Fares. On a beau se dire qu'il ne faut pas avoir d'apriori, c'est comme une illusion d'optique : tu sais que c'est un piège mais tu tombes dedans à chaque fois.

Je sais pas comment tu as intérprété mes réactions, mais il n'y a rien de blessant, je ne fais pas du je "m'enfoutisme", j'essaie de comprendre, je modifie à chaque fois les codes que vous me proposé pour voir si ça marche mieux en modifiant tel ou tel chose, j'essaie juste de faire fonctionner ce foutu truc qui me pête les bonbons depuis deux jours(où chaque essaie et un echec qui suis d'un soupire, ce qui est en train de me faire craqué psychologiquement et moralement) et qui est un truc j'en suis complétement enfantin (j'arrive à le faire marcher en remplissant les valeurs mano sur du htmlpure, d'ailleurs mon JS que j'ai posté tout en haut fonctionne hein c'est pas juste pour rigoler et emmerder les gens que je demande de l'aide) je suis vraiment empêtré dans ma merde et je t'en remerci pleinement d'avoir essayé de m'y aider même si j'ai pas forcément saisi le fond je ton message et que je ne sais pas comment le prendre. 

Bonne journée.  

-
Edité par FaresElWilliams1 26 août 2016 à 15:02:01