Discussion :

[delta6]

Salut à tous,

J'ai un formulaire pour rechercher mes produits qui est composé de plusieurs input checkbox et d'un slider range, tout ça est réalisé grâce jquery ui.

Mon slider permet de filtrer les résultat par rapport aux prix des produits.

Voici le code de mon slider :

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
 
$(function() {
$( "#slider-prix" ).slider({
      range: true,
      min: 1,
      max: 40000,
      step: 500,
      values: [ <?php echo $check_prix_exp[1];?>, <?php echo $check_prix_exp[2];?> ],
      slide: function( event, ui ) {
             $( "#prix_exp" ).val( ui.values[ 0 ] + " &agrave; " + ui.values[ 1 ] + " &euro;" );
      },
      change: function( event, ui ) {
      var loader = "../images/ajax-loader.gif";
      $('#frame_prix').html('').html('<img src="' + loader + '" alt="#">');
      },
      stop: function( event, ui ) {
      var value1 = ui.values[ 0 ];
      var value2 = ui.values[ 1 ];
      $.ajax({
         url: "../scripts/ajax/ajaxPrixExpert.php",
         data: "num="+$("#num").val()+"&couleur="+$("#couleur").val()+"&prix1="+value1+"&prix2="+value2+",
         error: function(jqXHR, textStatus, errorThrown) {
         $('#frame_prix').html('').html('<div class="error">Erreur !</div>');
         },
         success: function( data ) {
         $( "#frame_prix" ).html( data );
         }
      });
     }
});
$( "#prix_exp" ).val( $( "#slider-prix" ).slider( "values", 0 ) + " &agrave; " + $( "#slider-prix" ).slider( "values", 1 ) + " &euro;" );
});

Lorsque je clique sur une de mes checkbox ça lance une fonction javascript que voici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function getAjaxPrixExpert(){
   $.ajax({
    url: "../scripts/ajax/ajaxPrixExpert.php",
    data: "num="+num+"&couleur="+couleur+"&prix1="+prix1+"&prix2="+prix2+",
    error: function(jqXHR, textStatus, errorThrown) {
    $('#frame_prix').html('').html('<div class="error">Erreur !</div>');
    },
    success: function( data ) {
    $( "#frame_prix" ).html( data );
    }
  });
  return false;
}

Comment récupérer les 2 valeurs courantes de mon slider et les mettre dans le data (prix1 et prix2) de ma fonction getAjaxPrixExpert() ?

Merci pour vos réponses.

Bruno

[danielhagnoul]

Bonsoir

http://api.jqueryui.com/slider/#method-values : var values = $( ".selector" ).slider( "values" );.

[SpaceFrog]

Ou en cherchant un peu sur le forum :
http://www.developpez.net/forums/d13...cuperer-slide/

[delta6]

Merci pour vos réponses.

Je plaide non coupable votre honneur non pas les plumes et le goudron ..... parfois on n'utilise pas les bons mots clés pour rechercher une solution à notre problème, j'ai passé ma soirée d'hier à chercher une solution sur le web...

Un autre souci : je met dans une session php les valeurs de mon formulaire (slider + checkbox) afin de garder une mémoire des valeurs utilisées lorsque l'internaute revient sur ce formulaire. Dans mon cas, les valeurs de mon slider sont décalés par rapport à la réalité car je met à jour les valeurs de mon formulaire dans ma session php depuis mon fichier d'appel ajax (ajaxPrixExpert.php) qui calcul le prix de vente et qui l'affichera.

Quand je bouge les valeurs de mon slider ça me calcul bien le prix (pas de souci) mais quand je clique ensuite sur une de mes checkbox "fonction getAjaxPrixExpert()" la dernière valeur de mon slider qui a été modifié et qui est prise en compte n'est pas bonne, elle correspond à l'ancienne valeur mais pas à la valeur actuelle.

Y a-t-il une solution en javascript pour mettre à jour ma session php plus tôt, plus en amont ? Si oui, quel serait le code javascript à utiliser ?

Pour l'instant je récupère mes valeurs de mon slider comme cela (je ne sais pas si cette méthode est la bonne) :

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
 
<?php
$check_prix_exp = explode("+", $_SESSION['prix']);
?>
<script language="Javascript" type="text/JavaScript">
<!--
var prix1 = "<?php echo $check_prix_exp[1];?>";
var prix2 = "<?php echo $check_prix_exp[2];?>";
 
