How to save data entered in a bootstrap modal into another model - python

I am trying to create a django based load-requirement matching web-app which takes "Load details" in a model called ShipperBoardModel where people(manufacturers) post that they want certain items to be delivered somewhere, and other people(called transporters) who bid on those posts, that they can get that job done, for their chosen price.
ShipperBoardModel
class ShipperBoardModel(models.Model):
From = models.CharField(max_length=100,null=True)
To = models.CharField(max_length=100,null=True)
Type = models.CharField(max_length=100,null=True)
Length = models.CharField(max_length=100,null=True)
Weight = models.CharField(max_length=100,null=True)
Numberoftrucks = models.IntegerField(null=True)
MaterialType = models.CharField(null=True,max_length=100)
Loadingtime = models.DateTimeField(null=True)
def _str_(self):
return self.Origin
I created the first 'loads' table where many people posted their loads on it, and this is being displayed on a page "/loads/" where it shows all active loads available for bidding.
I added a "Bid now" button next to every row, clicking on which opens a form which asks the transporters what price they are willing to bid for that particular load/task.
On clicking 'Bid now', we get a pre-filled form in a bootstrap modal relative to the row it is in. Then, a transporter enters his bid for that task/load, which I want to save into another model called 'SupplierBidModel'.
I just want to figure out how to save that bid price, into that model, along with the BidID, and the transporterID which every transporter already has when they registered.
Here is the form, followed by the model:
class SupplierBidModel(models.Model):
BidID = models.AutoField(primary_key=True)
Load_ID = models.OneToOneField(ShipperBoardModel,on_delete=models.CASCADE)
Supplier_ID = models.OneToOneField(SupplierBoardModel,on_delete=models.CASCADE)
Bid_amount = models.IntegerField(null=True)
I have some data saved in my models.py, and using that model I am rendering a table. Now, for each row I want the user to enter a single entry, which should save that data into another model.
Here is the template :
{% block content %}
<table>
{% for item in data %}
<tr>
<th>From</th>
<th>To</th>
<th>Weight</th>
<th>Length</th>
<th>Type</th>
<th>Material Type</th>
<th>Number of Trucks</th>
<th>Loading Time</th>
</tr>
<tr>
<td>{{ item.From }}</td>
<td>{{ item.To }}</td>
<td>{{ item.Weight }}</td>
<td>{{ item.Length }}</td>
<td>{{ item.Type }}</td>
<td>{{ item.MaterialType }}</td>
<td>{{ item.Numberoftrucks }}</td>
<td>{{ item.Loadingtime }}</td>
<td>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal{{ item.id }}">Bid
now! for id {{ item.id }} </button>
</td>
{# {% endfor %}#}
<div class="modal fade" id="myModal{{ item.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.To }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.From }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Weight }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Length }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Type }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.MaterialType }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Numberoftrucks }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Loadingtime }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here...">Bid
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</tr>
{% endfor %}
</table>
{% endblock %}
I do not yet know how to render a form, on a page in django, where there exists a form already. The only way to render form I know of, is using the urls.py method :
urlpatterns = [
url(r'supplier', views.supplierboardfun, name='supplierboard'),
url(r'shipper', views.shipperboardfun, name='shipperboard'),
url(r'loads', views.suppliertablefun, name='supplierboardtable')
]
which calls the function suppliertablefun()
def suppliertablefun(request): # function to display shipperboardmodel
data = ShipperBoardModel.objects.all()
return render(request, 'supplierboard/board.html', locals())
I am probably missing on how to render a multiple forms with different models in django, or how to save data from an input box, and save it to the model of my liking along with some relative information.

I figured it out. I was able to do it as such
def suppliertablefun(request): # function to display shipperboardmodel
data = ShipperBoardModel.objects.all()
if request.method == 'POST':
forminput = BiddingForm(request.POST)
if forminput.is_valid():
forminput.save()
forminput = BiddingForm(request.POST)
return render(request, 'supplierboard/board.html', locals(),{'forminput': forminput})

Related

How to create Django formset from jquery dynamically form?

After user fill a basic form, the data will be showed in table, dynamically created via jquery.
index.html
<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="sourceip">Source IP:<span> *</span></label>
<input type="text" class="form-control" id="sourceip" placeholder="_._._._ , _._._._ , _._._._" value="" >
<span class="error_form" id="sourceip_error_message"></span>
</div>
<div class="col-md-6 mb-3">
<label for="destip">Destination IP:<span> *</span></label>
<input type="text" class="form-control" id="destip" placeholder="_._._._ , _._._._ , _._._._" value="" >
<span class="error_form" id="destip_error_message"></span>
</div>
</div>
<div class="mb-3">
<label for="service">Service:<span> *</span></label>
<div class="input-group">
<input type="text" class="form-control" id="service" placeholder="" >
<span class="error_form" id="service_error_message"></span>
</div>
</div>
<div class="mb-3">
<label for="comment">Comment: </label>
<textarea type="text" class="form-control" id="comment" placeholder="Add comment"> </textarea>
</div>
<hr class="mb-4">
<input type="button" class="btn btn-primary btn-lg btn-block add" value="Add rule">
</form>
<div id="tabulka" class="table col-md-10">
<form method="POST" action="#" enctype="multipart/form-data">
{% csrf_token %}
<!--{{ formset.management_form }}-->
<table >
<thead class="thead-dark">
<th scope="col">Source IP</th>
<th scope="col">Destination IP</th>
<th scope="col">Service</th>
<th scope="col">Comment</th>
<th scope="col" colspan="2">Action</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
<input type="submit" value="insert record">
</form>
</div>
script.js
$(".add").click(function () {
var SourceIP = CheckIPAdresses($("#sourceip").val());
var DestIP = CheckIPAdresses($("#destip").val());
var Service = CheckService($("#service").val());
var Comment = $("#comment").val();
for (sadd in SourceIP ){
for (dadd in DestIP){
for (srv in Service){
var markup = "<tr class='table-row' > <td class='SourceIP'> <input name='sip' type='text' class='sip' readonly value='"+SourceIP[sadd] + "'> </td> <td class='DestIP'> <input type='text' name='dip' class='dip' readonly value='"+DestIP[dadd] + "'></td><td class='Service'> <input type='text' class='port' name='port' readonly value='"+Service[srv] + "'></td><td class='Comment'> <input type='text' class='comm' name='comm' readonly value='"+Comment + "'></td> <td><a class='btn btn-xs delete'><i class='fas fa-trash-alt'></i></a></td><td><a class='btn btn-xs edit'><i class='fas fa-pencil-alt'></i></a></td></tr>";
$("#tbody").append(markup);
$(".table-row").attr('id', function (index) {
return "rec-" + index;
});
} } } });
views.py
def InsertRecord(request):
form=InsertIPForm(request.POST)
if form.is_valid():
form.save()
return redirect('app')
context = {"InsertIPForm": InsertIPForm}
return render(request, "app.html", context)
Now I need send data from this table to database. There is no problem with one record, but when I have multiple record, only last record is saved to database. I use Django and I think that the FORMSET will be the right solution. But I have no idea how to create formset from dynamically created forms.
Could you please help me? Or do you have any other idea how can I do it?
Thank you.

Get pk_id using function based view

I'm having a problem in getting the pk in my template. When I select a record it always returns the last pk ID. Btw, I'am using functional base view. Here's my collection.html:
<form method="POST" action="{% url 'single_collection' %}">
{% csrf_token %}
<table class="table" id="dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
<th>Download</th>
</tr>
</thead>
<tbody>
{% for collectionlist in collection %}
<tr>
<td>{{ collectionlist.id }}</td>
<td>{{ collectionlist.sqa_name }}</td>
<td>{{ collectionlist.status }}</td>
<td class="center"><center><button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModaldl{{ collectionlist.id }}" ><span class="glyphicon glyphicon-download-alt"></span></button></center></td>
</tr>
<div class="modal fade collectClass" id="myModaldl{{ collectionlist.id }}" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Single Collect</h3>
</div>
<div class="modal-body form-horizontal">
<div class="form-group">
<label for="inputSQAID" class="col-sm-3 control-label">SQA Name</label>
<div class="col-sm-8">
<input type="hidden" name="pk_id" id="pk_id" value="{{ collectionlist.id }}">
<input type="text" class="form-control" name="singlecollect" value="{{ collectionlist.sqa_name }}" id="inputSQAID">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success" name="single_dl">Download</button>
</div>
</div>
</div>
</div>
{% endfor %}
</tbody>
</table>
</form>
Here's my views.py:
def collection(request):
context = {
'collection': DataCollection.objects.all(),
'title': 'Data Collection',
}
return render(request, 'data_collection/collection.html', context)
def single_collect(request):
if request.method == 'POST':
pkid = request.POST.get('pk_id')
print(pkid)
all_data = DataCollection.objects.all()
return render(request, 'data_collection/collection.html', {'title' : 'Data Collection', 'data': all_data})
In my views.py, I just want first to print the pk ID of the item/record I selected in my table using the modal. But, it's always getting the last record in my database.
This is because you have a single <form> tag with all the DataCollection rows inside. You should have individual forms for each one, i.e.:
{% for collectionlist in collection %}
<form method="POST" action="{% url 'single_collection' %}">
{% csrf_token %}
...
</form>
{% endfor %}

Bootstrap modal not updating modal content

I am trying to create a table of models with a button next to them which opens a modal and has the same model row in form view. The table is being populated correctly, but the n number of bootstrap modals being created only hold the first iterable model value. Is it because bootstrap loads the content of the modals only once when the page is rendered ? What do I do to solve the problem ? Should I run a function to update the modal content according to the model data it has ??
Feel free to ask any more clarifications.
{% extends 'base.html' %}
{% load static %}
{% block content %}
<table>
{% for item in data %}
<tr>
<th>From</th>
<th>To</th>
<th>Weight</th>
<th>Length</th>
<th>Type</th>
<th>Material Type</th>
<th>Number of Trucks</th>
<th>Loading Time</th>
</tr>
<tr>
<td>{{ item.From }}</td>
<td>{{ item.To }}</td>
<td>{{ item.Weight }}</td>
<td>{{ item.Length }}</td>
<td>{{ item.Type }}</td>
<td>{{ item.MaterialType }}</td>
<td>{{ item.Numberoftrucks }}</td>
<td>{{ item.Loadingtime }}</td>
<td>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Bid
now! for id {{ item.id }} </button>
</td>
{# {% endfor %}#}
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.To }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.From }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Weight }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Length }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Type }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.MaterialType }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Numberoftrucks }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." value="{{ item.Loadingtime }}" disabled>
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here...">Bid
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</tr>
{% endfor %}
</table>
{% endblock %}
you can fix it by add model.pk to the modal id
in the button
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal{{ item.id }}">
Bid now! for id {{ item.id }}
</button>
and in the
<div class="modal fade"
id="myModal{{ item.id }}"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
other solution is create js function to load new data to each time as you activate the modal.

