Question

I’m getting the error Object doesn’t support property or method ‘slider’ when loading my Sharepoint page.

I’m running this function on page load

function sliderFunctionality() {
$("#sliderdiv").css("background-color", "#ccc");
$("#sliderdiv").slider({
    value: 0,
    min: 0,
    max: 5,
    step: 1,
    slide: function (event, ui) {
        $("#amount").val("$" + ui.value);
    }
});
$("#amount").val("$" + $("#sliderdiv").slider("value"));
alert('testing.....');
};

Here is my webpart code

protected override void CreateChildControls()
    {
        //REGISTER STYLESHEETS
        CssRegistration.Register("/_layouts/STYLES/Stylesheet1.css");

        //REGISTER JAVASCRIPT LIBRARIES
        ScriptLink.Register(this.Page, "/_layouts/SCRIPTS/jquery-1.7.1.min.js", false);
        ScriptLink.Register(this.Page, "/_layouts/SCRIPTS/jquery.SPServices-0.7.0.min.js", false);
        ScriptLink.Register(this.Page, "/_layouts/SCRIPTS/JScript1.js", false);

        this.Controls.Add(new LiteralControl("<label for='amount'>Donation amount ($50 increments):</label>"));
        this.Controls.Add(new LiteralControl("<p><input type='text' id='amount' style='border:0; color:#f6931f; font-weight:bold;' />"));
        this.Controls.Add(new LiteralControl("<div id='sliderdiv'>here</div></p>"));

        this.ChildControlsCreated = true;
    }

The change of css background colour works but the slider doesn’t. So jquery is working fine on the page and the DIV is being found.

Why is slider not working? I’m using jquery 1.7.1

Answer 1

I don’t see anywhere that you’re pulling in the jQuery-UI JavaScript. I think you should have something that looks more like this:

ScriptLink.Register(this.Page, "/_layouts/SCRIPTS/jquery-1.7.1.min.js", false);
ScriptLink.Register(this.Page, "/_layouts/SCRIPTS/jquery-ui-1.8.17.min.js", false);
...

And you might want a CssRegistration.Register for the jQuery-UI stylesheet as well. I don’t know what your jquery-ui.js is called so I guessed.