Discussion :

[Knular]

Salut !

Je suis actuellement en train de coder des programmes pour tout ce qui touche au crédit (Capital, taux, mensualité, etc..)

J'essaie de créer un formulaire qui se met à jour automatiquement en changeant les données, non pas à la fin en validant par un bouton mais en LIVE..

Sachant qu'en javascript il est possible de le faire (J'ai la solution), j'essaie de trouver un code en jquery pour actualiser directement l'input de type range et l'input de type text, quand un change l'autre doit faire de même en même temps.

Voici un début de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var credits = 100,
    html = '<li>Apply Credits: \
<input type="range"  min="0" max="200" value="'+credits+'" name="discount_credits" id="discount_credits" />\
<span>' + credits + '</span>\
</li>';
$("body").append(html);
$('#discount_credits').on("change mousemove", function() {
    $(this).next().html($(this).val());
});

Dans ce code comme vous pouvez le remarquer, j'envoie vers body un input qui donnera sa valeur à une prochaine balise span (Grâce à next() ) en même temps que je bouge le curseur de l'input range.

Je souhaite changer le span par un input de type text pour changer la valeur du curseur range et que cela se fasse en même temps..


J'ai essayé ça mais ça ne marche pas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var credits = 100,
    html = '<li>Apply Credits: \
<input type="range"  min="0" max="200" value="'+credits+'" name="discount_credits" id="discount_credits" />\
<input type="text" value="'+credits+'" size="4">\
</li>';
$("body").append(html);
$('#discount_credits').on("change mousemove", function() {
    $(this).next().parseFloat('#discount_credits').val();
});

Merci !

[danielhagnoul]

Bonsoir.

Exemple :

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var credits = 100,
        jObjInput = $( "<input/>", {
            "type" : "range",
            "min" : "0",
            "max" : "200",
            "value" : credits,
            "name" : "discount_credits",
            "mousemove" : function(){
                $( this ).next().text( $(this).val() );
            }
        });
 
    $( "<li/>", {
        "html" : '<label>Apply Credits : </label>'
    }).append( jObjInput ).append( '<span>' + credits + '</span>' ).appendTo( "body" );
 
});

[Bovino]

Sachant qu'en javascript il est possible de le faire (J'ai la solution), j'essaie de trouver un code en jquery

J'avoue que cette phrase me rend assez perplexe...
Déjà, parce que jQuery, c'est du JavaScript et surtout parce que si tu arrives à le faire en JavaScript natif, pourquoi vouloir le faire en jQuery si tu ne connais pas jQuery ?

[Golgotha]

mousemove

j'imagine le CPU du gazier monter à 100% à cause d'un passage de la souris rapide sur l'input

C'est pas un peux bourin ??

[Knular]

Bonjour,

Oui à me relire ce que j'ai écrit n'est pas très clair...
Je voulais dire par là que sans les inputs de type range, j'arrivais à faire les calculs directement en rentrant les données MAIS, aujourd'hui les simulateurs de crédit utilisent des inputs de type RANGE, je pense que c'est pour faire plus jolie et puis pour permettre aux gens d'utiliser leur tablette sans intégrer directement les données par des champs text...

J'ai trouvé la solution pour actualiser les données de mes inputs text et range en même temps :

Le code si ça intéresse des gens : http://jsfiddle.net/b1gcwcak/ (Ne pas oublier de loader le jquery)


MAIS j'ai un nouveau soucis, forcément...


Lorsque j'utilise le slider (input range) et que les données de l'input text se mettent à jour, je souhaite lancer une fonction grâce à un EVENT, problème je ne vois pas trop lequel utiliser.

Voici le code que j'utilise et en bleu ce qui ne va pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$('#mensualite_slider').on('input', function(){
    $('#mensualite').val($('#mensualite_slider').val());
	$('#mensualite_slider').on("change mousemove", function(){
        calcObject.run();
        });
});

Pour changer les donnée instantanément j'utilise .KEYUP, mais là pour l'input de type range, je ne sais pas quel EVENT doit être utilisé !


merci !

[Golgotha]

Quel est le problème exactement ? Avec ton code : calcObject.run(); se lancera bien au changement de l'input.

[Knular]

