Souci concernant le tuto jQueryUI Slider

Word
Javascript

Bonjour à tous, j'ai essayé d'appliquer toutes les instructions du tutoriel JQueryUI Slider. Je n'ai aucune erreur de code (dixit Firebug) et pourtant je n'ai rien qui s'affiche. Dès le début du tutoriel, quand Grafikart annonce "et là on a notre slider", et bien je n'ai absolument rien. Après avoir fait quelques tests, il me parait pourtant évident que cela doit provenir des js ou des css de UI qui ne sont pas bien pris en compte. Pourtant les chemins sont les bons et Firebug ne m'indique pas que j'utilise une fonction non reconnue. Donc je ne comprends juste pas pourquoi je n'ai rien qui s'affiche. De plus, j'arrive à remplir la div uirange en faisant un .append("test"). Voici le code js : [code] jQuery(function($){ $('.range').each(function(){ var cls = $(this).attr('class'); var matches = cls.split(/([a-zA-Z]+)-([0-9]+)/g); var elem = $(this).parent(); var options = {}; var input = elem.find('input'); input.hide(); elem.append('

'); for(i in matches){ i = i*1; // pour obliger i à être un int if (matches* == 'min') { options.min = matches[i+1]*1; } if (matches* == 'max') { options.max = matches[i+1]*1; } } options.slide = function(event, ui){ elem.find('label span').empty().append(ui.value); input.val(ui.value); } options.value = input.val(); options.range = "min"; elem.find('.uirange').slider(options); elem.find('label span').empty().append(input.val()); }); }); [/code] Et l'HTML : [code] <title>Service Ecriture</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link rel="stylesheet" media="screen" type="text/css" title="Css_enigmus" href="../css/style.css"><link rel="stylesheet" media="screen" type="text/css" title="jqueryui" href="../js/jquery-ui-1.8.18.custom/css/ui-lightness/jquery-ui-1.8.18.custom.css"><script type="text/javascript" src="../js/jquery.js"></script><script type="text/javascript" src="../js/jquery-ui-1.8.18.custom/js/jquery-ui-1.8.18.custom.min.js"></script><script type="text/javascript" src="../js/sliders.js"></script>
<label for="">Valeur : <span></span></label><input type="text" name="range" class="range" value="0">
[/code] Quelqu'un aurait-il une idée s'il vous plait ? Merci beaucoup par avance !

18 réponses

Grafikart

Et En mettant qques alert tu as localisé le bug ?

Word
Auteur

Je ne sais pas tellement quoi tester dans mes alert. J'ai cependant une nouvelle information.

Quand je fais un alert dans la fonction suivante, elle n'apparaît pas. Donc je suppose qu'on ne rentre pas dans la fonction.

options.slide = function(event, ui){
            elem.find('label span').empty().append(ui.value);
            input.val(ui.value);
        }
Grafikart

oui celle là ne se déclenche que quand on bouge un slider

Word
Auteur

Et donc ? Aurais-tu une idée de pourquoi ce slider n'apparaît pas ?

Grafikart

elem.find('.uirange').slider(options); <= tu vois le souci ?

Word
Auteur

Si je réfléchis sur cette ligne. On a mis auparavant une div de class uirange dans elem. Donc là dans elem on cherche .uirange, et on y applique la fonction slider avec les options. Les options ont bien été définies mise à part options.slide mais a priori ça n'a rien à voir avec l'affichage du slider...

Il manquerait éventuellement un .append ou autre pour afficher quelque chose, mais dans le tutoriel on n'en fait pas mention...

Grafikart

oops j'avais pas vu le append ta div est transformé ? tu la vois dans le code HTML de ta page après passage du JS ?

Word
Auteur

Voici le HTML que j'obtiens après passage du JS

<label for="">
Délai :
<span>0</span>
Jours
</label>
<input class="range" type="text" value="0" name="range" style="display: none;">
<div class="uirange ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
</div>
Word
Auteur

Plus d'idées ? :(

Grafikart

Ok donc le js est bon tu as bien le code CSS importé ?

Word
Auteur

J'ai essayé avec

<link rel="stylesheet" media="screen" type="text/css" title="jqueryui" href="../js/jquery-ui-1.8.18.custom/css/ui-lightness/jquery-ui-1.8.18.custom.css" />

et : 

<link rel="stylesheet" media="screen" type="text/css" title="jqueryui" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css" />

Dans les deux cas il ne se passe rien. Et je n'ai aucune erreur en console. :s

Word
Auteur

C'est vraiment étrange ce souci n'est-ce pas ? Je ne vois vraiment pas pourquoi absolument rien ne s'affiche...

Word
Auteur

Pas de nouvelles idées ? :(

Word
Auteur

Toujours pas de solution ? :(

Word
Auteur

Je ne comprends vraiment pas... JQuery fonctionne bien pourtant car j'ai d'autres JS...

Word
Auteur

Toujours le même souci... Personne pour tester chez soi ? Merci bien :)

Brory Gregunel

Salut Word j'ai une idée pour toi ajoute :

<!-- chargement jquery core-->
            <script type="text/javascript" src="../js/jquery.ui.core.js"></script>

            <!-- chargement jquery widget-->
            <script type="text/javascript" src="../js/jquery.ui.widget.js"></script>

            <!-- chargement jquery mouse-->
            <script type="text/javascript" src="../js/jquery.ui.mouse.js"></script>

Car Jquery Slider en est dépendant voila

Word
Auteur

Merci beaucoup pour ta réponse bibi63000.

Malheureusement cela n'a rien changé... :s