CODEWITHSUNDEEP
jqueryhtmlcss
joetinger
joetinger

Reputation: 2729

Trouble installing color picker

I found this project and I'm not sure why it's not working in my application. I'm sure it's something simple I just can't figure out what...

Errors: TypeError: e.widget is not a function evol.colorpicker.min.js:10 TypeError: $(...).colorpicker is not a function

I have JQuery 2.1.1 JQuery UI 1.11.1

JQuery

@section Scripts
{
    @Scripts.Render("~/Scripts/Custom/custom.js")
    @Scripts.Render("~/Scripts/Custom/evol.colorpicker.min.js")
}

Custom.js

$(document).ready(function () {
    $("#mycolor").colorpicker();
});

CSS

@section Styles
{
    @Styles.Render("~/Content/evol.colorpicker.css")
}

Html

<div style="width:128px">
   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
   <div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>

Bundles

     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
    }
}

EDIT SCRIPT LOCATION

@section Scripts
{
    @Scripts.Render("~/bundles/jqueryval")
    <script  type="text/javascript" src="@Url.Content("~/Scripts/Custom/custom.js")"></script>
    <script  type="text/javascript"  src="@Url.Content("~/Scripts/Custom/evol.colorpicker.min.js")" ></script>
}

Upvotes: 0

Views: 564

Answers (1)

vborutenko
vborutenko

Reputation: 4443

You should place scripts in bundlr

    @Scripts.Render("~/Scripts/Custom/custom.js")
    @Scripts.Render("~/Scripts/Custom/evol.colorpicker.min.js")

This is not name of bundles.I suppose these only script name.But you using their as bundle name

Try

<script src="@Url.Content("~/Scripts/Custom/custom.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Custom/evol.colorpicker.min.js")" type="text/javascript"></script>

but in future put these scripts to bundle

Upvotes: 2

Related Questions