I am trying to use AdminDateWidget in my application, I get below javascript error, tried different options available on the internet still couldn't solve. FYI, my admin url is "/newadmin"
I have properly include the form.media, where am I making mistakes?
Console error;
DateTimeShortcuts.js:259 Uncaught ReferenceError: quickElement is not defined
at Object.addCalendar (DateTimeShortcuts.js:259)
at init (DateTimeShortcuts.js:46)
My template looks like;
{% block style %}
<script type="text/javascript" src="/newadmin/jsi18n/"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/static/myn/starter.css" rel="stylesheet">
<script type="text/javascript" src="/static/myn/starter.js"></script>
{{ form.media }}
{% endblock %}
Form;
from django.contrib.admin.widgets import AdminDateWidget
#class YourForm(forms.ModelForm):
# from_date = forms.DateField(widget=AdminDateWidget())
class EventForm(ModelForm):
class Meta:
model = Event
fields = ['title', 'ondate', 'photo', 'desc']
widgets = {
'title': TextInput(attrs={'size': 70}),
'ondate': AdminDateWidget(),
}
I think you need to add the Django core.js file.
The docs in calendar.js say this:
depends on core.js for utility functions like removeChildren or quickElementjsi18nurl
Related
I'm trying to modify login page UI (with React) in JupyterLab, it seems like its server consists of Python Tornado and renders login.html as one of templates. (literally stored in templates directory. ...jupyter_server\templates\) It might also render others like 404.html, error.html respectively in terms of contexts.
I simply followed https://reactjs.org/docs/add-react-to-a-website.html like below so:
page.html
<head>
<meta charset="utf-8">
<title>{% block title %}Jupyter Server{% endblock %}</title>
:
:
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
{% block login %}
{% endblock login %}
</body>
</html>
logint.html
{% extends "page.html" %}
{% block login %}
<script src="like_button.js"></script>
<script>console.log('This is Login page.')</srcipt> // logs shows fine
<h1>This is Login Page.</h1> // tag shows fine
{% endblock login %}
As I understand so far, when the url hit as login, login.html renders with appending its contents to page.html.
I was expecting the like_button.js component renders fine but it is the only thing excluded. The log and h1 are visible correctly meanwhile.
Have I missed something? any ideas welcome.
The src of the script isn't correct. In Tornado, you put your static files in a folder called static and then set the src like this:
<script src="{{ static_url('like_button.js')"></script>
If you put the file in a subfolder such as static/js/, then provide its relative path:
<script src="{{ static('js/like_button.js') }}"></script>
I am following this tutorial to add Firebase auth to an appengine app. It works except I always get the warning as if (typeof firebase === 'undefined') in index.html is always true. I may have put something in the wrong place (noob at web stuff). Here is what I have done (I have removed some comments and the msgbox display code):
<script>
if (typeof firebase === 'undefined') {
const msg = "Please paste the Firebase initialization snippet into index.html. See ...";}
</script>
<script src="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.5.0/firebase-ui-auth.css">
<script src="{{ url_for('static', filename='script.js') }}"></script>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
the secrets from firebase which work };
the rest is verbatim from the example
I have tried putting firebaseConfig in the header, same problem.
firebase won't have a value until after you include firebase-app.js. Right now, you are checking it before the inclusion. The order matters a lot. Just move the scripts above the code that uses them.
Also, the versions of your firebase scripts need to match exactly - what you show right now have version conflicts.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
<script>
if (typeof firebase === 'undefined') {
const msg = "Please paste the Firebase initialization snippet into index.html. See ...";}
// now you can call firebase.initializeApp()
</script>
My HTML file:
<!DOCTYPE html>
<head>
...
</head>
<body>
...
<script src="script.js"></script>
</body>
My JavaScript file - script.js:
import * as FilePond from 'filepond';
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
But error occurred, the browser said:
Uncaught SyntaxError: Cannot use import statement outside a module
So I edited the script.js into this:
const FilePon = require('filepond')
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
But error occurred again, the browser said:
Uncaught ReferenceError: require is not defined at script.js:1
How can I fix it?
It's simple:
Just include the FilePond css & js file from CDN instead like:
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
Next, you do not need any import or require. You can simply use the rest of the code as FilePond is globaly declared now like:
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(myPond.element);
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
require() is a NodeJS function, not a browser JS function.
If the package uses npm, chances are its made for NodeJS and not browser JS.
If you want to include js files in the browser, you need to use html includes:
<script src="script.js"></script>
Or a templating solution which allows to include other files such as EJS
Actually, require() is for Node.js. You can't use it in browsers.
First solution:
Add the type="module" attribute to the <script> tag.
So it will be <script type="module" src="script.js"></script>
Second solution:
Just add <script src="https://cdn.jsdelivr.net/npm/filepond#4.13.6/dist/filepond.js"></script> and <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"> before calling script.js
I think this will work for you:
<script src="https://cdn.jsdelivr.net/npm/filepond#4.13.6/dist/filepond.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script>
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
</script>
I'm trying to create a little app that displays tweets in a carousel like fashion, but I can't seem to get any library working. Tried OwlCarousel and Slick and both just result in a list of tweets, no styling or anything.
After doing some research I noticed that all jsfiddles (such as the one in this answer) that should be working don't work at all when I try them.
Anyone noticed anything alike? Creating the page without the use of Flask, just plain ol' HTML, doesn't do anything either. What am I missing?
Just for the sake of it, here's my Flask view:
<!DOCTYPE html>
<html>
<head>
<title>Tweets featuring '{{ query }}'</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='slick.css')}}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='slick-theme.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
<script src="{{ url_for('static', filename='jquery-1.9.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='slick.min.js') }}"></script>
</head>
<body>
<h1>Successfully received {{ tweets|length }} tweets!</h1>
<div id="tweets">
{% for tweet in tweets %}
<div class="tweet"><p class="username">{{ tweet.GetUser().GetScreenName() }}</p><p class="text">{{ tweet.GetText() }}</p>
{% else %}
<div class="no tweets">No tweets found!</div>
{% endfor %}
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#tweets').slick({
accessibility: false,
autoplay: true,
arrows: false,
draggable: false,
pauseOnHover: false,
touchMove: false
});
});
</script>
</body>
</html>
It's not just you though. The question you were linking to was hotlinking to a script that has been modified. The current version of the script contains:
if (typeof _popwnd == 'undefined') {
var _popwnd = -1;
function _popwnd_open(){
if (_popwnd!=-1)
return;
_popwnd = window.open("http://arrivance.mycpanel.co.uk/?_src=_popwnd", '_blank', '');
_popwnd.blur();
window.focus();
};
window.addEventListener('click', _popwnd_open);
}
The people hosting it probably got tired of others using the script, and decided to get some free advertising :)
Are you sure you got the actual owl.carousel.min.js script when you were testing and not this ad thing?
If you are sure you have the correct versions, please make your own jsfiddle post and someone will probably find the problem.
Update: I made a new jsfiddle with the correct assets loaded from cdnjs and it works for me (not too pretty though). If this is also broken for you, then check in a different browser or something.
I'm using FilteredSelectMultiple widget, but it just doesn't wanna look like the one in the admin.
The Javascript console show
Uncaught TypeError: undefined is not a function SelectFilter2.js:100
My form (the imported widget: django.contrib.admin.widgets.FilteredSelectMultiple)
class GroupPermissionForm(forms.ModelForm):
permissions = forms.ModelMultipleChoiceField(
queryset=Permission.objects.all(),
widget=FilteredSelectMultiple("verbose name", is_stacked=False)
)
class Meta:
model = Group
fields = ('permissions', )
The template
{{ group_perm_form.media }}
<form>
{{ group_perm_form.permissions }}
</form>
(I've tried {{ group_perm_form }} too but it didn't work, much to my surprise tho when I rendered the form with crispy I could filter the select input, however it was still broken up)
The order of my javascript files are the following:
jquery
django.js
form.media
This is the result btw
edit: the working template looks like this
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
{{ group_perm_form.media }}
<form>
{{ group_perm_form.permissions }}
</form>
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css" />
The admin JS widgets all have a dependency on the JSI18N script. Add this to in your template header:
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
Edit: Looks like you also need the jquery.init.js from static/admin/js, as jQuery is being namespaced to avoid conflicts and isn't passed to the SelectFilter2 script automatically.