DeleteView - confirm by Popup windows - html

I want to ask you, if you know, is here some point or solution how to do confirm delete item with DeleteView class by Popup bootstrap window. So I will not use template_name, but popup windows on current page.
Thank you so much for everything...!!!
To be more precise
I have this button in my index.html page
<button type="button" class=" ml-1 btn btn-outline-dark my-2 my-sm-0" data-toggle="modal" data-target="#exampleModal">
In
</button>
And here I have modal for deleting
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Are you sure to delete this?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="modal-footer">
Yes
<button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
and here is my views.py for delete
class ItemDeleteView(DeleteView):
model = Item
# template_name = 'index.html'
success_url = reverse_lazy('index')
login_url = '/accounts/login/'
def get(self, request, *args, **kwargs):
return self.post(request, *args, **kwargs)
and I don't know what to do. now... thanks

Best option would be Javascript, but you could instead redefine the get method of your DeleteView class :
Add that to your class
def get(self, request, *args, **kwargs):
return self.post(request, *args, **kwargs)
Basically the Deleteview need a post request to get trigger, it is a bit of a hack but works well.
In your template place this in your modal or popup
<form method="POST" action="{% url "your_delete_url_name" %}">
{% csrf_token %}<input type="submit" value="DELETE">
</form>
Do not forget the object id in your URL

Related

How to put button value to database Django

do you have some tips how to put buttons values to the Django sqlite database?
I have a page with some buttons with theirs values and some final button, which would send the buttons values to the database after the final button click.
Thanks.
Here is HTML intention:
<body>
<div class="row">
<form action="" method="post">
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-lg overflow-hidden" value="1">Example1</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-lg overflow-hidden" value="2">Example2</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-lg overflow-hidden" value="3">Example3</button>
</div>
</div>
<input type="submit" value="Send to database">
</form>
</body>
class ValuesButtons(models.Model):
value = models.CharField(max_length=100, verbose_name="Value")
For Example: user clicks on example 1, next on Submit and it will send to database as value 1
If you are trying to submit the values in your buttons to your django database, you would have to first change your buttons by adding a name to them like this:
<button type="button" class="btn btn-primary btn-lg overflow-hidden" value="1" name="btn-1">Example1</button>
then inside your view, you could check to see if the button was pressed and there is a value in POST. Also, this won't work if your value is "0":
if (request.method == "POST):
if (request.POST.get('btn-1', False)):
new_value_button = ValueButtons(value=request.POST.get(
'btn-1'))
new_value_button.save()
This will get and save the values of the specific button pressed.

How to handle error when id value of table is null when using Modal confirm delete?

so i have modal to confirm delete action, but when the tabel data is null / dont have any data, got have an error because i dont have id to call? but if i have more than 1 data my delete modal code is works perfectly.. an error occurs when I delete the last data in the table.
i have already try :
the error message is :
Undefined variable $listproduct on --> index.blade.php)
Possible typo $listproduct
Did you mean $listproducts?
my loop function is #foreach($listproducts as $listproduct)
this is my button :
<td>
<a href="#" class="btn btn-danger delete"
data-toggle="modal"
data-target="#deleteModal"
productid="{{$listproduct->id}}"> Delete
</a>
</td>
this is my modal :
<!-- Delete Warning Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('products.destroy', $listproduct->id ) }}" method="post">
#csrf
#method('DELETE')
<div class="modal-body">
<label for="id">
<input id="id" name="productid">
</label>
<h5 class="text-center">Are you sure you want to delete this contact?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
</div>
</form>
</div>
</div>
</div>
<!-- End Delete Modal -->
this is my script to get ID ( I use this when i write this code :
<form action="{{ url('delete', 'id' ) }}" method="post">
but still not works
) :
$(document).on('click','.delete',function(){
let id = $(this).attr('productid');
$('#id').val(id);
});
this is my Product Controller :
public function destroy($id): RedirectResponse
{
$deleteads = Product::findOrFail($id);
$deleteads->delete();
return redirect('products');
}
and this is my route (iam using Resource):
Route::group(['middleware' => ['auth']], function() {
***Route::resource('products', ProductController::class);***
Route::delete('/selected-products', [ProductController::class, 'deleteSelectedItem'])->name('products.deleteSelected');
});
First, you can't use your own productid attribute in HTML, thus you should use data attribute you save your information.
Second, your form in the modal doesn't get it's action attribute updated and thus only One product ID remains in the action attribute.
Try putting a # in the action first, and then when an item is clicked to be deleted, use JQuery to update your form's action and put the proper URL and the ID of the product.
Your ID should be saved in data attribute like below:
<td>
<a href="#" class="btn btn-danger delete"
data-toggle="modal"
data-target="#deleteModal"
data-productid="{{$listproduct->id}}"> Delete
</a>
</td>
Form in the modal:
<form action="#" method="post" id="delete_product_form">
#csrf
#method('DELETE')
<div class="modal-body">
<label for="id">
<input id="id" name="productid">
</label>
<h5 class="text-center">Are you sure you want to delete this contact?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
</div>
</form>
JQuery code for handling the form's action attribute update:
$(document).on('click','.delete',function(){
let id = $(this).data('productid');
$('#delete_product_form').attr('action', '/products/' + id);
});

