So I have a table of people, with each column containing certain values. At the end of each row, I have a "Delete" button. When that button is pressed, a modal pops up to confirm if you want to proceed with deleting that person. Clicking the "Delete" button again should delete the person and display a success message for it.
With the modal, I'm trying to make sure not only that a user needs to accept the action before proceeding, but also making sure that only the specific person in question is deleted. However, when I try to clarify the request it only contains the CSRF token that I'm passing through. Even when I try to more deliberately inject the targeted person into the modal the person isn't being sent through.
The important snippets of my code, for reference:
#foreach($people as $person)
<tr id="row{{ $loop->iteration }}">
<td id="first_name_row{{ $loop->iteration }}">{{ $person->first_name }}</td>
<td id="last_name_row{{ $loop->iteration }}">{{ $person->last_name }}</td>
<td id="email_row{{ $loop->iteration }}">{{ $person->email }}</td>
<td>
<input type="button" id="delete_button_row{{ $loop->iteration }}" class="btn btn-btn-submit delete" value="Delete" onclick="delete_modal('{{ $loop->iteration }}', {{ $person }})">
</td>
</tr>
#endforeach
..........
<!-- Modal -->
<div class="modal fade" id="DeleteModal" role="dialog">
<div class="modal-dialog">
<form class="form-horizontal style-form" id="model-form" data-toggle="validator" role="form" method="post" action="/employer/delete-person">
<!-- Modal content-->
{{ csrf_field() }}
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete This Person</h4>
</div>
<div class="modal-body">
<p>Are you sure you would like to do that?</p>
<input id="delete_ex">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" id="modal-execute" class="btn btn-btn-submit">Delete</button>
</div>
</div>
</form>
</div>
</div>
......
<script>
function delete_modal(num, person){
$('#delete_button_row' + num).attr("data-toggle" , "modal");
$('#delete_button_row' + num).attr("data-target", "#DeleteModal");
$('#delete_ex').val(person);
}
.......
</script>
Related
I have the following code that is purposed to display a table of data and allow the user to add a new row by clicking a +New button, which opens a modal with the correct form, and then the user hits submit and the new row saves in the table.
I am struggling to convert the modal from static, fake data to the data coming from my SQLite3 database. Anytime I try and add my fields (e.g. { stakeholder.employee }) into the modal I get an error:
Error:
Invalid block tag on line 123: 'stakeholder.id'. Did you forget to register or load this tag?
Table of existing data with a button on top to add a new row:
<div class="col-md-12">
<button type="button" class="btn btn-primary badge-pill float-right" style="font-size: 14px; width:80px;" data-toggle="modal" data-target="#new">+ New</button>
</div>
<table class="table table-hover" style="width:90% ">
<thead>
<tr style="font-family: Graphik Black; font-size: 14px">
<th scope="col">#</th>
<th scope="col">Employee</th>
<th scope="col">Stakeholder Group</th>
<th scope="col">Quadrant</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
{% for stakeholder in stakeholder_list %}
<tr style="font-family: Graphik;font-size: 12px">
<td>{{ stakeholder.id }}</td>
<td style="font-size: 15px">{{ stakeholder.employee }}</li></td>
<td>{{ stakeholder.stakeholder_group }}</td>
<td>{{ stakeholder.stakeholder_quadrant }}</td>
<td>{{ stakeholder.description }}</td>
<td><button type="button" class="btn btn-danger btn-sm badge-pill" style="font-size: 11px; width:60px" data-toggle="modal" data-target="#new">Edit</button></td>
</tr>
{% endfor %}
</tbody>
</table>
And a Modal that I am trying to convert into a form:
<div class="modal fade" id="new" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Customer Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{% csrf_token %}
{{ form.non_field_errors }}
<form>
{% for field in form %}
{% endfor %}
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Doe, John">
<small id="emailHelp" class="form-text" style="color:red"><i>*Required Field</i></small>
</div>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</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>
models.py
class Stakeholder(models.Model):
employee = models.CharField(max_length=200)
stakeholder_group = models.CharField(max_length=200)
description = models.CharField(max_length=200)
stakeholder_quadrant = models.CharField(max_length=200)
def __str__(self):
return self.stakeholder
The error being raised:
Invalid block tag on line 123: 'stakeholder.id'. Did you forget to register or load this tag?
In my experience can be raised in cases such as the following:
An unclosed tag within the document
Malformed mustache variable {% stakeholder.id %} maybe?
Entangled tags?
So I recommend you sift through your template for such cases. My bet is thats where your problem is coming from.
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 %}
I have a loop which outputs a list of categories and creates a button which summons a Bootstrap Modal for confirmation. Once confirmed the form submits, but thats where it goes wrong. The form always submits the last item in the list rather than the one selected. As you can see below, i have output the values to console and they output the correct values each time.
For example, there are currently 9 Categories and therefore 9 buttons.
I select the first category to be deleted - Category{"id":1;"name":'Music'}
The console outputs:
1
Music
Bootstrap Modal displays "Delete Category: Music"
When I confirm this is the object I want to delete, it deletes the 9th category.
What am i doing wrong?
Loop:
<table class='table table-striped' id="datatable-table" >
<thead>
<tr>
<th>Name</th>
<th width="100px"></th>
</tr>
</thead>
<tbody>
#foreach($categories as $category)
<tr>
<td>{{ $category->name }}</td>
<td>
<button class="btn btn-warning btn-sm btn-danger delete-category-modal" value="{{$category->id}}"
data-toggle="modal"
data-target="#deleteModal"
data-backdrop="static"
data-name ="{{$category->name}}"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
</td>
</tr>
#endforeach
</tbody>
</table>
Modal:
<div id="deleteModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
{{ Form::model($category, ['route' => ['categories.destroy', $category->id], 'method' => 'delete']) }}
{{ Form::submit('Delete', ['class' => 'btn btn-danger', 'name' => 'edit-btn']) }}
</div>
{{ Form::close() }}
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Script:
$('button.delete-category-modal').on('click', function (e) {
// Make sure the click of the button doesn't perform any action
e.preventDefault();
// Get the modal by ID
var modal = $('#deleteModal');
// Set the value of the title fields
modal.find('.modal-title').text('Delete Category: ' + $(this).data('name'))
// Update the action of the form
modal.find('form').attr('DELETE', '/categories/'+ $(this).val());
console.log($(this).data('name'))
console.log($(this).val())
});
I seem to have solved my own problem, on the modal:
{{ Form::model($category, ['route' => ['categories.destroy',
$category->id], 'method' => 'delete']) }}
$category->id should rather be 'null'
so that jQuery can overright it with the selected value
I have a problem with flask app published pythonanywhere. This is a dashboard and if I click the title of the posting, it is supposed to show details of the posting. I want to add confirm message before delete. How can I make it? Now I try to use javascript, but it doesn't work. Below are my codes.
app.py
import MySQLdb as mysql
con = mysql.connect("host", "username", "password", "database")
con.ping(True)
#app.route('/deleteschool/<int:School_Id>')
def deleteschool(School_Id):
try:
if session.get('user'):
#con = mysql.connect()
cursor = con.cursor()
query_string = "DELETE FROM school WHERE School_Id = '{School_Id}'".format(School_Id=School_Id)
cursor.execute(query_string)
#cursor.execute("DELETE from school where School_Id=%s", (School_Id))
delete=cursor.fetchall()
if len(delete) is 0:
con.commit()
return redirect('/getSchoolList')
else:
return redirect('/error')
else:
return redirect('/error')
except Exception as e:
return redirect('/error')
school_page_showpost.html
<script src="/static/js/confirm.js"></script>
{% for row in schoolpost %}
<div id="titleOutput" class="two fields">
<div class="field">
<label>TITLE</label>
<textarea id="ckeditor1" class="cleditor" disabled="yes" readonly="yes" rows="1">{{row[1]}}</textarea></div></div>
<div id="contentsOutput" class="field">
<h6></h6>
<label>CONTENTS</label>
<textarea id="ckeditor2" class="cleditor" disabled="yes" readonly="yes" rows="10" cols="80">{{row[2]}}
</textarea>
<script>
var editor2=CKEDITOR.replace( 'ckeditor2' );
</script>
</div>
</div>
<div class="extra content">
<div class="right floated author">
<span class="right floated time">{{row[4]}} </span>
<span class="category">School board </span>
<span class="writer">
{{row[3]}}</span>
</div>
</div>
</div>
<br><br>
<ul class="actions pagination">
<li><a onclick="javascript : window.location = '/editschool/{{row[0]}}' " class="ui button">EDIT</a></li>
<li><button id="confirmDeleteSchool" type="submit" name="confirmDeleteSchool" class="ui button">DELETE</button></li>
<li><a href="/school" class="ui button" >LIST</a></li>
</ul>
{% endfor %}
confirm.js
$(function(){
$('#confirmDeleteSchool').click(function(){
var confirm = confirm("Are you sure?");
if (confirm == true) {
$.ajax({
url: '/delteschool/{{row[0]}}',
success: function(response){
console.log(response);
},
error: function(error){
console.log(error);
}
});
} else {
}
});
});
If I click delete button, it is supposed to load confirm.js file and execute. But it does nothing. Please help.
An alternative approach for a similar task:
I implemented a confirmation step before deleting post through modal by using only HTML and jinja.
{% block body %}
<h1>Dashboard <small> Welcome {{session.username}} </small></h1>
<a class="btn btn-success" href="/add_article">Add Article</a>
<hr>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Date</th>
<th></th>
<th></th>
</tr>
{% for article in articles %}
<tr>
<td>{{article.id}}</td>
<td>{{article.title}}</td>
<td>{{article.author}}</td>
<td>{{article.create_date}}</td>
<td> Edit </td>
<td>
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalCenter{{article.id}}">
Delete
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter{{article.id}}">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle{{article.id}}">Deleting Post Permanently</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>{{article.title}}??</h3>
<p>Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form action="{{url_for('delete_article', id=article.id)}}" method="post">
<input type="submit" value="Delete" class="btn btn-danger">
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</table>
{% endblock %}
Including a js file in Flask works differently:
`<script type="text/javascript" src="{{ url_for('static', filename='js/confirm.js') }}"></script>`
With this you should be able to load the JS
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 },
});