CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chrome-extension
Lance
Lance

Reputation: 123

Using jquery in chrome extension popup

I am trying to setup a slider bar in the chrome extension popup. My slider bar code requires jquery but unfortunately, my program will not recognize the jquery code in my popup js. Here is the error produced when I inspect the popup:

script.js:1 Uncaught TypeError: $(...).slider is not a function

Here is my script.js code that creates the slider bar. Given that it does not execute past the first line, it seems that I have a jquery issue:

$('.application-progress').slider({
range: "min",
min: 0,
max: 100,
animate: true,
slide: function(event, ui) {
    $("#progress").html(ui.value + "%");
    }
});

$("#progress").html($(".application-progress").slider("value") + "%");

$("input, select").change(function() {
    var percentage = 0;
    $('input, select').each(function() {
        if ($.trim(this.value) != "") percentage += 10;
    });
    $(".application-progress").slider("value", percentage);

    $("#progress").html(percentage + "%");
});

Here is the html code for my popup:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Slider Bar!</title>
        <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="progress"></div><div class="application-progress"></div>
    </body>
</html>

Upvotes: 1

Views: 1044

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

Looks like you forgot to include jQuery UI:

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

Coz, jQuery UI Slider needs jQuery UI library to be loaded after jQuery.

Upvotes: 2

Related Questions