Unable to delete row in datastore

I am new to Google App Engine and datastore so please be patient :)
My code below is trying to ask for user inputs, either entering or deleting an entry, and the results will be shown directly in a table on the same page. When I tried to delete a particular entry in the datastore, the row does not get deleted in the datastore and sometimes new rows with empty data are added. Why does this happen?
class Events(ndb.Model):
name = ndb.StringProperty()
desc = ndb.StringProperty()
class Promote(webapp2.RequestHandler):
def get(self):
query = ndb.gql("SELECT * "
"FROM Events "
)
template_values = {"events" : query,}
template = jinja_environment.get_template('promote.htm')
self.response.out.write(template.render(template_values))
def post(self):
event = Events(name = self.request.get('name'), desc = self.request.get('desc'))
event.put()
self.redirect('/promote')
class Delete(webapp2.RequestHandler):
def post(self):
event = ndb.Key('Events', self.request.get('eventname'))
event.delete()
self.redirect('/promote')
app = webapp2.WSGIApplication([('/', Main),
('/publicsearch', PublicSearch),
('/promote', Promote),
('/delete',Delete)],
debug=True)
This is the html code
<div class="jumbotron">
<div class = "container">
<form action="/promote" method="post">
<fieldset>
<div class="row-fluid">
<p> Promote your event here! </p>
<div class="row-fluid">
<div class="span6">
<p> Name of event: <br>
<textarea class="input-block-level" name="name" rows="1" cols = "50"> </textarea></p>
<p> Event description: <br>
<textarea class="input-block-level" name="desc" rows="3" cols = "50"> </textarea></p>
<p><input type="submit" value="Submit">
</div>
</div>
</div>
</div>
</div>
<h4> Events feed </h4>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th width="30%">Name</th>
<th width="60%">Description</th>
<th>Delete Event</th>
</tr>
</thead>
<tbody>
{% for event in events %}
<tr>
<td>{{ event.name }} </td>
<td>{{ event.desc }} </td>
<td>
<form action="/delete" method="post">
<input type="hidden" name="eventkey" value="{{ event.key.urlsafe() }}">
<input type="submit" value="Delete">
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
Thanks!
The key is not based on the event name, because you haven't specified any key when creating the events: they'll just use a numeric id.
The better thing to do here would be to put the actual key in the hidden input: you can use the urlsafe method to output a string that can be used in templates.
<input type="hidden" name="eventkey" value="{{ event.key.urlsafe() }}">
and in the view:
event = ndb.Key(urlsafe=self.request.get('eventkey'))

