How to handle changing boolean field from database by ajax? - javascript

There is a piece of my html:
<form action="" method="post">
{% csrf_token %}
{% if donate.is_taken == False %}
<br>
<button type="submit" class="btn" name="taken_or_not" value="not_taken">Mark as taken</button>
{% else %}
<button type="submit" class="btn" name="taken_or_not" value="taken">Mark as not taken</button
{% endif %}
</form>
There is a model:
class Donation(models.Model):
...
...
is_taken = models.BooleanField(default=False)
How to create a ajax request, that the user is able to change the value 'taken_or_not' by a single button both on the page and in the database. Without any redirects, server loading etc.
I am struggling to get it.
Thanks for help.

Make a route that will take the the donation id and return it's "is_taken".
Make a repeating call using ajax to the particular route.

Related

HTMX can trigger without attributes like hx-post-get-put...?

I have a form like below. if "Cancel Request" is clicked in the form, "delete__product" form element will be destroy. my problem here is that HTMX cannot work without (I hope not) a process like hx-post-get.... is there a solution for this?
<form method="post" id="delete__product">
{% csrf_token %}
<p>Are you sure you want to delete ""?</p>
<button href="javascript:void(1)" hx-trigger="click" hx-target="#delete__product">
Cancel Request
</button>
<button hx-post="{% url 'catalog:DeleteProduct' product.pk %}" hx-target="#delete__product">
Delete
</button>
</form>

CSRF Token problem when I add dropzone to an existing form in Django

I'm working with a Django form using dropzone to upload images. But I don't want to add the dropzone to the entire form, just to a div of it. Here is the template:
{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% block content %}
<h6>UPLOAD MULTIPLE IMAGES NOW</h6>
<br>
<div class="formdiv" style="width:100%">
<form enctype="multipart/form-data" action="upload/" methd="POST">
{% csrf_token %}
<fieldset>
<label for="yourname">Yourname
<input type="text" value="name" />
</label>
<div class="dropzone dz" id="my-dropzone">
<div class="dz-message" data-dz-message><span>{% trans "Drop here or click to upload" %}</span></div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</fieldset>
</form>
</div>
{% endblock %}
The problem is that when I try to upload any image I get a Forbidden error message with the following text:
CSRF token missing or incorrect.
Notice that if I remove the class="dropzone dz" id="my-dropzone" from the div and I put it inside the <form> tag instead, everything will work. The problem began exactly when I moved dropzone in a div because I didn't want it to apply to the whole form.
Here is my dropzone configuration code:
Dropzone.autoDiscover=false;
const myDropzone = new Dropzone('#my-dropzone',{
url:'upload/',
maxFiles:15,
maxFilesize:5, // 5 mb max
//parallelUploads:2,
// if image is horizontal, then resize it if it's more than resizeWidth
resizeWidth:1024,
// if the image is vertical, then resize if it's more than resizeHeight
resizeHeight:1024,
// also they can be mime such as image/png
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.webp",
// default is false and it allows to delete uploaded files
addRemoveLinks: true,
// this is the element where the remove button or text will be located
dictRemoveFile: "<div><span class='fa fa-trash text-danger' style='font-size: 1.5em;cursor:pointer'></span></div>",
/* the following solution failed
headers: {
'X-CSRFToken': $('meta[name="token"]').attr('content')
} */
});
What I have to do to solve this issue?
Looking at the django docs I see it being called
X-CSRFToken not X-CSRF-TOKEN. Try fixing that and uncommenting your header code.
The code I see in the docs for getting the token is
document.querySelector('[name=csrfmiddlewaretoken]').value try replacing yours with that. Just be sure you have {% csrf_token %} in your page somewhere.

in django project, I need to execute perl script with parameter through java script

I have created a submit button in a HTML and i want to execute one perl script by name "svntask.pl" while submit the button. Do i need to write separate class or def so that i can call that class or def in java sccript? could anyone please help me..
My button code is as follows.
<script type="text/javascript">
function myTag() {
alert("tagging");
svntasktag.pl
}
</script>
<td class="padded_td">
{% if subsystems.untagged %}
<!-- input type="button" value="Tag" class="Tag"/-->
<form name="tag" class="tag" onsubmit="return myTag()">
<input type="submit" value="Tag"/>
</form>
{% endif %}
</td>

How can you grab user input on a search and "append" it on the end of an HTM url in <a> tags?

So I have a basic search functionality using Django and HTML.
<input type="text" name="searchterms" id="pubsearch" style="width: 90%"/>
<br>
<input type="submit" value="Search"/>
I want to take the searchterms and append it to the end of a pagination URL which the user has the option to click, specifically where I've written the word "HERE".
{% if pubs.has_next %}
next
{% endif %}
How does one go about doing this? Do I need to catch the user input variable in javascript and then pass it along? Not sure how to go about it, any help would be appreciated. Thank you!
If you are using django form, You may bind the input value like
{% if pubs.has_next %}
next
{% endif %}

Passing parameters from webpage to server (Flask)

I'm just getting started with adding a backend into my front-end code and think flask is a good framework to start learning with.
One of the things I'm having trouble with is submitting information to the server for processing. Specifically here I have a list of radio buttons, and I want to send to a server a list of all the radio buttons the user checked when he or she hit submit. The server then processes that information and returns a new page.
This is the form:
<form action="{{ url_for('timeline') }}" method="post">
{% for each_tag in tags %}
<div class="checkbox">
<label>
<input type="checkbox" name="channel[]" value="{{each}}" >
{{each_tag}}
</label>
</div>
{% endfor %}
<button type="submit"> submit </button>
</form>
Here are the relevant functions in the main flask file:
#app.route('/')
#app.route('/index.html')
def checklist():
for rownum in range(1,sh.nrows):
row_values = sh.row_values(rownum)
all_tags.add(row_values[7])
return render_template('index.html', tags=all_tags)
#app.route('/timeline.html', methods=['POST','GET'])
def timeline(request):
//do stuff with list of checked radio buttons
return render_template('timeline.html')
I'm not exactly sure how information is passed back and forth. I can send server info to the html templates and I think once I get this example down and figure out how information is passed the other direction I can start doing some interesting things. =)
Naming the checkboxes with trailing square brackets ("channel[]") is a PHP thing, Flask doesn't need that.
Just use the same name in all the checkboxes:
<form action="{{ url_for('timeline') }}" method="post">
{% for each_tag in tags %}
<input type="checkbox" name="channel" value="{{each}}" >
{% endfor %}
<button type="submit"> submit </button>
</form>
Then to retrieve the array of selected values use request.form.getlist():
#app.route('/timeline.html', methods=['POST','GET'])
def timeline(request):
checked = request.form.getlist('channel')
# do something with checked array
return render_template('timeline.html')

Categories