I have a view, that upn called, starts a download:
class PrintView(TemplateView):
template_name = "proj/listview.html"
def get(self, request, *args, **kwargs):
try:
filepath = TMP.IMG()
if os.path.exists(filepath):
with open(filepath, 'rb') as fh:
response = HttpResponse(fh.read(), content_type="application/force-download")
response['Content-Disposition'] = 'inline; filename=' + os.path.basename(filepath)
messages.success(request, "image download started ...")
return response
messages.error(request, "something went wrong!")
return redirect("index")
except Exception as e:
messages.error(request, e)
return redirect("index")
in my template I call a modal window with a download button, similar to:
<button id="dl_modal_submit" type="submit"</button>
which has some javascript on top:
let somvar = null;
$('#dlModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var modal = $(this);
});
document.querySelector('#dl_modal_submit').addEventListener('click', event => {
const params = {
somevar,
}
const paramStr = new URLSearchParams(params).toString();
const dl= `/dl/${somevar}`;
window.open(dl, "_self");
});
Thing is, when I click on the button I want:
close the modal
start the image download
redirect to index
it is suggested here that I do that using two views, but surely there must be another way to do this in the javascript part?
Absolutely!
script.js:
$('#button').click(function() {
// close modal:
$('#modal').hide();
// download files:
window.open('the_download_url', '_blank');
// relocate:
window.location = 'the_redirect_url';
});
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 using Flask with one of my wtforms TextAreaFields mapped to Trix-Editor. All works well except for images using the built toolbar attach button.
I'd like to save the images to a directory on the backend and have a link to it in the trix-editor text. I'm saving this to a database.
I can make this work by adding an <input type='file'/>in my template like so:
{{ form.description }}
<trix-editor input="description"></trix-editor>
<input type="file"/>
and the following javascript which I found somewhere as an example.
document.addEventListener('DOMContentLoaded', ()=> {
let contentEl = document.querySelector('[name="description"]');
let editorEl = document.querySelector('trix-editor');
document.querySelector('input[type=file]').addEventListener('change', ({ target })=> {
let reader = new FileReader();
reader.addEventListener('load', ()=> {
let image = document.createElement('img');
image.src = reader.result;
let tmp = document.createElement('div');
tmp.appendChild(image);
editorEl.editor.insertHTML(tmp.innerHTML);
target.value = '';
}, false);
reader.readAsDataURL(target.files[0]);
});
// document.querySelector('[role="dump"]').addEventListener('click', ()=> {
// document.querySelector('textarea').value = contentEl.value;
// });
});
This saves the image embedded in the text. I don't want that because large images will take up a lot of space in the database and slow down loading of the editor when I load this data back into it from the database.
It is also ugly having the extra button when Trix has an attachment button in it's toolbar. So, I'd like to be able to click the toolbar button and have it upload or if that is too hard, have the built in toolbar button save the image embedded.
To save the images to a folder instead of embedded, the Trix-editor website says to use this javascript https://trix-editor.org/js/attachments.js
In this javascript I have to provide a HOST so I use
var HOST = "http://localhost:5000/upload/"
and I set up a route in my flask file:
#tickets.post('/_upload/')
def upload():
path = current_app.config['UPLOAD_DIRECTORY']
if request.method == 'POST':
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
flash('No selected file')
return redirect(request.url)
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
session["id"] = filename
file.save(os.path.join(path, filename))
return send_from_directory(path, filename)
I can select an image and it shows in the editor and it uploads to the directory on my backend as expected. But when I save the form the location of the image is not in in the document text (should be in there as something like <img src="uploads/image.png>
On the python console I see
"POST /_upload/ HTTP/1.1" 404 -
I can make this go away if I change the return on my route to something like return "200" But all the examples I have seen about uploading files have this or a render_template. I don't want to render a template so I'm using this although I don't really understand what it does.
I'm assuming I need to return something the javasript can use to embed the image link in the document. But I'm a total newbie (like you didn't figure that out already) so I don't know what to do for the return statement (assuming this is where the problem lies).
If anyone else is trying to figure this out this is what I ended up doing.
Still needs a but of tweaking but works.
First I modified the example javascript for uploading to use Fetch instead of XMLHttpRequest
const editor = document.querySelector('trix-editor');
(function() {
HOST = '/_upload/'
addEventListener("trix-attachment-add", function(event) {
if (event.attachment.file) {
uploadFileAttachment(event.attachment)
}
// get rid of the progress bar as Fetch does not support progress yet
// this code originally used XMLHttpRequest instead of Fetch
event.attachment.setUploadProgress(100)
})
function uploadFileAttachment(attachment) {
uploadFile(attachment.file, setAttributes)
function setAttributes(attributes) {
attachment.setAttributes(attributes)
alert(attributes)
}
}
function uploadFile(file, successCallback) {
var key = createStorageKey(file)
var formData = createFormData(key, file)
fetch(HOST, {method: 'POST', body: formData}).then(function(response){
response.json().then(function(data){
alert(data.file, data.status)
if (data.status == 204) {
var attributes = {
url: HOST + key,
href: HOST + key + "?content-disposition=attachment"
}
console.log(attributes)
successCallback(attributes)
}
})
})
}
function createStorageKey(file) {
var date = new Date()
var day = date.toISOString().slice(0,10)
var name = date.getTime() + "-" + file.name
return [day, name ].join("/")
}
function createFormData(key, file) {
var data = new FormData()
data.append("key", key)
data.append("Content-Type", file.type)
data.append("file", file)
return data
}
})();
Then modified my Flask route (which I'll refactor, this was just slapped together to make it work):
def upload():
path = current_app.config['UPLOAD_DIRECTORY']
new_path = request.form["key"].split('/')[0]
file_upload_name = os.path.join(path, request.form["key"])
print(file_upload_name)
upload_path = os.path.join(path, new_path)
if request.method == 'POST':
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
if file.filename == '':
flash('No selected file')
return redirect(request.url)
if file and allowed_file(file.filename):
if not os.path.exists(upload_path):
os.mkdir(upload_path)
filename = secure_filename(file.filename)
session["id"] = filename
attachment = os.path.join(upload_path, filename)
file.save(attachment)
file.close()
os.rename(attachment, file_upload_name)
print(os.listdir(upload_path))
return jsonify({'file': attachment, 'status': 204})
return f'Nothing to see here'
Anyway, I hope that helps as it took me ages to figure out.
I want to check conditional on each post if the logged in user has liked it or not, accordingly I want to pass in a context which assigns the button a CSS class for the default value of color when the page loads.
I don't want to use to use HTML if/else condition as I'm using JavaScript to change the color of the button when clicked.
Even though I'm able to change the color once I click but I'm stuck at how to pass in the default condition of the post whenever the page loads.
This is the JavaScript code :
window.onload = function(){
var thumb_up = document.getElementById('thumb_up');
thumb_up.style.cursor = 'pointer';
thumb_up.onclick = function(){
var req = new XMLHttpRequest();
var id = this.getAttribute('data-id');
var url = '/api/like/'+id+'?format=json';
req.onreadystatechange = function(){
if(this.readyState==4 && this.status==200){
// var data = eval(req.responseText);
data = JSON.parse(req.responseText);
var likes = data.likes;
document.getElementById('likes-count').innerHTML = likes+' votes';
//changing color
if(data.liked=='true'){
thumb_up.className = "material-icons thumb_up_liked";
} else{
thumb_up.className = "material-icons thumb_up";
}
}
};
req.open("GET", url, true);
req.send();
}
}
Also, I tried sending the default value for CSS/HTML class from backend, but I'm messing up the syntax. Can't figure out the logic to send it from backend either.
class PostListView(ListView):
model = Post
#generic format : <app>/<model>_<viewtype>.html
template_name = 'home_login.html'
context_object_name = 'post'
ordering = ['-date']
paginate_by = 5
def get(self, request, *args, **kwargs):
post = Post.objects.all()
post_self = self.get_object()
class_name = "thumb_up_liked"
context = {
'class': class_name,
'post': post,
}
if request.user in post_self.likes.all():
return render(request, 'home_login.html', context)
You can collect the value of context variable class in a javascript variable in your home_login.html file as:
<script>
var thumbs_class = {{ class }};
</script>
Then you can use this value in your javascript code at required place as:
thumb_up.className = "material-icons "+ thumbs_class;
Make sure that your above javascript loads after declaration of the variable.
I'm trying to redirect to another page through JS(sending parameters)
I made the following code to that purpose, it does redirect and the requested page loads up 'ok'
window.location.replace(`http://10.0.30.11:3000/ProteseWEB/pages/detail/${path}?id=${param}`)
The problem is: When the requested page opens, it display an 404 not found on the network tab.
I don't understand why this is occuring, since the page I want is loaded 'perfectly'
The error on the network tab:
Edit(1)
#jlemley and #James Thank you for your answer!!!
Indeed the 404 request and the URL that I requested were different. So I changed the function a little bit.
Here's the code:
openPageDetail = function (path, params, method = 'POST') {
let iplocal = 'http://10.0.30.11:3000/ProteseWEB/pages/detalhe/'
const form = document.createElement('form');
form.method = method;
form.action = iplocal + path;
for (const key in params) {
if (params.hasOwnProperty(key)) {
const hiddenField = document.createElement('input');
hiddenField.type = 'hidden';
hiddenField.name = key;
hiddenField.value = params[key];
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
I tried to make it as a form submit, still, the error occurs
In addition, there's how I call for this function.
I have a DataTable and when the user double click a row, it opens up a detail page for the desired record.
$('.table').on('dblclick', function(e) {
if ((!(e.target.classList.contains('sorting_asc'))) && (!(e.target.classList.contains('sorting_desc')))) {
openPageDetail('contas-a-pagar', {
id: e.target.parentElement.id
});
}
});
This is my index.html file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
// setup some JSON to use
var cars = [
{ "make":"Porsche", "model":"911S" },
{ "make":"Mercedes-Benz", "model":"220SE" },
{ "make":"Jaguar","model": "Mark VII" }
];
window.onload = function() {
// setup the button click
document.getElementById("theButton").onclick = function() {
doWork()
};
}
function doWork() {
// ajax the JSON to the server
$.post("result", JSON.stringify(cars), function(){
});
// stop link reloading the page
event.preventDefault();
}
</script>
This will send data using AJAX to Python:<br /><br />
<form action = "/result" method = "POST">
<button id = "theButton" class ="button">
<span>
<i >Click</i>
</span>
</button>
<form>
This is my json_io.py file to run Flask:
#!flask/bin/python
import sys
from flask import Flask, render_template, request, redirect, Response
import random, json
app = Flask(__name__)
#app.route('/')
def output():
# serve index template
return render_template('index.html')
#app.route('/result', methods = ['POST', "GET"])
def worker():
# read json + reply
data = request.get_json(force = True)
print(data)
return render_template('result.html', result = data[0]["make"])
if __name__ == '__main__':
# run!
HOST = '127.0.0.1'
PORT = 4100
app.run(HOST, PORT, debug = True)
After running the command line and click on click button. I got what I want in the Chrome console.
In order to get into http://127.0.0.1:4100/result , I will comment event.preventDefault(); in index.html. However, when I rerun again, it shows me Bad Request Failed to decode JSON object: Expecting value: line 1 column 1 (char 0)
Are there any ideas on how I can fix this ?
In the index.html file, make a placeholder that will be filled out by the js code handling your AJAX request:
<span id='ajax_result'>placeholder</span>
Then, in the python code, you don't really need to go through the template and can return a string straight away:
#app.route('/result', methods = ['POST', "GET"])
def worker():
data = request.get_json(force = True)
return data[0]['make']
Then, in js, grab the result and put it in the placeholder span:
function doWork() {
$.post("result", JSON.stringify(cars), function(reply){
$('#ajax_result').text(reply);
});
event.preventDefault();
}
Click the button and enjoy your Porsche!