how to edit data in django?

I have retrieved data from the database and displayed it in a table. Now click of EDIT button I want to edit the form.i have sucessfully insert and retrived data from the database but i cant understand how to edit and save into database.
viwes.py
def pramod(request):
p1 = request.POST.get('name',' ')
p2 = request.POST.get('address',' ')
p3 = request.POST.get('city',' ')
p4 = request.POST.get('sp',' ')
p5 = request.POST.get('country',' ')
p6 = request.POST.getlist('chk1[]',' ')
p7 = request.POST.get('sex',' ')
books = Publisher(name=p1,address=p2,city=p3,state_province=p4,country=p5,course=p6,Gender=p7)
books.save()
dataset=Publisher.objects.all()
data={
'dataset':dataset,
}
return render(request,'Publisher.html',data)
models.py
class Publisher(models.Model):
name = models.CharField(max_length=30)
address = models.CharField(max_length=50)
city = models.CharField(max_length=60)
state_province = models.CharField(max_length=30)
country = models.CharField(max_length=50)
course = models.CharField(max_length=50)
Gender = models.CharField(max_length=50)
Publisher.html
<div class="col-lg-4" style="margin-top: 100px">
<form action="/pramod/" method="POST">
{% csrf_token %}
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" />
</div>
<div class="form-group">
<label>Address</label>
<input type="text" name="address" class="form-control" />
</div>
<div class="form-group">
<label>city</label>
<input type="text" name="city" class="form-control" />
</div>
<div class="form-group">
<label>state_province</label>
<input type="text" name="sp" class="form-control" />
</div>
<div class="form-group">
<label>country</label>
<input type="text" name="country" class="form-control" />
</div>
<div class="form-group">
<label>Course</label>
<input type="checkbox" name="chk1[]" value="Dot.NET" > Dot.NET
<input type="checkbox" name="chk1[]" value="Python" > Python
<input type="checkbox" name="chk1[]" value="Django" > Django
</div>
<div class="form-group">
<label>Sex</label>
<input type="radio" name="sex" checked="checked" value="Male" >Male
<input type="radio" name="sex" checked="checked" value="Female" >Female
</div>
<button type="submit" class="btn bg-olive btn-block">save</button>
</form>
</div>
<div class="col-lg-8" style="margin-top: 100px">
<table class="table table-striped table-condensed table-bordered ">
<B class="btn-success">Data</B> <thead class="btn-primary">
<tr>
<th>Name</th>
<th>Address</th>
<th>city</th>
<th>country</th>
</tr>
</thead>
<tbody>
{% for p1 in dataset %}
<tr>
<td>{{ p1.name }}</td>
<td >{{ p1.address }}</td>
<td >{{ p1.city }}</td>
<td >{{ p1.country }}</td>
<td>edit</td>
<td><a>Delete</a></td>
</tr>
{% endfor %}
</tbody>
</table>
Looking from your code, it looks like a very raw code where you are trying to do everything yourself.
You can try out either of following, to solve this issue:
A. Class Based views (UpdateView):
In Django, Class Based views have been introduced which are highly preferred over function based views.
So, the functionality you are coding above can easily be Achieved using UpdateView in Django: https://docs.djangoproject.com/en/1.6/ref/class-based-views/generic-editing/#updateview
B. Model Forms in Django:
But, If you don't want to change the current view, then you should try Django ModelForms: https://docs.djangoproject.com/en/1.6/topics/forms/modelforms/
Here is a sample use of Model forms: http://www.pythoncentral.io/using-python-django-modelform-first-django-application/
I would highly recommend you use UpdateView, because it already uses a ModelForm behind the scene

Categories

Resources