Si je fais défiler le slider de la mensualité, l'input text est mis à jour mais l'input range et text du capital ne changera pas, il faut que je valide l'input text de la mensualité pour que le capital change (Comme si ça devait utiliser l'event .change() pour marcher ).
Ca vient forcément du slider car si je change les données de la mensualité dans son input, le capital change directement (Grâce à l'event .keyup() ).

Si je les gens ne souhaitent pas utiliser le slider il faut que j'utilise l'event .keyup() pour qu'une fonction soit appelée à chaque mouvement des touches et pour que le résultat se mette à jour.
Pour le slider le .keyup() ne marche pas, je pense qu'il faut un autre event car il est question d'utiliser la souris..

Ici un exemple qui illustre ce que je souhaite faire : http://e-immobilier.credit-agricole.fr/ (un peu plus bas dans la page sur la droite)


EDIT : je mets le code que j'utilise, ça sera plus simple : http://jsfiddle.net/6w6801yh/

Pour l'instant j'ai fait deux fonctions pour calculer le capital et la mensualité, je n'ai pas fini...

Si on utilise les sliders, ça change les données mais ça ne met pas à jour le calcul car la fonction n'est pas appelée.
Si on utilise les input text, ça change les données, si je change la mensualité ça changera le capital, si je change le capital ça changera la mensualité...

Mais je souhaite utiliser les sliders pour faire cela, mais impossible, dès que je change les données avec le slider, il faut que j'utilise la touche entrée dans l'input changé...

[Golgotha]

Je vais dire quelques choses que je dit trèèèèès rarement..

Mais c'est là qu'on voie la limite d'utilisation de jQuery.. et ou ce placerai nettement mieux du AngularJS.

Là le problème c'est que tu as de multiple composants "bindé" à la même variable, et ça AngularJS le fait très bien.

[Knular]

Rolala rien que les premiers exemples que j'ai testé m'ont redonnés le sourire !!

Il va falloir que je bûche ça alors

merci en tout cas !

[Bovino]

Oula Golgotha, qu'est-ce que je lis ?


Sinon, dans ce cas, je verrais bien Polymer pour ma part.

[Golgotha]

ça doit être la fatigue

J'ai besoin de vacance...

@Knular : Bon, sinon voilà un début, avec AngularJS : http://jsfiddle.net/1ztvhgdx/

C'est quand même plus jolie

[Knular]

C'est pas mal du tout
J'essaie de faire des calculs entre input text et range pour voir si mon problème est résolu
merci !

[Knular]

J'ai fait un test avec un calcul simple :

http://jsfiddle.net/t6thh5q2/

Peux tu m'aider en ce qui concerne les changements de valeurs si une des trois est modifiée.
Par exemple on change avec le slider une valeur, les autres se mettront à jour grâce à un calcul de base.

Un calcul de base du genre :

1 + 2 = 3

Si je change le slider de 1 et que je remplace la valeur par 2 on verra apparaître en live :

2 + 2 = 4

Si je change le slider du résultat 4 par 5, un des deux "2" prendra la valeur 5 pour équilibrer.

2 + 3 = 5


Que je puisse avoir un modèle pour ensuite utiliser mes formules mathématiques de crédit..
Au fait, on est obligé de mettre ça dans chaque page de son site ? : <html ng-app="todoApp">
Et no wrap in <head>, ça veut dire quoi ? (EDIT : j'ai plus ou moins compris )

Merci !

[Golgotha]

ça serait un truc dans ce genre là : http://jsfiddle.net/t6thh5q2/2/

Attention.. je suis pas super calé encore sur cette techno..

[Knular]

C'est génial ! Le temps de faire des tests et je reviendrai pour donner des nouvelles d'ici peu.

Merci beaucoup !

[Knular]

Salut !

J'ai un peu avancé en même temps que la modification de mon code jquery, je bloque sur les fonctions compense() et change()..
J'ai pour l'instant comme but de modifier le capital ou la mensualité d'où l'ajout de deux formules, donc du coup si l'un change l'autre aussi, normalement en tout cas :

http://jsfiddle.net/nmrj2gp6/1/

Malheureusement ça ne veut pas s'ajuster, ça met un blanc dans l'input..La formule est peut être mal écrite ? La syntaxe etc...

J'ai l'impression de tourner en rond avec tous ces langages, c'est dommage car il ne me manque que l'appel d'une fonction avec un slider pour finaliser mon code jquery..

bonnes fêtes !

[Golgotha]

Voilà un test basique : http://jsfiddle.net/u1c2wju3/

Dans ta version, faut faire gaffe, puisque tu tombe dans une boucle.. la fonction change modifie $scope.mens , et de fait appel la fonction compense qui modifie le capital, qui appel la fonction change....

Pour moi tu ne peux avoir qu'une variable d'ajustement, mais attention à ne pas tomber dans des ajustements qui s'ajuste en boucle ^^

[Knular]

Salut !

Tu as fait une grosse partie du travail, je t'en remercie grandement !!
Je pense que ça ira.
Par contre pour le jquery c'est en suspens, je ne mets pas le topic en [résolu] en attendant de trouver la solution, car j'ai encore envie de chercher

Merci encore

Bonnes fêtes !

[Knular]

Arf, me revoilà...

J'ai un soucis au niveau de la syntax :

Marche pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$scope.mens = ($scope.cptl*1 * $scope.tx_m*1 * Math.pow($scope.tx_m_plusun, $scope.mois)) / ((Math.pow($scope.tx_m_plusun, $scope.mois)) - 1 );

Marche bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$scope.mens = $scope.cptl*1 + (Math.pow($scope.ann, $scope.tx));

Un problème de parenthèses j'imagine...

merci

[Knular]

Salut !

J'ai résolu mon problème, comme quoi, en persévérant on y arrive..
Me considérant comme un amateur sans pour autant trop m'y connaître, je suis assez content..

Voici la solution :

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
// mensualité	

$('#mensualite_slider').on('input', function(){
    $('#mensualite').val($('#mensualite_slider').val());
});

$('#mensualite').on('input', function(){
    $('#mensualite_slider').val($('#mensualite').val());
});

// Capital

$('#capital_slider').on('input', function(){
    $('#capital').val($('#capital_slider').val());
	ma_fonction();
});

$('#capital').on('input', function(){
    $('#capital_slider').val($('#capital').val());
});

J'ai appelé ma fonction.
Le slider de la mensualité ne changeant pas alors que son input oui, j'ai placé dans ma fonction cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('#mensualite').val(parseFloat(calcObject.amountMens).toFixed(2));
			$('#mensualite_slider').val($('#mensualite').val());

Donc la mensualité de l'input est mise à jour et en dessous, le slider de la mensualité est à son tour mis à jour !!

C'était tout c** !!

Joyeux noël !!