I have a problem with bundling dataTables library. This is what I've got now:
//other bundles (bootstrap etc.)
bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
"~/Scripts/jquery.dataTables.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/DataTables/css/dataTables.bootstrap.css",
"~/Content/DataTables/css/jquery.dataTables.css"));
and in _Layout.cshtml:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="~/Content/fontawesome-all.min.css" rel="stylesheet" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<head>
...
</head>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/datatables")
#RenderSection("scripts", required: false)
Unfortunately it doesn't work, table is not modified. Another issue is that when I press F12 to inspect my website I don't see Scripts/datatables attached on the end, only this:
<script src="/Scripts/jquery-3.5.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
additionally I can see th error: Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument....
my JS looks like this:
$('document').ready(function () {
$('#myTable').DataTable({
"order": [[3, "desc"]]
});
});
Your /Scripts/jquery.dataTables.js file does not seem to be loading. That is why you see the error on the console.
Can you try to load the datatable library with <script src="/Scripts/jquery.dataTables.js"></script> referance instead of the existing #Scripts.Render("~/bundles/datatables")?
Also you seem to be loading jquery library twice!?
Related
I'm working on ASP.NET MVC 5. I have a viewstart.cshtml and imported the reference for my jquery like this
<!-- jQuery and Bootstrap JS-->
<script src="~/Scripts/jQuery/jQuery-2.1.4.min.js"></script>
<script src="~/Scripts/Bootstrap/js/bootstrap.min.js"></script>
In my view for HomeController I have alert function on document ready but there is an error that says $ is not defined.
But when I import the jquery directly to the view of my HomeController, it works fine. Why is that? The view of my HomeController is actually using the viewstart.cshtml that has the reference for jquery. Am I doing the correct way to import all my js/css files in Layout.cshtml? thanks for any help
In my View for HomeController if I reference the jquery directly, there is no error and it's working fine. But I want to do it once so all of the views don't need to reference it.
see below code:
#{
ViewBag.Title = "Welcome";
}
<script src="~/Scripts/jQuery/jQuery-2.1.4.min.js"></script>
<script>
$(function () {
alert("hello francis!")
})
</script>
<h2>WELCOME !!</h2>
It looks like you're loading your custom scripts before jquery.
Make sure you have something like this in Layout.cshtml (not _ViewStart.cshtml) somewhere between #RenderBody and </body>:
<script src="~/Scripts/jQuery/jQuery-2.1.4.min.js"></script>
<script src="~/Scripts/Bootstrap/js/bootstrap.min.js"></script>
#RenderSection("scripts", required: false)
and in the view you have to include your scripts into scripts section like:
#section scripts {
<script>
//your custom scripts here
</script>
}
This will ensure you that jquery will be loaded before your scripts.
Anything placed into section in the view will not be rendered during view render in RenderBody, and will be rendered only in RenderSection.
So jquery is loaded first in layout file, and only then section from the view containing your custom scripts that uses jquery being rendered.
usually you should use bundling to get jquery working.
inside the App_Start folder there's a file called BundleConfig.cs. Place the required jquery libs inside your scripts folder and update the bundle config file as follows:
public static void RegisterBundles(BundleCollection bundles)
{
// The jQuery bundle
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
//"~/Scripts/jquery-1.9.1.*",
"~/Scripts/jquery.min.js"
//"~/Scripts/jquery-ui-1.10.2.custom.js"
));
bundles.IgnoreList.Clear();
bundles.IgnoreList.Ignore("*.intellisense.js");
bundles.IgnoreList.Ignore("*-vsdoc.js");
bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
}
in your Layout.cshtml right in the <head> tag area place the following piece of code to render your bundles defined:
#Scripts.Render("~/bundles/jquery")
You should now be able to use jQuery as expected.
This line:
<script src="~/Scripts/jQuery/jQuery-2.1.4.min.js"></script>
runs on the client's end.
The tilde (~) is the way to get to the server's root directory.
You can use url's with a tilde(~) on you server (e.g. using Server.MapPath) but they shouldn't be used on the client's end.
You can either create a relative url or an absolute url on your client, but don't use the tilde (~).
Your error ($ is not defined) means that JQuery has not been loaded. Either:
You didn't load JQuery correctly - check you url (easy to with the dev tools).
You are using the JQuery before it was loaded.
Go to Views/Shared/_Layout.cshtml and move this piece of code:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
from the body tag to the head tag and that should look like this:
...
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")/
#RenderSection("scripts", required: false)
</head>
...
...For me personally that worked out fine, there is no more need to embed direct references to jquery in each html page.
I am trying to implement the urlrouting for asp.net webforms. My problem is all the js file and the css files not loaded on the page because it cannot refer to the correct path.
I've refer the js on the my master page as shown below.
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
Could you please help me for a solution.
you can use the Page.ResolveUrl(String relativeUrl)
Page.ResolveUrl("...") will generate an absolute path out of an relative one:
<script type="text/javascript" src='#Page.ResolveUrl("~/Scripts/jquery-1.7.1.min.js")' charset="utf-8"></script>
or
<script type="text/javascript" src='<%= Page.ResolveUrl("~/Scripts/jquery-1.7.1.min.js")%>' charset="utf-8"></script>
depending on if you're using razor markup or not.
This is the correct format to call your JQuery script with. The '~' refers to the root directory. So assuming your script is in this location, it should work.
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
However, the line above it attempts to load the same script, but does not include the '~' character.
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
...and you aren't attempting loading any CSS files. So delete the first line, and then add the correct tags to load your CSS files.
<link rel="stylesheet" type="text/css" href="~/Content/mystyle.css">
Only use / Because it means root of the site. (if Scripts dir under your root)
<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js" charset="utf-8"></script>
I want to highlight my elements and add a link with jquery.
My Code:
#model IEnumerable<Mvc3Demo.Products>
#{
ViewBag.Title = "List";
}
<h2>List</h2>
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js" />
<script type="text/javascript">
$(document).ready(function () {
$('#productList li').hover(
function () {
$(this).css({ 'background': 'green', 'cursor': 'pointer' });
},
function () {
$(this).css('background', '');
}
).click(function () {
window.location = 'Product/Edit/' + $(this).attr('productid');
});
});
</script>
<ul id="productList">
#foreach (Mvc3Demo.Products p in Model)
{
<li productid="#p.ProductsID">
#p.Name
<!--#Html.ActionLink("Bearbeiten", "Edit", "Product", p, null)-->
</li>
}
</ul>
Layout page:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
#RenderBody()
</body>
</html>
The JQuery will be found so that couldn't be the error ( i proofed it with firebug)
Error:
No Error occurs in Firebug and no highlighting and no link
Please help
I've put the HTML which would be output from your example above into a fiddle. As you can see, it appears to work correctly.
Is the URL in your reference to jQuery correct?
Don't you have something in your Layout page that broke the jQuery functionality?
Try to unbind your page from the Layout and test it indipendently.
Or post your Layout page to let us see what could be wrong with it...
Edited after seeing the Layout page:
There's the error. you already have the jquery reference in the layout page. This cause the error. Simply delete the reference from you page leaving the one in the layout) and everything is going to work.
I created a littel project to test it.
PS: I still don't understand why 2 references to the same javascritp file cause the error :/
try to type
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
instead of
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js" />
I have an application that contains this code:
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/facebox.js" type="text/javascript"></script>
<link href="facebox.css" rel="stylesheet" type="text/css" />
<script language="Javascript">
$(document).ready(function () {
$('a[rel=facebox]').facebox();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a rel="facebox" href="WebForm1.aspx">Open Facebox Dialog with 0 opacity</a>
</form>
</body>
</html>
In this one the facebox works very well,
Im applying the same principle in another application in which i render my anchor
dynamically :
link = new HtmlGenericControl("a");
link.InnerText = Path.GetFileName(value);
link.Attributes.Add("rel", "facebox");
link.Attributes.Add("href", "WebForm1.aspx");
panel.Controls.Add(link);<br/>
and ive got this code on my page
<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/facebox.js"></script>
<link href="css/facebox.css" rel="stylesheet" type="text/css" />
<script language="Javascript">
$(document).ready(function () {
$('a[rel=facebox]').facebox();
});
</script>
In this one Im having an error on facebox(). Object doesnt support this property or method.Why m i getting this error although i do have the same code in another application
and it works perfectly there ?!?!
Thanks alot
And, is the path js/facebox.js exists inside the page location?
Remember that the link to the js file will be relative to the current page location since you are not providing ab absolute path to the file and probabliy you are using a page in a diferent location from the Master.Page of the site root .
I dont know why, but when i put the script tage inside the body it worked
I try to use timepickr plugin, from http://haineault.com/media/jquery/ui-timepickr/page/
my headers:
<script src="<%=ResolveUrl("~/Scripts/jquery-1.4.2.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery-ui-1.8.2.custom.min.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery.utils.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/jquery.strings.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/Scripts/ui.timepickr.js")%>" type="text/javascript"></script>
my view:
<input type="text" id="hourstime" style=" font-family:Arial;width: 47px; vertical-align:inherit;margin:1;"/>
and jquery:
$(document).ready(function () {
$('#hourstime').timepickr();
});
So, it fails with error:
Uncaught TypeError: Cannot call method 'call' of undefined
Any ideas?
You also need to include jquery.timepickr.js. Since this plugin has 3 files,
2 JS [jquery.timepickr.js, ui.timepickr.js] and
1 CSS [jquery.timepickr.css]
This plugin didn't support jQueryUI >= 1.8
Use updated plugin for jQueryUI 1.8: http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/