Pass html form action parameters to django view - html

I'm making an app to save mileage of a truck per state. I've already passed required data to my view, and then I thought to change my urls to more logical. And after that I faced a problem.
I don't know what should be instead of "unit.unit_number", and it is required, in my html file for it to work correctly. I didn't find anything that could explain how to deal with it.
If I try to access mywebsite.com/core/units/1/locations/add/ I get next error message:
"NoReverseMatch at /core/units/1/locations/add/"
But if I put just a number (1 for example) instead of "unit.unit_number" it loads the page normally, but I get an error after trying to post the data:
"TypeError at /core/units/1/locations/add/
_reverse_with_prefix() argument after * must be an iterable, not int"
<form action="{% url 'Core:unit_add_location' unit.unit_number %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="container">
<div class="inner-container border-full">
<button type="button" class="button button-normal" onclick="AddRow()">Add</button>
<input type="submit" class="button button-submit" name="count-ifta" value="Save">
<div class="inner-container border-top-bottom">
<table id="myTable" name="state-miles-data">
<thead>
<th class="text-blue">State</th>
<th class="text-blue">Miles</th>
</thead>
</table>
<br>
</div>
</form>
<button type="button" class="button button-normal" onclick="AddRow()">Add</button>
</div>
</div>
def unit_data(request, unit_number):
return HttpResponse(unit_number)
def unit_add_location(request, unit_number):
if "GET" == request.method:
return render(request, 'Core/add_location.html')
elif "POST" == request.method:
states_request = request.POST.getlist('states')
miles_request = request.POST.getlist('miles')
return HttpResponseRedirect(reverse('Core:unit_data', args=(unit_number)))
urlpatterns = [
path('units/', views.units_all, name = 'units_all'),
path('units/<int:unit_number>/', views.unit_data, name = 'unit'),
path('units/<int:unit_number>/locations/', views.unit_locations, name = 'unit_locations'),
path('units/<int:unit_number>/locations/add/', views.unit_add_location, name = 'unit_add_location'),
path('units/<int:unit_number>/locations/<int:report_id>', views.unit_location, name = 'unit_location'),
]
So the thing I want to make is post the data and redirect to url "mywebsite.com/units/1/locations/" that is processed by the view "unit_locations"

To the second part about the iterable: (reverse('Core:unit_data', args=(unit_number))) <<< you want (unit_number,) which is a tuple not an int. Spot the , it is important.

Related

django: html form submit without jumping into new page or refreshing/reloading

