how to include jquery plugins in an ASP.NET project

Question

I'm trying to include this jquery plugin in my asp.net project: http://www.berriart.com/sidr/#

However I always get an Uncaught TypeError: undefined is not a function error. I want this plugin to be on every page so I thought I need to include it in my _Layout file. I don't know what I'm doing wrong.

So I have :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

<script src="~/Scripts/sidr-package-1.2.1/jquery.sidr.min.js"></script>
<link href="~/Scripts/sidr-package-1.2.1/stylesheets/jquery.sidr.dark.css" rel="stylesheet" />

<script type="text/javascript">
    $(document).ready(function () {
        $('#simple-menu').sidr();
    });
</script>

@*From their sample *@
<a id="simple-menu" href="#sidr">Toggle menu</a>

<div id="sidr">
    <!-- Your content -->
    <ul>
        <li><a href="#">List 1</a></li>
        <li class="active"><a href="#">List 2</a></li>
        <li><a href="#">List 3</a></li>
    </ul>
</div>

<div class="container body-content">

    @RenderBody()

</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

It relies on jQuery, so the script reference needs to be after jQuery on the page — adaam
– adaam, Commented Apr 18, 2014 at 16:10

adaam · Accepted Answer · 2014-04-18 16:14:40Z

4

The documentation shows that the Sidr plugin needs to be loaded after jQuery like so:

<!-- Include jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- Include the Sidr JS -->
<script src="javascripts/sidr/jquery.sidr.min.js"></script>

You are rendering the jQuery bundle at the bottom of the page whilst referencing the jQuery.sidr.js plugin in the <head> of the page. Move the <script src="~/Scripts/sidr-package-1.2.1/jquery.sidr.min.js"></script> after the rendering of the bundle at the bottom of the <body>

answered Apr 18, 2014 at 16:14

adaam

3,7268 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew The Terrible Over a year ago

OHHHHH. Damn that makes sense. I never thought about the order of loading scripts. DOH! thanks for the help.

Umair Rana · Accepted Answer · 2014-04-18 16:18:32Z

1

I used this by two methods. First is removing @Scripts.Render bundles and adding my own scripts like

<script type="text/javascript" src="~/content/js/jquery.js"></script>
<script type="text/javascript" src="~/content/js/jqueryslidemenu.js"></script>

And if you want to use Like @Scripts.Render("~/bundles/jquery") See in the App_Start> Bundle config that jquery is present or not..

answered Apr 18, 2014 at 16:18

Umair Rana

6831 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

how to include jquery plugins in an ASP.NET project

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related