How to get a unique modal header for each stock?

I am trying to create a virtual stock market where I have different modals displaying information about each stock.
But the template renders as such that I am unable to get a unique modal-header for each stock.
Even after clicking on the 'CIPLA' stock I get "Buy HDFC" as the modal header.
Here is my django template.
{% for stock in user.stocks.all %}
<li class="list-group-item">
<b>{{ stock.stock_name }}</b>
<p id="curr">Current price : {{ stock.current_price }}</p>
Bought at : {{ stock.buy_price }}
<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>
<!--Modal for buy-->
<div id="buy-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Buy {{ stock.stock_name }}</h4>
</div>
<div class="modal-body">
<form method="post" action="/stocks/{{ user.id }}/{{ stock.stock_name }}/buy/" >
{% csrf_token %}
<label for="quantity">Quantity</label>
<input type="number" id="quantity-buy" name="quantity">
<button class="btn" id="confirm-buy" type="submit" >Buy</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have ended it with {% endfor %}.
The error is being caused by this line:
<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>
As you can see, this line is mapped to data-target="#buy-modal" . This means that the Dom Element with id="buy-modal" gets invoked by it.
Now if you look inside your code, you are creating more than one number of modals(but with same html id).
The root error being the multiple Dom Elements with the same id. If you look at this line:
<div id="buy-modal" class="modal fade" role="dialog">
this line is created n-times inside your Dom(because it's being run inside a loop). This means that there are n-modals with the same ID. This also means that you Dom has n-number of modals with the same id.
Now that's a wrong practice in writing html.
Every time you click on the button:
<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>
the html parser looks for the respective data-target in your html. Which clearly are n(since you created n; more than 1). Now the html always invokes the first or any specific modal every time because it parsed only one while it initialized your modal. Hence every time you click on a button, the same modal pops up
So to fix this you have to create modal with different ids and with different button triggers.
Hope this helps. Thanks.

Using one modal for multiple forms in django?

I can't figure out how to use one modal for multiple forms.
Now, I can not find a way to have only one modal for severals form that I want to create. I don't really want to have 30 modals in the html for the 30 forms that I am going to submit.
Is there another way to fill it automatically?
My model is
class Project(models.Model):
project_name = models.CharField(max_length=30)
project_status = models.IntegerField(choices=PROJECT_STATUS,default=1)
project_sponsor = models.CharField('Project Sponsor',
max_length=255,default=1)
scope = models.TextField(max_length=10240, blank=True)
description = models.TextField(max_length=10240, blank=True)
Then, I wanted to have one form for each model attribute. For example, I would like to have a form for description, then another one for scope...
class ScopeForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(ScopeForm, self).__init__(*args, **kwargs)
for field in self.fields:
self.fields[field].required = False
class Meta:
model = Project
fields = ['project_scope',]
class DescriptionForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(DescriptionForm, self).__init__(*args, **kwargs)
for field in self.fields:
self.fields[field].required = False
class Meta:
model = Project
fields = ['description',]
In my html file, I am using a modal to submit the form
Purpose</br>
<div class="modal fade" id="purpose" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">Purpose</h3>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>
The Purpose will provide a brief overview of the purpose of the project and provide enough of a description to complete
the following sections. If information to complete the following sections is not available, state that it is unavailable and
state the person accountable and schedule for completion. </label>
</div>
<div class="form-group" "width: 300px" "height: 100px" "border: 1px solid blue">
<label for="purpose">Purpose</label>
<textarea id="txtCommentHere" class="form-control" rows="3" id="purpose" placeholder="Purpose">
</textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Draft
</label></br>
<label>
<input type="checkbox"> In Progress
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
You could check out this in bootstrap documentation
Bootstrap (Many to 1) Modal
Basically you need to pass the data via js/jquery to modal.

Send data to a modal

I'm using Django and i'm trying to send data in a modal to get informations of an element.
My button to open the modal is :
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#informations">
<span class="glyphicon glyphicon-trash" aria-hidden="true">{{registration_id}}</span>
</button>
And the modal is
<div class="modal fade" tabindex="-1" role="dialog" id="information">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form method="post" action="{% url 'informations_choices' %}">
{% csrf_token %}
<input type="hidden" name="registration" value=......>
Get info about : ......
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="$('#information').modal('hide');$('#informations_choices').submit()">
Get Info
</button>
</div>
</div>
</div>
</div>
The modal open correctly, but how can transform the "......" into value (by exemple with the {{registration_id}} present in the button ?
Thanks in advance
I am assuming here that the modal is on the same page from the beginning. You can just replace the .... with {{registration_id}}. If you want to make the .... dynamic and changing over the time the person is on the page, you might want to look into javascript frameworks and work with AJAX requests.
If you want to go with plain AJAX you will end up with something like this:
$.ajax({
type: "POST",
url: "/getnewvalue/",
data: { array : items_array },
success: function (data) {
// make the changes to the DOM.
},
error: function(data) {
$("#MESSAGE-DIV").html("Something went wrong!");
}
});