$(function() {
$( "#slider-prix" ).slider({
      range: true,
      min: 1,
      max: 40000,
      step: 500,
      values: [ prix1, prix2,
      slide: function( event, ui ) {
             $( "#prix_exp" ).val( ui.values[ 0 ] + " &agrave; " + ui.values[ 1 ] + " &euro;" );
      },
      change: function( event, ui ) {
      var loader = "../images/ajax-loader.gif";
      $('#frame_prix').html('').html('<img src="' + loader + '" alt="#">');
      },
      stop: function( event, ui ) {
      var value1 = ui.values[ 0 ];
      var value2 = ui.values[ 1 ];
      $.ajax({
         url: "../scripts/ajax/ajaxPrixExpert.php",
         data: "num="+$("#num").val()+"&couleur="+$("#couleur").val()+"&prix1="+value1+"&prix2="+value2+",
         error: function(jqXHR, textStatus, errorThrown) {
         $('#frame_prix').html('').html('<div class="error">Erreur !</div>');
         },
         success: function( data ) {
         $( "#frame_prix" ).html( data );
         }
      });
     }
});
$( "#prix_exp" ).val( $( "#slider-prix" ).slider( "values", 0 ) + " &agrave; " + $( "#slider-prix" ).slider( "values", 1 ) + " &euro;" );
}); 
//-->
</script>

Je ne sais pas si j'ai été bien clair dans mes explications

En tout les cas merci pour vos futures réponses.

Bruno

[delta6]

Pas de réponse, je n'ai pas du être bien clair

Comment faites vous pour mémoriser les valeurs d'un formulaire (1 slider + différents input checkbox, tout ça en jquery ui) qui fera appel à une requête ajax ?

J'ai un formulaire de recherche (slider + input) et dessous j'ai une frame dans laquelle j'affiche le résultat de ma requête ajax.

Utilisez-vous les session php ou une autre solution ?

[SpaceFrog]

la coloration syntaxique ne te choque pas ?

Code :

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

1
2
3
data: "num="+$("#num").val()+"&couleur="+$("#couleur").val()+"&prix1="+value1+"&prix2="+value2+",
         error: function(jqXHR, textStatus, errorThrown) {
         $('#frame_prix').html('').html('<div class="error">Erreur !</div>');

tu as visiblement un souci de quote pour ton data ...

=>

Code :

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

1
2
3
data: "num="+$("#num").val()+"&couleur="+$("#couleur").val()+"&prix1="+value1+"&prix2="+value2,
         error: function(jqXHR, textStatus, errorThrown) {
         $('#frame_prix').html('').html('<div class="error">Erreur !</div>');

Personnellement je trouve plus lisible de faire un json

Code :

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

1
2
3
data: {"num":$("#num").val(),"couleur":$("#couleur").val(),"prix1":value1,"prix2";value2},
         error: function(jqXHR, textStatus, errorThrown) {
         $('#frame_prix').html('').html('<div class="error">Erreur !</div>');

[delta6]

Ah oui merci pour cette correction, je l'ai corrigé.

En ce qui concerne la mémorisation des valeurs de mon formulaire (1 slider + différents input checkbox en jquery ui) qui feront ensuite appel à une requête ajax, utilisez-vous les session php ou une autre technique ?

[danielhagnoul]

Problème souvent traité et qui n'a plus rien à voir avec jQuery surtout lorsque l'on poste du code PHP dans sa question.

Il y a les cookies (il y a des plugins jQuery, exemple : https://github.com/carhartl/jquery-cookie), il y a le SessionStorage ou le LocalStorage (https://developer.mozilla.org/en-US/docs/DOM/Storage).

[delta6]

Merci pour ta réponse.

Je ne connaissais pas ces méthodes/techniques.

Apparemment le SessionStorage ou le LocalStorage fonctionnnent uniquement pour Internet Explorer à partir de la version 8 https://developer.mozilla.org/en-US/..._compatibility

Sinon j'ai trouvé une autre méthode qui fonctionne : il suffit d'ajouter des input hidden correspondant au prix mini et maxi du slider. Grâce à la fonction change du slider on transmet les valeurs sélectionnées dans les input hidden. Il suffit ensuite de récupérer les valeurs des 2 input hidden pour connaitre leur valeur et les transmettre aux variables data d'une fonction ajax, par exemple.