jtable refrences are not loading with MVC 4 asp.net

916 Views Asked by At

I am not able to understand the error of jquery because of being a newbie.

I am getting this error

" $ is not defined" when i don't add the references of my jquery and jquery ui libraries
And when i add the references of jquery and jquery -ui i get another error like "read is not defined" in the jtable.site.js and jquery.jtable.js

So i am sharing my layout file and also the bundles file .Can any one check this out what the problem is Here is My Layout file

<!DOCTYPE html>

@{
var jTableStyle = "metro/red/jtable.css";
if (!string.IsNullOrEmpty(Request["jTableStyle"]))
{
    jTableStyle = Request["jTableStyle"];
}
 }


 <html lang="en">
 <head>
<meta charset="utf-8" />
<title>@ViewBag.Title - myEMR Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
 <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")"></script>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

 <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.16.custom.css")" 
    rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/highlight.css")" rel="stylesheet" 
     type="text/css" />
    <link href="@Url.Content("~/Scripts/jtable/themes/" + jTableStyle)" 
    rel="stylesheet" type="text/css" />

    <link href="@Url.Content("~/Scripts/syntaxhighligher/styles/shCore.css")" 
    rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/syntaxhighligher/styles/shThemeDefault.css")"
     rel="stylesheet" type="text/css" />

    @RenderSection("CssImport", false)


    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" 
     type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/syntaxhighligher/shCore.js")"
   < type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushJScript.js")"
      type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushXml.js")" 
     type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushCSharp.js")" 
     type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushSql.js")" 
    type="text/javascript"></script>




    <script src="@Url.Content("~/Scripts/jtablesite.js")"type="text/javascript">
    </script>

    <script type="text/javascript" src="@Url.Content("~/Scripts/jtable    
    /jquery.jtable.js")"></script> 
    @RenderSection("JavascriptImport", false)    
         <div id="body">
    @RenderSection("featured", required: false)
    <section class="content-wrapper main-content clear-fix">
        @RenderBody()
    </section>

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


And my bundles file

  public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink
    /?LinkId=254725
    public static void RegisterBundles(BundleCollection 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"));
    }

And snap shot of script directory enter image description here

And my detailed directory enter image description here

2

There are 2 best solutions below

0
On

actually i was doing a little mistake the error was in the view file of controller where jtable is initialized i was using

$(document).read
And actually it is $(document).ready So it is working now.

5
On

At first glance, it looks like you are referencing a jtablesite.js file before you bring in the jtable library. You need to declare your script tags in order of inheritance, meaning, include the actual jtable library before you bring in any custom/calls to the jtables.js library.