I have some libraries, but when i try to inspect or debug i always get this annoying misconflict jquery libraries. The problem is stating must use latest of Bootstrap version 4.00 not less. This happens every time i want to use Datepicker
$(function() {
$("#checkbox").datepicker({
dateFormat: "yy-mm-dd"
}).val()
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<!--<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type='text' id='checkbox' />
I am now getting a warning here yet not all my bootstrap buttons now seem to be working, what could i be missing or did?
Related
I am trying to fix my issue about performance
when I test in chrome show me this problem:
Reduce server response times (TTFB) 10 second
Eliminate render-blocking resources 4 second
Minimize Critical Requests Depth
I disable viewstate and did cache SqlCacheDependency and minify CSS and JS,
used CDN for bootstrap and jequery. Used compression in html.
And this code for Css and JS in Site.master
What I can do more?
I am trying a lot please help me
<link href="../css/MYStyle.min.css" rel="stylesheet" type="text/css" />
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" media="print" />
<link href="../css/JF-flat.min.css" rel="stylesheet" type="text/css" media="print" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script async src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
I created a ASP.NET core template and wrote a jquery script. When I look at the page I see that jquery is loaded into the page, but the script doesn’t run. I looked at the ASP.NET docs page and my layout.cshtml looks the same, so are there extra steps I must take to get jquery working?
Home page
#{
ViewData["Title"] = "Home Page";
}
<!-- Page Content-->
<div class="container">
<div class="row">
<form method="post" enctype="multipart/form-data">
<input type="file" id="files" name="files" multiple />
<input type="button" id="upload" value="Upload Selected Files" />
</form>
</div>
</div>
<script>
$(document).ready(function () {
alert("Test");
});
</script>
Solution
#section scripts
{
<script>
$(document).ready(function() {
alert("Test");
});
</script>
}
I suspect your jquery is loaded after the rest of the page content.
This means that you cannot reference jquery objects as the library has not been initialised yet.
Move the page script after jquery has loaded.
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
alert("Test");
});
</script>
For efficiency I recommend you do this in one of two ways:
OPTION 1
Use a master script file that loads after jquery.
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/master.js"></script>
OPTION 2
Use a placeholder template that will always load after jquery but can be initialised on individual pages.
Master _Layout Page
<script src="~/lib/jquery/dist/jquery.js""></script>
#RenderSection("Scripts", required: false)
Content Page
#section Scripts {
<script>
$(function () {
alert("Test");
});
</script>
}
FOR CLARIFICATION
If you are referencing jQuery in your _Layout page.. double check to ensure that that reference is at the TOP of your _Layout page because if it is at the bottom, then every other page you have that use the _Layout and has jQuery, it will give you errors such as:
$ is undefined
because you are trying to use jQuery before it is ever defined!
Also, if your are referencing jQuery in your _Layout page then you do not need to reference it again in your pages that use your _Layout style
Make sure that you are loading the reference to jQuery before you start using <scripts>.
Your cshtml should work if you put the reference above your script as so:
<script src="~/Scripts/jquery-1.10.2.js"></script> // or whatever version you are using
// you do not need to use this reference if you are already referencing jQuery in your Layout page
<script>
$(document).ready(function () {
alert("Test");
});
</script>
If you create a new .Net Core 2.2 - Web Application with Razor Pages and try to add a jQuery script in index.cshtml you will get the error Uncaught ReferenceError: $ is not defined. As already mentioned this is because jQuery is loaded after the rest of the page content.
Fix this by navigating to Pages\Shared\_Layout.cshtml and add the scripts section to the html head tag instead. Then it will work:
Example:
Move from below </footer>:
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
Into <head>, should look like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - JiraApp.Clients.Web</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
</environment>
<link rel="stylesheet" href="~/css/site.css" />
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</head>
Thanks to everyone who contributed to these answers. I am new to JavaScript/jQuery and have been trying to get jQuery scripts to work for over two weeks now. I have gotten a few examples to work but, until now, I had no idea why something worked or did not work.
All of the examples I have looked at online show the references to .js files at the bottom of the page. None of the examples explain how the _Layout.cshtml file works in relation to the Razor views in an application. It is so confusing to add the links and script references to the _Layout.cshtml file only to have it not work as expected. Next, I moved the links and references to a header section on the razor page and it still did not work. Now that I have everything organized correctly, it is working and I understand why!!!
The key was putting the script inside the #section Scripts {} block. I had seen the call to RenderSectionAsync but did not realize what it was doing. This is how the bottom of my _Layout.cshtml file looks now:
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.inputmask.min.js"></script>
<script src="~/lib/jquery/dist/inputmask.binding.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
I hope many new developers see this post. When it comes to an ASP Net Core application with Razor views, the information provided in this thread is priceless! Again, many thanks to everyone who contributed to the answer.
must write below first line in while where you want to execute script.
if you write first line in other wile, it is not working.
below example to test JQUERY work or not.
<script>
$(document).ready(function () {
alert("Test");
});
</script>
This is similar to the fullcalendar question posed here on Stackoverflow. I shared the following solution on that question --
This is a good reference for what has been asked here. I downloaded jQuery directly and unarchived it into the wwwroot/lib folder/directory to get going with my project - however as I needed more JS libraries, it seemed that the Nuget option of installing JS libraries into my project really was an impossible path/option.
Consider;
not sure why you would use nuget packages for javascript libraries. your example has not been updated in the last four years, and probably doesn't support .net core projects (may not even work a current version of jQuery).
you should be using a javascript repository and package mangers like bower or npm, that manages the dependencies between libraries.
That is from the linked MS Forum. Anyhow, the question can be flagged as a duplicate of the other Fullcalendar question (which was posed two years prior to this one).
I'm trying to use the 30 days trial telerik offers and i have some problem to make it work properly.
As far as i know i did everything that is required but i still have an error when trying to display the control:
This is the error i get in my browser (in the console tab)
TypeError: jQuery(...).kendoDropDownList is not a function
jQuery(function(){jQuery("#color").kendoDropDownList({"dataTextField":"Text","da...
Here are the script i have added in my layout view:
<head>
<meta charset="utf-8" />
<title>Index - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<script src="/Scripts/jquery-1.8.2.js"></script>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<link rel="stylesheet" href="/Content/kendo.common.min.css">
<link rel="stylesheet" href="/Content/kendo.silver.min.css">
<script src="/Scripts/kendo.web.min.js"></script>
<script src="/Scripts/kendo.aspnetmvc.min.js"></script>
<script src="/Scripts/kendo.all.min.js"></script>
</head>
All the .js and .css are correctly called, the telerik namespace is registered in my web.config file and the reference has been correcly added to the project.
It seems there is a .js missing somewhere but i can't find which one...
Thanks for your help
This is the correct order:
<script src="/Scripts/jquery-1.11.2.min.js"></script>
<script src="/Scripts/kendo.all.min.js"></script>
<script src="/Scripts/kendo.aspnetmvc.min.js"></script>
Note that kendo.all.min.js (or kendo.web.min.js if you use it) needs to be loaded before kendo.aspnetmvc.min.js. kendo.aspnetmvc.min.js is always required if you use the MVC helpers.
The minimum required jQUery version for Kendo UI is 1.9.1, but it doesn't hurt to update to the latest 1.x version, if you need IE8 compatibility, or 2.x if you don't. See Supported jQuery versions.
Depending on which widgets you use you can use kendo.web, instead of kendo.all. See Pick the Right Combined Script Based on Your Project Type.
You can also create your own javascript using the custom download tool.
I am using .NET Studio 2003 and Framework 1.1 for designing a Wen Application. I tried to include css and js files using the following lines of code. But after putting this lines VS dosen't allow me to view aspx file in design view. Showing alert with "Could not open in Design view. Quote Values differently inside a '<%... "value" ...%>' block"
What should I do to view page in design view by keeping ResolveUrl function as it is in LINK and Script tags?
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/header.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/tooltip.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/menu.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/dropcheckbox.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/DateTime.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/time.css")%>">
<LINK rel="stylesheet" type="text/css" href="<%=ResolveUrl("~/Style/Common.css")%>">
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/jQuery.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/header.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/menu.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/DateTime.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/time.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/dropcheckbox.js")%>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/common.js")%>"></script>
Design view is known to be totally unreliable in VS 2003 and we configure all our instances to open code-behind by default (in Options) - for example, it will continually break your layout. I strongly recommend you do the same.
The issue is simply as stated - which unfortunately is not stated simply.
Change following statement
<script type="text/javascript" src="<%=ResolveUrl("~/JSFiles/jQuery.js")%>"></script>
to (note I switched " to ')
<script type="text/javascript" src='<%=ResolveUrl("~/JSFiles/jQuery.js")%>'></script>
here is my script
<script type="text/javascript">
$(document).ready(function () {
// alert("jquery working fine, still no display..");
$(".datepicker").datetimepicker({
showAnim: 'slideDown',
dateFormat: 'dd/mm/yyyy'
});
});
</script>
<input type="text" class="datepicker" />
The actual Datepicker works great, firebug shows this script, the jqueryUI, the timepicker-addon.js, slider.js, and datepicker.js, jquery is selecting the textboxes.
but alas, still no datetimepicker displaying
I've tried using id's/classes, rearranging the order the scripts are loaded. I would say that the addon is just bunk, but so many seem to have no troubles at all with it.
Does anyone know what I am missing?
The following code works perfectly fine for me:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input type="text" class="datepicker" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$('.datepicker').datetimepicker({
showAnim: 'slideDown',
dateFormat: 'dd/mm/yy'
});
</script>
</body>
</html>
Gives the following result as can be seen in this live demo:
So I guess there must be something wrong with your script inclusions and maybe their order. Unfortunately since you haven't shown your code it is difficult to be able to say more.