I'm trying to use a javascript autocomplete function.
I'm loading the following files at the top of the HTML file.
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
However, I'm still getting this error: App.js:25 Uncaught TypeError: $(...).autocomplete is not a function. It's looking in my javascript file for the application.
I've actually tried to add the autocomplete script to that javascript file, but it's not solving the problem.
I'm new to Javascript so this could be a dumb question, but I legitimately have no idea how to solve it.
Here is the top of my template in loading the files:
{% extends 'layouts/base.html' %}
{% load static from static %}
<link
href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" >
</script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Static is loading my jquery file.
Related
I get this error shown in the browser, when trying to create an Code-Editor with HTML and the JavaScript Library 'CodeMirror':
Uncaught ReferenceError: CodeMirror is not defined
at index.html?_ijt=2cf0kfsr3jnpb58d7jndumktte:68
But considering, that I linked then in my index.html, I am unable to figure out whats wrong:
<!-- CodeMirror -->
<link rel="stylesheet" href="codemirror/CodeMirror-master/CodeMirror-master/lib/codemirror.css">
<script type="module" src="codemirror/CodeMirror-master/CodeMirror-master/src/codemirror.js"></script>
<script type="module" src="codemirror/CodeMirror-master/CodeMirror-master/mode/javascript/javascript.js"></script>
Do I have to use node.js if I want to include this library in my code?
EDIT:
I changed the files which I added to another version and now only receive one error:
Uncaught ReferenceError: CodeMirror is not defined
at index.html?_ijt=knaua520sd7qi1kst4958cmse4:74
HTML-Code:
<link rel="stylesheet" href="codemirror/codemirror-5.61.0/lib/codemirror.css">
<script type="module" src="codemirror/codemirror-5.61.0/lib/codemirror.js"></script>
<script type="module" src="codemirror/codemirror-5.61.0/mode/javascript/javascript.js"></script>
I fixed the issue:
<link rel="stylesheet" href="codemirror/codemirror-5.61.0/lib/codemirror.css">
<script src="codemirror/codemirror-5.61.0/lib/codemirror.js"></script>
<script src="codemirror/codemirror-5.61.0/mode/javascript/javascript.js"></script>
So, to fix this, you have to either make type="text/javascript" or to remove this parameter, because this is it's default value.
Using Django {% load staticfiles %} I'm trying to load an app.js file in my base.html template.
I've seen several questions on StackOverflow about this and I also tried to follow this tutorial: https://www.techiediaries.com/javascript-tutorial/ but no of them actually helped with my issue.
It seems strange as well because on dev tools I see a 200 GET on the static/js/js.app and when I actually open the path the javascript is there.
Additionally, when I put the js code in a at the end of the body it seems to work. But I want to load the js from a file.
Below is the latest that I've tried, but still no luck.
base.html
<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'js/app.js' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
<body>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- jquery -->
</body>
</html>
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Put the following script after the body tag.
<script type="text/javascript" src="{% static 'js/app.js' %}"></script>
Why? When loading JavaScript files, it tends to fall under one of two cases.
The Javascript file contains functions which are needed while the page is loading OR
The Javascript file contains functions which should be used after the page is loading.
Conclusion
If the JS file contains functions referencing HTML elements then you should put it after the body tag so the page's DOM elements can finish loading first before the script. Else, putting it in the head works as well.
P.S - You should also consider performance, as there is a difference in that aspect when importing JS files in the head and after the body
Adding <script type="text/javascript" src="{% static 'js/app.js' %}"></script> below my </body> fixed the problem I had with the js file not loading.
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 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).
I have an issue with yepnope that is driving me crazy, and I spent a good amount of time searching for the answer with no luck.
First, I am using device.js to detect screen size, it will throw an desktop class in the tag if it detects a desktop. On the desktop I want another script to be loaded which will then give functions to a certain class (on mobile devices, the script will not load and the certain classes will remain static.)
However, when yupnope executes, it throws my script on TOP of all the other scripts in my head tag and will not execute and run. I know the script works because I manually put it in on the bottom of my other scripts. My question is how can I make yepnope load the script last instead of putting it on the very top of the other scripts? I have a nagging feeling that this is where a callback comes in but I am still trying to get ahold of javascript!
this is my yepnope code:
$(document).ready(function(){
if ($('.desktop').length !=0) {
yepnope({
load: "js/jquery.malihu.PageScroll2id.js",
});
};
});
This is my html:
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/global.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/device.js"></script>
<script src="js/fixedonlater.js"></script>
<script src="js/scripts.js"></script>
The yepnope condition is in the file scripts.js which executes last but still puts the jquery.malihu.PageScroll2id.js script that is called on top which is wrong order then as shown in this code:
<script src="js/jquery.malihu.PageScroll2id.js"></script> //script on top = BAD!!
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/global.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/device.js"></script>
<script src="js/fixedonlater.js"></script>
<script src="js/scripts.js"></script>