Slider avec Bootstrap-Popover

Version imprimable

Bonjour à tous et merci d'avance pour votre aide.

J'utilise les popover et y inclure des slider.
Je parviens à ajouter le slider dans le popover mais celui-ci n'est pas fonctionnel.

Code:

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
$('.timeTable').on('click', function(){
        $('.timeTable').popover('hide');
        $(this).popover({
            animation : true,
            placement : 'bottom',
            selector : '#popover801689',
            html : true,
            content :  function() {
                return $('#pickTime').html();
            }
        });
        $(this).popover('toggle');
        return false; 
    });
 
    $(function() {
        $("#slider").slider({
            range: true,
            min: 0,
            max: 24,
            step: 0.5,
            values: [9, 10],
            slide: function( event, ui ) {
                $( "#amount" ).val( ui.values[ 0 ] + "-" + ui.values[ 1 ]);
            }
        });
        $("#amount").val($("#slider").slider("values", 0 ) +
                         $("#slider").slider("values", 1));
    });

Code:

1
2
3
4
5
6
7
<div id="pickTime"> <!--display none-->
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
    <div id="slider"></div>
</div>
 
<a class="timeTable" data-toggle="popover" href="#monday">09:00-20:00</a>
<a class="timeTable" data-toggle="popover" href="#tuesday">09:00-20:00</a>

14/12/2015, 16h40
NoSmoking

Bonjour,

Citation:

...mais celui-ci n'est pas fonctionnel.

cela n'aide pas beaucoup à la compréhension du problème.
14/12/2015, 19h00
Rifton007

1 pièce(s) jointe(s)

Merci et navré pour ce manquement.

Pour être plus claire, il est comme désactivé, inactif.
Je pense que c'est lié au fait que je l'injecte dans le popover qui lui est crée dynamiquement.

Pièce jointe 195263
#slider(celui du haut) est bien fonctionnel, mais quand je l'injecte dans le popover (en bas) il ne fonctionne pas.
15/12/2015, 11h00
chris52

Pourquoi tu ne met pas une classe carousel dans ton popover ?
15/12/2015, 11h49
Rifton007

Slider et carousel c'est deux choses différentes, même si certains utilisent le termes slidershow pour désigne une carousel.
Dans mon c'est bien un slider dont j'ai besoin.

Merci,

D'accord peut etre qu'il n'est pas "active"

Code:

1
2
3
4
 
<div class="well">
<a id="elem" class="timeTable" rel="popover" href="#monday" data-original-title="Mon Slide">09:00-20:00</a>
</div>

Code:

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
 
var maxValue = 100,
    $slider = $('<div>').slider({
        range: "max",
        max: maxValue,
        min: maxValue / 5,
        value: maxValue / 2
    });
 
$('#elem')
    .popover({
        trigger: 'manual'
    })
    .click(function() {
        var $this = $(this);
 
        if ($this.toggleClass('active').hasClass('active')) {
            $this.popover('show');
            $('.popover-content')
                .empty()
                .append($slider);
        } else {
            $slider.detach();
            $this.popover('hide');
        }
    });

16/12/2015, 07h30
Rifton007

Nickel chrome, ça marche.
Merci.
16/12/2015, 17h47
chris52

Mais de rien =) n'oublie pas de mettre résolu à ton post ;)