jQuery UI Slider with a Bootstrap popover changing on slide event

Question

I am having a problem with bootstrap and jQueryUI, an i think its more of an implementation issue.

I am trying to add a bootstrap popover to a jQueryUI Slider, then on the side event for the slider i am trying to change the text of the popover

below is my code so far.

<Script type="text/javascript">
    jQuery(function () {
    jQuery("#slider1").slider({
        value: 5,
        min: 0,
        max: 10,
        step: 1,
        slide: function (event, ui) {
            switch(ui.value){
                case 0:
                    jQuery("#slider1").data('popover').options.content = 'new content 0';
                break;
                case 1:
                    jQuery("#slider1").data('popover').options.content = 'new content 1';
                break;
                case 2:
                    jQuery("#slider1").data('popover').options.content = 'new content 2';
                break;
                case 3:
                    jQuery("#slider1").data('popover').options.content = 'new content 3';
                break;
                case 4:
                    jQuery("#slider1").data('popover').options.content = 'new content 4';
                break;
                case 5:
                    jQuery("#slider1").data('popover').options.content = 'new content 5';
                break;
                case 6:
                    jQuery("#slider1").data('popover').options.content = 'new content 6';
                break;
                case 7:
                    jQuery("#slider1").data('popover').options.content = 'new content 7';
                break;
                case 8:
                    jQuery("#slider1").data('popover').options.content = 'new content 8';
                break;
                case 9:
                    jQuery("#slider1").data('popover').options.content = 'new content 9';
                break;
                case 10:
                    jQuery("#slider1").data('popover').options.content = 'new content 10';
                break;
            }
            jQuery("#slider1").find(".ui-slider-handle").text(ui.value);
            jQuery("#ctl00_MainContent_rptQuestions_ctl00_sdrQuestion_hdnValue").val(ui.value);
        }
    });
    jQuery("#amount1").val("£" + jQuery("#slider1").slider("value"));
});
jQuery(document).ready(function() {
    var value = jQuery("#slider1").slider("option","value");
    jQuery("#ctl00_MainContent_rptQuestions_ctl00_sdrQuestion_hdnValue").val(value);
    jQuery("#slider1").popover({title: 'Twitter Bootstrap Popover 5', content: "It's so simple to create a tooltop for my website!"});
    jQuery("#slider1").popover('show');
    jQuery("#slider1").find(".ui-slider-handle").text(value); 
});

So basically what the code above does, is set up a slider from 0 to 10 with an increment of 1, then i set a label on the slider handle to display the current ui value, and change that on the slide event. The problem that i am having is that the bootstrap is not changing when the slider is moved

The bootstrap popover is being initialized, and shows when the page loads, with the correct values, when debugging the JS, the switch statement is being hit and the value is being passed in, it just doesn't seem to change the bs text.

Answer 1

Well, the popover does not get informed of you changing the options. Try calling setContent:

var popover = jQuery("#slider1").data('popover');
popover.options.content = 'new content 10';
popover.setContent();