I am implementing a fullcalendar (see fullcalendar.io) in a .cshtml View in a ASP.NET MVC application. I've inserted all the javascript code in the index.cshtml file but it did not show the calendar in the browser.
The files needed for the fullcalendar are also imported in the index.cshtml file.
Code
#{
ViewData["Title"] = "Home Page";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="#Url.Content("~/calendar-js/jquery.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/calendar-js/jquery-ui.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/calendar-js/moment.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/calendar-js/fullcalendar.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/calendar-js/fullcalendar.js")" type="text/javascript"></script>
<link href="#Url.Content("~/calendar-css/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/calendar-css/fullcalendar.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/calendar-css/fullcalendar.print.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/calendar-css/fullcalendar.print.min.css")" rel="stylesheet" type="text/css" />
I got the
"TypeError: $(...).fullCalendar is not a function"
error in the browser console.
I found out that it is a problem with jQuery and I've seen in the Network-tab of my browser that jQuery seems to load twice. First the jQuery file I referenced in my .cshtml file and another jQuery file which seems to be needed in a _LayOut.cshtml file:
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
I have tried:
to run the index.cshtml without the jQuery reference of that file. It just made it worse because I got "jQuery not found"-like errors in the browser console.
To run the index.cshtml file with all the jQuery references but I deleted the jQuery reference in the _LayOut.cshtml file. The fullcalendar kind of showed up but in a strange way. So my conclusion is that those 2 jQuery references are conflicting with each other. Although the fullcalendar showed up, i don't think it is the right thing to do it that way.
CDN references instead of local files. It did not work out.
How to solve this problem of the conflicting jQuery imports?
Related
I am including the following css styling and scripts in my MVC ASP.net application. The select picker dropdown does not work when I include the following datatables css and .js file
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
The following snippet shows the order of inclusion of all the css and .js files in the MVC asp.net application in the _Layout.cshtml
#Styles.Render("~/Content/bootstrapcss")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/bootstrap")
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
I did go through other solutions on stackoverflow. However it did not fix the issue.
Thanks in advance for helping.
I have created a simple website and a corresponding javascript file. When I open the site in any browser, it works fine. The script gets executed and there are no errors.
Then I tried to convert my website to a web-app using Electron. For now I didn't change anything, and added only a package.json and a main.js file, as described in Electron's getting started guide.
When opening the app, I can see my website just fine. But there is alsoan error popping up:
ReferenceError: $ is not defined
This comes from my javascript file:
$(document).ready(function() {
setInterval(doStuff, INTERVAL_MS);
});
So my question is:
Why did this code work when I run the site directly in the browser?
And why the error when I run it via Electron?
PS:
This how my index.html's head looks like. As you can see jQuery is included.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Style sheets -->
<link rel="stylesheet" href="style.css" />
<!-- External libraries -->
<script type="text/javascript" src="js/libs/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/libs/knockout-3.4.0.js"></script>
<!-- Internal scripts -->
<script type="text/javascript" src="js/globals.js"></script>
<script type="text/javascript" src="js/viewModel.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/dummyDataProvider.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
Append your index.html with the following script and make sure the path is correct for your case:
<script>
window.$ = window.jQuery = require('./js/libs/jquery-2.2.0.min.js');
</script>
When I use the Google Chrome Developer Tool in my web page developed using ASP.NET Core 1.0 (.NET Framework) project I detect the error: bootstrap.js: Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3. Can't figure out the cause of the error. The source view of my web page is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
Hello world.... and other content
.....
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"requestId":"a5c076a64ad7453f951bb2251bd6eec3","requestMappingFromServer":false}
</script>
<script type="text/javascript" src="http://localhost:58884/74edce98fdb542fc9b4a680a345ade26/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Except these lines
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="/lib/jquery/dist/jquery.js"></script>
Put this line :
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
And btw your question is duplicate I think :)
I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>