In this step I'm trying to avoid making a form to send data over to django from the frontend.
Ideally I would like to pass a simple string to the queryset with an onclick button, so I can make the tag filters on my Post model and show the ones with the tags from the string input. (just send the string to the queryset, I can deal with the split() and strip() to make it valid)
The simplified html would be something like
<input type="text" name="tag_filter">
<button type="button" onclick="Tag_Filter()">Filter</button>
<script>
function Tag_Filter() {
var tags;
tags = document.getElementById("tag_filter");
}
</script>
And the ListView
class PostListView(ListView):
model = Post #.objects.filter(tags__name__in=["black&white", "red"]).distinct()
template_name = 'post/home.html' # <app>/<model>_<viewtype>.html
#queryset = Post.objects.all()
context_object_name = 'posts'
#ordering = ['-date_posted']
def get_queryset(self):
tag_list = #the return from the Tag_Filter() js
return Post.objects.filter(tags__name__in=tag_list).annotate(num_tags=Count('tags')).filter(num_tags__gte=len(tag_list)).order_by('-date_posted').distinct()
urls.py
urlpatterns = [
path('', PostListView.as_view(), name='post-home'),
other_paths()
]
I suggest use ajax, then your first step is implement ajax ...ajax is from Jquery then you need include the jquery on your template only for one file html or if your prefer in your base.html on the end of file before from your body end tag:
<!-- jQuery library -->
<script src="{% static 'Jquery/jquery.min.js' %}"></script>
....
...
all my files js
....
</body>
</html>
for download this jquery.min.js , please go to this link and save the file in to folder: static/Jquery/:
Link for download Jquery min.js
Don't forget save as jquery.min.js
The next is setup your settings.py for accept the static files:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/static/',
]
the next is put the tag for load static files on the top of your file html or base.html as you wish:
{% load staticfiles %}
<!DOCTYPE html>
<html>
...
...
...
<!-- jQuery library -->
<script src="{% static 'Jquery/jquery.min.js' %}"></script>
....
...
all my files js
....
</body>
</html>
ok, now we include $.ajax first you need include on your button a function that recive your value from your input:
<input type="text" name="tag_filter" id ="tag_filter">
<button type="button" onclick="tag_filter()">Filter</button>
now your function tag_filter:
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
//RETURN YOUR TOKEN FROM DJANGO FOR SEND FROM AJAX
return cookieValue;
}//end function getCookie
function tag_filter(){
var tag_filter = $("#tag_filter").val();
if(tag_filter == '' || tag_filter == null){
alert('write yout filter for search !!');
return false;
}
//now we include the ajax call
//token
var csrftoken = getCookie('csrftoken');
$.ajax({
type: "GET",
url: "search_filter",
data:{
csrfmiddlewaretoken : csrftoken,
tag_filter:tag_filter,
},
dataType: "json",
success: function(data) {
code = data.result;
if(code=='ok_select'){
// here write you code for the success answer from ajax call
console.log(data);
}
},
error: function( jqXHR, textStatus, errorThrown ) {
alert('Error ' + jqXHR.responseText);
}//end error
});
}
now you need create a def for search with the parameter example:
from django.http import HttpResponse, JsonResponse
...
..
def SearchFilter(request):
filter = request.GET['tag_filter']
....
....
data ={
'result':'ok_select'
'data': #your query
}
return JsonResponse(data, safe=False)
now you need declare this def on yours urls.py example:
from myapp.views import SearchFilter
urlpatterns = [
url(r'^search_filter', SearchFilter, name='search_filter'),
...
...
]
this is all... on the case of ajax this return success answer by console check this answer on the console from your web browser favorite..
and good luck..!!
Related
How do I pass a django model to javascript?
Specifically, I want to pass a django Movie model to javascript.
In javascript, I would like to display the id something in the movie model at the time of score with an if statement.
def index(request):
if Movie.objects.order_by('-stars').exists():
movie = list(Movie.objects.order_by('-stars'))
if TV.objects.order_by('-stars').exists():
tv = TV.objects.order_by('-stars')
print(tv)
context = {
'movie':movie,
}
return render(request, 'Movie/index.html',context)
fetchTrendingResults("all", "week")
var mediaType = document.getElementById("media_type")
mediaType.addEventListener("change", function(event) {
fetchTrendingResults(mediaType.options[mediaType.selectedIndex].value, "day")
})
function fetchTrendingResults(media_type, time_window) {
var trendingDiv = document.getElementById("trendings")
trendingDiv.innerHTML = ""
if (media_type == "score"){
var js_list = {{movie}};
}
else{
fetch(`/api/trendings?media_type=${media_type}&time_window=${time_window}`, {
method: "GET",
headers: {
"Content-Type": "application/json"
}}
// todo:movieとTVのIDをもらってこれをURLにFethして映画とTVの情報をそれぞれでスターが高い順に表示する。
)
.then(res => res.json())
.then(data => {
for (let i=0; i<data.results.length; i++) {
var mainDiv = document.createElement("div");
mainDiv.setAttribute("class", "card");
mainDiv.setAttribute("style", "width: 18rem;");
var img = document.createElement("img");
img.setAttribute("src", "https://image.tmdb.org/t/p/w200" + data.results[i].poster_path);
img.setAttribute("class", "card-img-top");
img.setAttribute("alt", "...");
var body = document.createElement("div");
body.setAttribute("class", "card-body");
var title = document.createElement("h5");
title.setAttribute("class", "card-title");
if (data.results[i].name) {
title.innerHTML = data.results[i].name;
} else {
title.innerHTML = data.results[i].title;
}
//var text = document.createElement("p");
//text.setAttribute("class", "card-text");
//text.innerHTML = data.results[i].overview;
var link = document.createElement("a");
link.setAttribute("href", "/" + data.results[i].media_type + "/" + data.results[i].id + "/");
link.setAttribute("class", "btn btn-primary");
link.innerHTML = "View Details";
body.appendChild(title);
//body.appendChild(text);
body.appendChild(link);
mainDiv.appendChild(img);
mainDiv.appendChild(body);
document.getElementById("trendings").appendChild(mainDiv);
}
})
}
}
How do I pass a django model to javascript?
Specifically, I want to pass a django Movie model to javascript.
In javascript, I would like to display the id something in the movie model at the time of score with an if statement.
You can send model data by just returning JsonResponse from the view (and for example creating JSON dict by forlooping QuerySet, or using model_to_dict Django built-in method) or by preserving your logic and sending html you need to override - even better - you can do both ways at the same time.
So, basically you write view like this:
from django.forms import model_to_dict
from django.http import Http404
def custom_ajax_view(request):
if request.method != 'POST':
raise Http404
movies = Movie.objects.order_by('-stars')
movie_dict = {}
if movies.exists():
movie_dict = {obj.id: model_to_dict(obj) for obj in movies}
tv = TV.objects.order_by('-stars')
tv_dict = {}
if tv.exists():
tv_dict = {obj.id: model_to_dict(obj) for obj in tv}
context = {
'movie': movie,
}
html = render_to_string(
'Movie/index.html', context=context)
return JsonResponse({
'movies': movie_dict,
'tvs': tv_dict,
'html': html,
})
And then you retrieve data via Ajax method (I prefer using jQuery for that) by writing:
$.ajax({
url: CUSTOM_AJAX_URL,
type: 'post',
dataType: 'json',
success: function (data) {
// Here you retrieve your data and you can do something with it.
console.log(data)
}
});
You also can resolve your CUSTOM_AJAX_URL using template logic (post it at the end of template)
<script>
const CUSTOM_AJAX_URL = "{% url 'custom_ajax_view' %}";
</script>
<script src="{% static 'your_script_name.js' %}"></script>
Then your script should see the CUSTOM_AJAX_URL (if you use script not directly by using inline method, but including script via script tag and placing it with static method in the code). If you place it directly, you can pass URL directly to the AJAX method.
I'm trying to add a custom button in each row next to a user to the django admin page which makes it easier for the admin to click the button and generate a password reset link for a particular user rather than navigate to the hidden actions section of the django admin page.
Something like this - https://hakibenita.com/how-to-add-custom-action-buttons-to-django-admin
Following is the code I've implemented and it works and navigates to a new page with the correct reset-password request and the reset_password() method executes with a link being sent to the user.
However, when I click the button, I would like to send an AJAX GET request to the same url as above and just a show an alert to the admin on request completion instead of navigating to a new page. Currently I'm unable to run the javascript code using the format_html method in Django (see code below)
class UserAdmin(Admin.modelAdmin):
list_display = ('name', 'email', 'custom_actions')
form = forms.UserAdminForm
def get_urls(self):
urls = super().get_urls()
custom_urls = [
url(
r'reset-password/(?P<user_id>.+)',
self.admin_site.admin_view(self.reset-password),
name='reset-password',
),
]
return custom_urls + urls
def custom_actions(self, obj):
user = user_model.User.get(user_id=obj.id)
password_reset_url = reverse('admin:reset-password', args=[user.id])
return mark_safe(format_html(
f'<a class="button" onclick="parent.location=\'{password_reset_url}\'" >Reset Password</a> '
custom_actions.short_description = 'Custom Actions'
custom_actions.allow_tags = True
def reset_password(self, request, password_reset_id):
password_reset.send_password_reset_link(password_reset_id=password_reset_id)
return HttpResponse(status=200)
Below is the HTML/JS code that I was testing for the behavior I want on the page and works, I was hoping to the stitch the same into the above Django code but Django cannot execute and just shows the script as a string on the admin page.
<button id='jax' class="button">AJAX</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#jax").click(function(){
$.ajax({
type : "GET",
url : "my-dynamic-url",
timeout:10,
jsonp : "jsonp",
success : function (response, textS, xhr) {
console.log('oof')
alert("Password reset link has been resent");
},
error : function (xmlHttpRequest, textStatus, errorThrown) {
if(textStatus==='timeout')
alert("request timed out");
}
});
});
});
</script>
Is there a correct way to integrate the above javascript code on admin page on the click of the button?
Are you missing out on commas? From an example according to the documentation:
format_html("{} <b>{}</b> {}",
mark_safe(some_html),
some_text,
some_other_text,
)
Maybe you should wrap {password_reset_url} in commas and see if that works.
If this does not solve your problem, elaborating on this will be helpful:
Django cannot execute and just shows the script as a string on the admin page.
Which script are you referring to?
The solution:
Python:
class UserAdmin(Admin.modelAdmin):
list_display = ('name', 'email', 'custom_actions')
form = forms.UserAdminForm
def get_urls(self):
urls = super().get_urls()
custom_urls = [
url(
r'reset-password/(?P<user_id>.+)',
self.admin_site.admin_view(self.reset-password),
name='reset-password',
),
]
return custom_urls + urls
def custom_actions(self, obj):
user = user_model.User.get(user_id=obj.id)
password_reset_url = reverse('admin:reset-password', args=[user.id])
return mark_safe(format_html(
f'<a class="button" onclick="send_password_link(\'{password_reset_url}\'") >Reset Password</a> '
custom_actions.short_description = 'Custom Actions'
custom_actions.allow_tags = True
def reset_password(self, request, password_reset_id):
password_reset.send_password_reset_link(password_reset_id=password_reset_id)
return HttpResponse(status=200)
HTML:
This should be under base-app/templates/your-app/change_list.html
{% extends "admin/change_list.html" %}
{% load static %}
{% block content %}
<script src="{% static 'js/passwordReset.js' %}"></script>
<!-- Render the rest of the ChangeList view by calling block.super -->
{{ block.super }}
{% endblock %}
Javascript:
This should be under base-app/static/static/js/passwordReset.js
function send_password_link(url) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert('Password Reset Sent');
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
I need to make a hyperlink in Django for a POST-request. For example, "Add to blacklist" in the menu. It's easy to do with a form with a submit button but I need a menu item not button. I found Javascript code for doing this but it gives me an error 403: CSRF token missing or incorrect. And I couldn't find understable for me information how to insert csrf-token into the Javascript function. I don't know Javascript, I write in Python.
Here's the function from https://ru.stackoverflow.com/questions/65237/Вызов-метода-post-через-ссылку:
<script type="text/javascript">
function postToUrl(path, params, method) {
method = method || "post";
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
document.body.appendChild(form);
form.submit();
}
</script>
Here's how I call it:
To blacklist
This is my view:
class AddToBlacklistView(View):
def post(self, request, watched_user_id, next_url=None, *args, **kwargs):
if not next_url:
next_url = '../profile.html/user_id{0}'.format(watched_user_id)
if request.user.is_authenticated:
try:
user = User.objects.select_related("profile").get(username=request.user)
watched_user = User.objects.select_related("profile").get(id=watched_user_id)
except User.DoesNotExist:
raise Http404
if watched_user.id == user.id:
return redirect(next_url)
if watched_user not in user.profile.blacklist.all():
user.profile.blacklist.add(watched_user)
user.save()
if watched_user.profile in user.profile.friends.all():
user.profile.friends.remove(watched_user.profile)
if user.profile in watched_user.profile.friends.all():
friendship = Friendship.objects.get(user=watched_user.profile, friend=user.profile)
if friendship.status != 3:
friendship.status = 2
friendship.save()
if watched_user in user.profile.bookmarks.all():
user.profile.bookmarks.remove(watched_user)
return redirect(next_url)
else:
return redirect(next_url)
I tried this and it didn't help:
<meta name="csrf-token" content="{{ csrf_token }}">
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
</script>
I also tried to pass as params this and it didn't help:
csrfmiddlewaretoken: '{{ csrf_token }}'
Upd:
I also tried to add the decorator for a view and it continued to throw the same error:
from django.utils.decorators import method_decorator
from django.views.decorators.csrf import csrf_protect
#method_decorator(csrf_protect)
def post ...
I also tried # method_decorator(ensure_csrf_cookie) on the view that renders the page with HTML that calls the Javascript function and I still get 403 error.
I also tried this code from https://docs.djangoproject.com/en/3.0/ref/csrf/ and it continued to throw the same 403 error.
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
Please help me!
I found a solution here:
submitting a hyperlink by GET or POST
I had to modify it because on my page there is a list of people with a menu for each one of them in such a way:
<form id="myform1_{{ message.recipient.user.id }}" method="post" action="/account/add_to_blacklist/watched_user_id{{ message.recipient.user.id }}/next={{ request.get_full_path }}" >
{% csrf_token %}
</form>
Add to blacklist
I'm trying to send ajax post requests to my server to add or remove objects by using just checkboxes (not form). Here is a screenshot of what I got visually:
https://pasteboard.co/IMHHSa6.png
When I click any of the checkboxes I got http500 (internal server error) as response. In cmd I see the error that says there is no matching query: app1.models.Influencer.DoesNotExist: Influencer matching query does not exist.
The thing is I'm pretty sure that the object with that id exists in the database. I spend much time inspecting Django's CSRF documentation and watching youtube videos about django-ajax examples. Here is my code:
views.py:
class InfluencerListView(LoginRequiredMixin, ListView):
model = Influencer
context_object_name = 'influencers' # not necessary, default is object_list
def post(self, request, *args, **kwargs):
inf_id = request.POST.get('inf.id')
list_id = request.POST.get('list.id')
i = Influencer.objects.get(id=inf_id)
l = InfluencerList.objects.get(id=list_id)
l.influencers.add(i)
data = {
'result' : 'some result'
}
return JsonResponse(data)
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
logged_in_user = self.request.user
context['myLists'] = logged_in_user.lists.annotate(influencers_count=Count('influencers'))
return context
models.py:
class Influencer(models.Model):
# fields are not included for the sake of clarity
class InfluencerList(models.Model):
name = models.CharField('Name:', max_length=20, blank=False)
owner = models.ForeignKey(User, on_delete=models.CASCADE, related_name='lists')
influencers = models.ManyToManyField('Influencer', related_name='lists')
scripts.js
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
function myFunc(_self) {
inf_id = _self.getAttribute('data-inf_id');
list_id = _self.getAttribute('data-list_id');
console.log(inf_id + " " + list_id); # I CAN SEE THOSE IDS IN CONSOLE AND THEY EXIST IN DB
var csrftoken = getCookie('csrftoken');
if(_self.checked == true){
console.log("checked!");
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$.ajax({
method: 'POST',
url: '/influencers',
data: {
'inf_id': inf_id,
'list_id': list_id,
'csrfmiddlewaretoken': csrftoken
},
dataType: 'json',
success: function (data) {
console.log("succes!");
}
});
}
else{
console.log("unchecked!");
}
}
I also added this line somewhere in my view file (where I put it doesn't matter as long as it's in the body since I'm not using any forms. Please correct me if I'm wrong):
<input type='hidden' name='csrfmiddlewaretoken' value='{{ csrf_token }}' />
In Django Template Without using form i want to upload files to my web server. so for that i`m using javascript library called dropzonejs.
I exactly follow this tutorial bootstrap dropzonejs. I setup everything to run the demo.
You see i decided not to use form so obviously the problem csrf_token is missing when upload happens time.
My doubt is how to include csrf_token in javascript. ?
This is the information they added in their home page for how to add csrf token
sending - Called just before each file is sent. Gets the xhr object and the formData objects as second and third parameters, so you can modify them (for example to add a CSRF token) or add additional data.
Are you understand my question ? give me some idea to do that ?
You could either have the view CSRF exempt:
from django.views.decorators.csrf import csrf_exempt
class YourView(models.View):
#csrf_exempt
def dispatch(self, *args, **kwargs):
return super(YourView, self).dispatch(*args, **kwargs)
The JavaScript config would probably look something similar to this:
(function($){
$(function(){
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
crossDomain: false,
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
});
})(jQuery);