I have a for loop which creates multiple modal popups and its corresponding form inside the modal pop up. I am submitting the form via Ajax method so as to not have the page refresh. However i am facing the problem that if i have multiple forms only the first form gets submitted correctly. The subsequent forms will submit the first form's value. Currently i have put my javascript in the for loop after the end form tag between {% for form,post in zipped %} and {% endfor %}. My thinking was that when the value {{post.pk}} changes I will listen in on a different form because I have used a unique form id formy{{post.pk}} as the selector in the javascript. However it is not working.
My script is:
<script>
$('#formy{{post.pk}}').on("submit" , function(e){
e.preventDefault();
$.ajax({
type:"POST",
data:{
tag:$('#tag').val(),
author:$('#author').val(),
file_name:$("#file_name").val(),
file_path:$("#file_path").val(),
unique_id:$("#key").val(),
csrfmiddlewaretoken:$("input[name=csrfmiddlewaretoken]").val(),
},
success:function(){
alert("UPDATED!!!!");
}
});
});
</script>
My html code is :
{% for form, post in zipped %}
<tr>
<td><img src={{post.file_path}} style="width: 300px;"></td>
<td>{{post.tag}} {{post.pk}}</td>
<td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal{{post.pk}}"> Edit Tag </button>
</td>
<form id="formy{{post.pk}}">
{% csrf_token %}
<div class="modal fade" id="myModal{{post.pk}}" 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">Edit Tags</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{form|crispy}} {{post.pk}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</form>
{% endfor %}
Related
I made a modal using bootstrap to delete user entries in a list view so i had to iterate with a for loop in the template so it always deletes the first object, also it never closes. How I can make the button of each entry unique that it deletes this object only.
here's the modal :
{% for obj in patients %}
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalDelete"
aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete patient!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this patient?</p>
</div>
<div class="modal-footer">
<form method="POST" action="{% url 'patients:patient_delete' obj.pk %}">
{% csrf_token %}
<input class="btn btn-danger" value="Yes" type="submit" >
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
{% endfor %}
and here's my triggering button :
<button type ="button" class ="btn btn-danger" data-toggle="modal" data-target="#modalDelete" >Delete</button>
You give all your modal forms the same id. You should disambiguate, for example by adding the primary key to your id, like:
{% for obj in patients %}
<div class="modal fade" id="modalDelete{{ obj.pk }}" tabindex="-1" role="dialog" aria-labelledby="modalDelete"
aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete patient!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this patient?</p>
</div>
<div class="modal-footer">
<form method="POST" action="{% url 'patients:patient_delete' obj.pk %}">
{% csrf_token %}
<input class="btn btn-danger" value="Yes" type="submit" >
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
{% endfor %}
and as triggering button:
<button type ="button" class ="btn btn-danger" data-toggle="modal" data-target="#modalDelete{{ obj.pk }}">Delete</button>
on my website after clicking button I want to display new form which will allow users to add opinion. Im not sure in which way I should add jquery script to my project. I tried to it on simple html site and it works, but I couldnt do the same with flask app. Here is my code:
% extends "bootstrap/base.html" %}
{% block content %}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com ajax/libs/jquery/1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#btnclick").click(function () {
$("#divpopup").dialog({
title:"Dodaj opinie",
width: 430,
height: 200,
modal:true,
buttons: {
Close:
function(){
$(this).dialog('close');
}
}
});
});
})
<div id="divpopup" style="display: none">
Here will be form
</div>
<button type="button" id="btnclick">Add opinion</button>
{% endblock %}
And after clicking on the button nothing happend. I use bootstrap and jinja2, so should I use other contents to add scripts?
You might consider using a Bootstrap Modal for this as you said you're using Bootstrap in the project.
This is a very simple example copied from their website:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
INSERT FORM HERE
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
If you're using Bootstrap 4 you should be able to copy this right in and change the IDs to match what you want.
Link to documentation: https://getbootstrap.com/docs/4.0/components/modal/
In my project I have many Buildings, and in the buildings.html I display each Building using a single image (big_image). What I want to do is load a modal every time the user clicks in a Building, this modal allows the user to see additional images of the building.
This would be very easy if I loaded each Building's modal when the user entered the page. But if I did that the page would take ages to load (because there are many Buildings), so my idea is to use jQuery's .innerHTML to append the modal html to the page when the user clicks on a Building, but when I do that the only code appended is
`{% for building in buildings %}{% if building.pk == 1(or whatever is the pk) %}{% endif %}{% endfor %}`
There might be an easier way to achieve that that I dont know
Here's my code:
buildings.js
function loadModal(objectPk){
document.getElementById("loadModal").innerHTML =
"{% for building in buildings %}{% if building.pk == "+objectPk+" %}
<div class="modal fade mymodal in " id="myModal{{ building.pk }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<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">{{ building.name }}</h4>
</div>
<div class="modal-body">
<p>{{ building.short_description }}</p>
{% for i in building.images.all %}
<img src="{{ i.image.url }}" class="img-responsive">
{% endfor %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>{% endif %}{% endfor %}";
}
All of the above is in a single line.
buildings.html
<a data-toggle="modal" data-target="#myModal{{ building.pk }}" href="" onClick="JavaScript:loadModal({{ building.pk }});"></a>
<div id="loadModal"></div>
views.py just in case
class BuildingsModalView(generic.ListView):
template_name = 'info/buildings.html'
context_object_name = 'construction_list'
queryset = Residence.objects.all() #ignore this
def get_context_data(self, **kwargs):
context = super(BuildingsModalView, self).get_context_data(**kwargs)
context['building'] = Buildings.objects.all()
# And so on for more models
return context
You can use a little bit of javascript to change the values in the modal's html. In this example, I create a link for each building, with data attributes for the img, description, and name.
Then, I add a click listener to the class of the building link. When clicked, it accesses all of those data values and pops them into the correct spot of the modal.
<!-- Create a unique link for every building -->
{% for building in buildings %}
<a href="#"
class="building-link"
data-toggle="modal"
data-target="#building-modal"
data-img="{{ building.img.url }}"
data-description="{{ building.short_description }}"
data-name="{{ building.name }}">
{{ building.name }}
</a>
{% endfor %}
<!-- This is our blank modal, with ids for the values to be injected -->
<div class="modal fade mymodal in " id="building-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<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="building-name"></h4>
</div>
<div class="modal-body">
<p id="building-description"></p>
<img id="building-img" src=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<!-- When a link is clicked, grab all the data values and pop them inro the modal -->
<script>
$('.building-link').click(function(){
$('#building-name').html($(this).data('name'));
$('#building-description').html($(this).data('description'));
$('#building-img').src($(this).data('img'));
});
</script>
Then only thing this doesn't do is do all of the building images. I would recommend just loading one to begin with and then setting up another endpoint to get all of the building images once one is selected.
I am trying to create a modal pop up and include an AJAX call inside the modal body.
The script, included AJAX. works fine.
Here is the button which calls the modal (I am working with TWIG templates)
<button class="btn btn-danger" data-id="{{ product.id }}">Delete</button>
This is the jQuery script:
$(document).ready(function() {
$('[data-id]').each(function() {
var $this = $(this),
id = $this.data('id');
$this.on('click', function(event) {
event.preventDefault();
$.post('{{ path('dashboard_ajax ') }}', {
'id': id
},
function(details) {
var $modal = $(details);
$('#confirm-delete').remove();
$('body').append($modal);
$modal.modal();
}
);
})
});
});
And this is the page with the modal
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger" role="alert">
<p>Do you really want to delete <b>{{ product.name }}?</b></p>
</div>
<img src="{{ asset('uploads/product_images/') }}{{ product.image }}" style="width: 240px;" class="img-responsive thumbnail" />
</div>
<div class="modal-footer">
<button type="button" id="misha" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-ok">Delete</a>
</div>
</div>
</div>
Now, If click on the delete button I would like remove the selected item using the related page (example: delete.php)
One way you can do is by attaching a click hander and setting the location like this
window.location.href = 'delete.php';
Or something like this
<a class="btn btn-danger btn-ok" href="delete.php">Delete</a>
If you have the product ID, that be sent to delete.php like this
<a class="btn btn-danger btn-ok" href="delete.php?ID={{ product.id }}">Delete</a>
I am trying to open up a twitter bootstrap model for the confirmation of deleting the records while constructing a simple CRUD application.
this is where the confirmation message appears in a bootstrap modal form with delete button at the end to let us delete the selected row.
<div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog" aria-labelledby="myEditModalLabel" 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"></span></button>
<h4 class="modal-title" id="myDeleteModalLabel"></h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete {{ obj.name }}?</p>
<form action="" method="post" id="delete_form" id="form-modal-body">
<div class="modal-footer">
<button class="btn btn-danger btn-small pull-left" data-dismiss="modal">
<i class="icon-remove"></i>Cancel
</button>
<button type="button" class="btn btn-primary" id="delete_submit">Delete</button>
</div>
</form>
</div>
</div>
</div>
</div>
And this is where the records are listed with a delete action at the end of each row:
<tbody id="new-day-row">
{% for day in object_list %}
<tr class="odd">
<td id='day-{{day.id}}'>{{ day.name }}</td>
<td id='workday-{{day.id}}'>{{ day.work_day }}</td>
<td class="td-actions">
<a class="red" href="#" data-toggle="modal" data-target="#myDeleteModal">
<i class="icon-trash bigger-130"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
A very simple deleteView:
class DayDeleteView(DeleteView):
model = Day
def get_success_url(self):
return reverse('day_home')
I was hoping to get an answer to trigger the delete action in jquery. I had so far tried to bind the .remove() function on the click event of the button but was not successfull whatsoever and truly not worth it to post here. I Would be very thankfull for suggestions and answers.
I'd just use on:
html:
<div class="modal-footer" id="{{obj.id}}">
jquery:
$('#delete_submit').on('click', function() {
var id = $('.modal-footer').attr('id');
$.ajax({
url: "your/delete/handler",
type: "POST",
data: { id : id },
});