i am trying to include boostrap.min.js for my hosting server but it gives me
Unexpected token <... but when i use bootstrap CDN it worked. I thought this wasn't going to trouble me any further until i started using Angular-Chart.js. I get the same issue again.
Ok here my include structure:
<link href="app/views/css/bootstrap.min.css" rel="stylesheet">
<link href="app/views/css/myStyle.css" rel="stylesheet">
<link href="app/views/css/angular-chart.css">
<script src="app/views/js/jquery-1.11.3.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<!-- Services -->
<script src="app/services/authService.js"></script>
<script src="app/services/userService.js"></script>
<script src="app/services/storyService.js"></script>
<!--Controller -->
<script src="app/controller/mainController.js"></script>
<script src="app/controller/storyCtrl.js"></script>
<script src="app/controller/userCtrl.js"></script>
<!--Directives -->
<script src="app/directives/reverse.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.js"></script>
**Contents**
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="app/views/js/angular-chart.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
AngularJs throws that error when you have a missing resources. Check if all your scripts/styles in the head tag are actually found. And check if you have no missing style. Actually i think your third style should be:
<link href="app/views/css/angular-chart.css" rel="stylesheet">
That can probably fix it. I had a script with source "#" and I got that same error. And according to
This link to the issue on Github , installing bower fixes the problem most of the time.
Yeah, this is a typical problem when one of your resources defined in
the index.html file is missing.
If you check the console.log in your server terminal, you might be
able to figure out which one is missing. The missing one should have a
404 status code, while all the other ones are either 200 or 304
(cached).
Related
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?
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>
I've been trying to get a simple implementation of the Slick Carousel working.
I've followed the instructions at the Git page: https://github.com/kenwheeler/slick
Here is my code. Can anyone see a problem? Does anyone have a simple working code sample for slick?
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
</head>
<body style="background-color: lightblue">
<div class="your-class">
<div><p>test1</p></div>
<div><p>test2</p></div>
<div><p>test3</p></div>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick();
});
</script>
</body>
</html>
The reason it's not working is because you are running your html from file. This means that the url scheme being used for your script links is
file:
instead of
http:
so your CDN links are being resolved as
file://code.jquery.com/jquery-1.11.0.min.js
which is clearly incorrect.
Either hard-wire the scheme to http: by updating all the links to contain a scheme:
<link rel="stylesheet" type="text/css"
href="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
or run your code from an http context instead of from a file on your HD.
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 am trying Jquery Autocomplete element.In code I can see following import and references
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
I copied all files mentioned above in my folder and changed path to
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.6.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.button.js"></script>
<script src="jquery.ui.position.js"></script>
<script src="jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="demos.css">
But it looks like some css is missing
How can I find the dependent JS and CSS (Without reading complete JS and CSS source) ?
Download the module from http://jqueryui.com/download ticking the appropriate boxes, this will deliver a single minified js file (and the required jquery library) as well as a directory containing all the (theme specific) CSS you need.
Inspect the element to see what styles/classes have been applied to the element which looks wrong.
Do the same thing with the working demo.
You will see what you are missing.