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.
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 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
I have the following django template and I have defined a button in it so that it calls the javascript function which I added to the page like below. I have the below issues:
1) If I bring the script tags to the header section nothings shows up.
2) If press the button I get the undefined error message. (Uncaught ReferenceError: postData).
What am I mssing here?
Thank you very much,
Mike
newproduct.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>New Product</title>
</head>
<body>
<p>Hellow</p>
Back
<h2>Please enter product details:</h2>
<button onclick="postData();">Send Post</button>
<form action="http://127.0.0.1:8000/newproduct/" method="post">
<p>{{ message }}</p>
{% csrf_token %}
{{ form.as_p }}
<input type="submit"/>
</form>
<script src="bower_components/jquery/src/jquery.js" type="text/javascript"/>
<script src="scripts/main.js" />
</body>
</html>
main.js
function postData ()
{
$.post('/newproduct', {name:'New Product JS', price:555, });
};
You've hard-coded the reference to postData in your HTML, but you've used it before you've defined it, since the JS isn't loaded until the end of the page.
You could fix this by moving the script to the top of the HTML, but it is better not to use JS directly in HTML like this. Rather, your script itself should use the jQuery dom-ready functionality to bind itself to the button event.
html:
<h2>Please enter product details:</h2>
<button id="my_button">Send Post</button>
main.js
$(function() {
$('#my_button').click(function() {
$.post('/newproduct', {name:'New Product JS', price:555, });
});
});
Maybe you're getting trouble handling the path url, instead use the full path, try something like:
{% static ‘path/to/file’ %}
In your settings.py
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
Remember that your static file dir is setted in the same level of your project.
I have a Django form and I would like it to initially hide a text field until the user selects a checkbox.
I am new to Django and web applications, so I have no idea what I am looking for or what it is called. I have searched to no avail. Any pointer would be helpful.
SOLUTION:
Thanks for the help makaveli. Below is my first stab at this:
forms.py
from django import forms
from .models import MyModel
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
fields = [
'my_checkbox',
'my_form_input',
]
index.html
{% load static %}
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'my_app/style.css' %}">
<title>My Django Form</title>
</head>
<body>
<form method="post">{% csrf_token %}
{{ form.as_p }}
<button type="submit">Submit</button>
</form>
<script src="{% static 'my_app/script.js' %}"></script>
</body>
</html>
style.css
#id_my_form_input {
display : none
}
script.js
function my_toggle_func() {
if (this.checked) {
document.getElementById("my_form_input").style.display = 'block';
} else {
document.getElementById("my_form_input").style.display = 'none';
}
}
document.getElementById("my_checkbox").onclick = my_toggle_func;
You are looking for Javascript instead of Django. Since Django does only backend serving and logic, it can't handle any changes happening in the front-end directly. If you don't need to interact with the backend at all during this process, you can simply make javascript (jQuery perhaps) listen for changes in the checkboxes states and if they change, make the form field visible. Form field can be prerendered with Django invisibly (i.e. using <input type="hidden">). Then you can remove the hidden state using Javascript.
If you do need to interact with backend, then you'll want to do basically the same thing with the exception that you render the page with Django, listen for checkbox changes and if the change occurs, you send an AJAX request to a Django view that handles that request and returns the data you need (i.e. from database or some complex calculations that shouldn't be in the front-end). To return the data, you can use Django's JsonResponse.
I'm using Mustache to have the same templates on PHP side and on Javascript side, like this:
{{> myTemplate}}
<script id="myTemplate" type="x-tmpl-mustache">
{{> myTemplate}}
</script>
Problem: on page load, the partial "myTemplate" contained between the two "script" tags is changed by the data from my PHP. I need it unchanged in order to use it with my javascript.
Is there a way to do that please?
Edit:
I found a solution : Chevron.js (a jQuery plugin) in addition to Mustache. I did something like this:
html:
<head>
<link href="templates/myTemplate.mustache" rel="template" id="myTemplate" />
</head>
javascript:
$("#myTemplate").Chevron('render', data, function (html) {
// do something with 'html'
});
With Contemplate you could do sth like the following:
<% %>
<!-- server-side template -->
<% $server_data %>
<script id="myTemplate" type="x-contemplate">{% %}
<!-- client-side template -->
{% $client_data %}
</script>
Each template defines its own delimiters, in a modular way, thus any template combination and nesting, eg have a server-side template include a client-side template, is handled optimaly (see related issue, https://github.com/foo123/Contemplate/issues/5)