I am new to django and html. below is my first test web page of a simple online calculator.
I found a problem that when clicking the "submit" button, it tends to jump to a new web page or a new web tab. this is not what I want. Once the user input the data and click "submit" button, I want the "result" field on the page directly show the result (i.e. partially update only this field) without refresh/jump to the new page. Also I want the user input data kept in the same page after clicking "submit".
I saw there might be several different ways to do this work, iframe/AJAX. Since I am new, what is the really simplest way to achieve this goal? BTW, I dont write javascripts.
html:
<form method="POST">
{% csrf_token %}
<div>
<label>num_1:</label>
<input type="text" name="num_1" value="1" placeholder="Enter value" />
</div>
<div>
<label>num_2:</label>
<input type="text" name="num_2" value="2" placeholder="Enter value" />
</div>
<br />
<div>{{ result }}</div>
<button type="submit">Submit</button>
</form>
view.py
def post_list(request):
result = 0
if request.method == "POST":
num1 = request.POST.get('num_1')
num2 = request.POST.get('num_2')
result = int(num1) + int(num2)
print(request.POST)
print(result)
context = {
'result': result
}
return render(request, 'blog/post_list.html', context)
This is a simple example of using Ajax, which I hope will be useful to you.
first you need change post_list view:
view
from django.http import JsonResponse
def post_list(request):
if request.method == "POST":
num1 = request.POST.get('num_1')
num2 = request.POST.get('num_2')
result = int(num1) + int(num2)
return JsonResponse({"result":result})
else:
return render(request, 'blog/post_list.html', context={"result":0})
I use JsonResponse because I just want to get the result data in ajax and display it in the html , for GET request render the html file and for POST request use JsonResponse to return a json like context.
And your html file should to be a look like this:
html
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<form method="POST" id="post-form">
{% csrf_token %}
<div>
<label>num_1:</label>
<input type="text" name="num_1" value="1" placeholder="Enter value" />
</div>
<div>
<label>num_2:</label>
<input type="text" name="num_2" value="2" placeholder="Enter value" />
</div>
<br />
<div id="result" >{{ result }}</div>
<button type="submit" >Submit</button>
</form>
<script>
$(document).ready(
$('#post-form').submit(function(e){
e.preventDefault();
var serializedData = $(this).serialize();
$.ajax({
type:"POST",
url: "/your_url/",
data: serializedData,
success: function(data){
$("#result").text(data["result"]);
}
});
})
);
</script>
First I added jQuery cdn and then your html file, except that I added attribute id=post-form to the form and added id=result, then <script> tag was added and jquery function inside the tag was execute when your form Submited(detect event by the id #post-form).
And get the data(num_1, num_2) by serialize method then use Ajax to send POST reqeust to the view function(post_list), in Ajax you just need to pass serializedData and url(also you can use the Django url tag or set it in action form or...), After that we need to send data to the html(means the result data we received from the View).
in success function Ajax you can add html tag to your html file or
replace the some values,...
In Ajax, you must specify your URL to send the data.
for example if you have this url.py
urls.py
from .views import post_list
urlpatterns = [
path("posts_list/", post_list, name="post_list"),
]
In ajax you can add an address like this:
$.ajax({
type:"POST",
url: "/posts_list/",
....
Or
$.ajax({
type:"POST",
url: "{% url 'post_list' %}",
....
And if you have app_name in urls.py you can added url: "{% url 'app_name:post_list' %}",

Can anyone help me with this issue - Django View (Passing of keys)

I have the following views:
def device_port(request):
devices = Device.objects.all()
if request.method == "POST":
selected=request.POST.get('device')
devices = Device.objects.get(pk=selected)
tablename = 'dev_interface_'+selected
print("tablename: " +tablename)
cursor=connection.cursor()
cursor.execute(f"SELECT interface FROM {tablename} WHERE id >=2")
righttable = cursor.fetchall()
return redirect('/device/port/selected',{'devices':devices, 'selected': selected, 'righttable':righttable} )
return render(request, 'interface/device_port.html',{'devices':devices})
def device_port_selected(request, pk):
if request.method == "POST":
job = JobForm(request.POST)
device = devices.hostname
print(devices)
#job.associateddevice = devices.hostname
try:
selection=request.POST.get('portrange')
except:
selection = ""
messages.warning(request, "Please select the ports")
print(selection)
#job.associatedinterface = selection
return render(request, 'interface/device/port/selected/'+device+'.html',{'devices':devices, 'righttable':righttable} )
return render(request, 'interface/device_port_selected.html',{'devices':devices, 'selected': selected, 'righttable':righttable} )
urls.py
urlpatterns = [
path('', views.home, name='interface-home'),
path('device/', DeviceListView.as_view(), name='interface-device'),
path('device_edit/<int:pk>/', views.device_edit, name='device-edit'),
path('device_delete/<int:pk>/', views.device_delete, name = 'device-delete'),
path('device_add/', views.device_add, name='device-add'),
path('device/port/', views.device_port, name='device-port'),
path('device/port/selected/', views.device_port_selected, name='device-port-selected'),
path('device/routeport/', views.device_routeport, name='device-routeport'),
path('interface/', views.interface_list, name='interface-list')
]
device_port.html
<form method="POST">
<div class="form-row align-items-center">
<div class="col-md-5 my-1">
{% csrf_token %}
<label for="Hostname">Hostname</label>
<div class="input-group">
<select id = "list" class="custom-select mr-sm-2" onchange="getSelectValue();">
<option selected>Select</option>
{% for device in devices %}
<option value={{device.id}}>{{device.hostname}}</option>
{%endfor%}
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit">Go</button>
</div>
</div>
</div>
</div>
<input type ="text" name="device" id= "txtvalues" style="display:none">
</form>
So there are 2 page I am dealing with over here (/device/port and /device/port/selected). In this first page /device/port, user is required to pick a value from the drop down box and press the button Go. From here, it is intended to go to the next page which is /device/port/selected with the selected value in the first page pass to the next page.
But with the following code, I receive the error of
device_port_selected() missing 1 required positional argument: 'pk'
when moving from the first page to the next page.
You can't pass a context dictionary to a redirect. The second argument should be the URL arguments, not a context. So change the following line:
return redirect('/device/port/selected',{'devices':devices, 'selected': selected, 'righttable':righttable} )
to
return redirect('device-port-selected', pk=selected)
Note that it is better to use the name of the URL (i.e. device-port-selected) instead of the whole path as you can change paths in the future without affecting the rest of your code.

why my django profile update function not wokring?

I am only trying to test the default user profile update through UserChangeForm. Just the email field. So below are the code snippet.
views.py
#login_required(login_url="/login/")
def editUserProfile(request):
if request.method == "POST":
form = UserProfileUpdateForm(request.POST, instance=request.user)
if form.is_valid():
form = UserProfileUpdateForm(request.POST)
form.save()
return redirect('thank_you')
else:
messages.error(request, f'Please correct the error below.')
else:
form = UserProfileUpdateForm(instance=request.user)
return render(request, "authenticate\\editProfilePage.html", {'form': form})
forms.py
class UserProfileUpdateForm(UserChangeForm):
email = forms.EmailField()
class Meta:
model = User
fields = ('email', )
HTML
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="user_card">
<div class="d-flex justify-content-center">
<h3 id="form-title">Update Profile</h3>
</div>
<div class="d-flex justify-content-center form_container">
<form method="POST" action="{% url 'editUserProfile' %}">
{% csrf_token %}
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-envelope-square"></i></span>
</div>
{{form.email}}
</div>
<div class="d-flex justify-content-center mt-3 login_container">
<input class="btn login_btn" type="update" value="update">
</div>
</form>
</div>
{{form.errors}}
<script>
/* Because i didnt set placeholder values in forms.py they will be set here using vanilla Javascript
//We start indexing at one because CSRF_token is considered and input field
*/
//Query All input fields
var form_fields = document.getElementsByTagName('input')
form_fields[4].placeholder='email';
for (var field in form_fields){
form_fields[field].className += ' form-control'
}
</script>
</body>
In the user profile page, I could see the update button, and when I click on it I am redirected to the edit profile page, and I am also able to see the old email address mentioed in the email field. So far so good.
However, when I replace the old email with new one and click on the "update" button nothing happens. No error, no redirection. Nothing. The page remains there.
There were sytax errors in my HTML code, so I re-wrote the entire HTML again. That resolved the issue. Thank you

How to determine which button is pressed

I have a table in which I populate with data from the database. Some of this I have an extra feature of the delete button. But I can't understand how I get that what delete button is pressed in django
<tbody>
{% for i in list %}
<tr>
<td>{{i.id}}</td>
<td>{{i.reason}}</td>
<td>{{i.starting_date}}</td>
<td>{{i.ending_date}}</td>
<td>{{i.accept_or_not}}</td>
{% if i.accept_or_not == 'pending'%}
<td><input type="button" name="data_delete_{{i.id}}" value="delete"></td>
{%endif%}
</tr>
{% endfor%}
</tbody>
def profile_view(request):
if 'data_delete_id' in request.POST:
# i don't know how to determine the id in the button
This might be straight-forward. You can get the name of the button first and then parse the id such as:
def profile_view(request):
delete_button_id = ""
for name in request.POST.values():
if name.startswith('data_delete_'):
delete_button_id = int(name.split('_')[2])
break
# you now have the id in your delete_button_id variable
According to Django Docs for HttpRequest.POST your python code has to work as expected because POST returns a dict like Object.
def profile_view(request):
if 'data_delete_id' in request.POST:
But in your template you are using <input type="button" .
This will only trigger a client side operation. If you are not having any JS code which you have not shown here, I would say you need to use <input type="submit" instead.
I would also recommend to use <button type="submit" instead of input because from a semantic perspective it is more accurate.

html forms download file django

I am stuck with this issue in Django: I want to download a file already existing on my server through a html form. The file to be downloaded is served through a function in views. My problem is with html form and passing the file name to view. How can I pass the name of the file from form toward view without having to select the file?
In html I have:
# 'content' keeps the name of the file to be downloaded
{% block content %}
{{content}}
<table>
<tr>
<td>
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="file"/>
<br />
<input type="submit" value="Download File" />
</form>
</td>
</tr>
</table>
{% endblock %}
When I select the file and press submit button, it works but I need a different behavior: the name of the file containing results (downloadable file) to be passed to views into a variable. The views will then serve it.
The view which handled the downloadable file:
def forecast(request):
if request.method == 'POST':
#handle_download_file(request.FILES['file'], str(request.FILES['file']))
print('request.method este: ',request.method)
RESULTS_filename = 'frcst_'+ str(request.FILES['file'])
#download('GET', RESULTS_filename)
file_path = os.path.join(os.path.relpath('forecast/'), RESULTS_filename)
print (file_path)
print(settings.MEDIA_ROOT)
with open(file_path,'rb') as fh:
response = HttpResponse(fh.read(), content_type="application/vnd.ms-excel")
response['content-disposition'] = 'attachment; filename='+RESULTS_filename
print(response)
return response
HttpResponseRedirect('/forecast/')
return render(request,'result_links.html',{'content':'frcst_history.csv'})