I have the following page: http://mindspyder.com/newline/my-account.html
And the following code on that page:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="btn btn-primary btn-sm" href="#" role="button"><i class="fa fa-search-plus"></i> View</a> </li>
<li class="nav-item"> <span data-toggle="modal" data-target="#myModal"><a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><i class="fa fa-times"></i> Delete</a></span></li>
<li class="nav-item"> <a class="btn btn-primary btn-sm" href="#download" role="tab" data-toggle="tab">Settings</a> </li>
</ul>
<!-- /Nav tabs -->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="review"></div>
<div role="tabpanel" class="tab-pane" id="edit"></div>
<div role="tabpanel" class="tab-pane" id="delete">hello</div>
<div role="tabpanel" class="tab-pane" id="download">
<p>
<form>
<p>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Invoice" id="CheckboxGroup1_0">
Invoice</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Establishment Kit" id="CheckboxGroup1_1">
Establishment Kit</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Declaration of Custody Trust" id="CheckboxGroup1_2">
Declaration of Custody Trust</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Trustee Minutes" id="CheckboxGroup1_3">
Trustee Minutes</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="Compliance Letter" id="CheckboxGroup1_4">
Compliance Letter</label>
<br>
</p>
</form>
</p>
<p>
<button type="button" class="btn btn-success btn-sm">Download Selected <i class="fa fa-arrow-down"></i></button>
</p>
</div>
</div>
<!-- /Tab panes -->
Now, if you go to the page and click the blue Delete button, everything works perfectly. Now if you click Cancel, and click on one of the other tabs, it still works as it should. The problem is you click Delete again, it doesn't switch back to the Delete tab when opening the modal, but leaves it on the previous tab.
What am I doing wrong?
I figured it out, by changing the nesting, so:
<span data-toggle="modal" data-target="#myModal"><a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><i class="fa fa-times"></i> Delete</a></span>
becomes:
<a class="btn btn-primary btn-sm" href="#delete" role="tab" data-toggle="tab"><span data-toggle="modal" data-target="#myModal"><i class="fa fa-times"></i> Delete</span></a>
and now it works as it should.
Related
I want to delete users with modals in django. I have a deletion function which I don't know how I should return to template.
views.py:
#login_required(login_url='admin_signin')
#admin_only
def admin_profiles_deletion(request, username):
context = {}
account = Account.objects.get(username=username)
account.delete()
messages.success(request, "User deleted!")
context['account'] = account
return render(request, 'HOW SHOULD I REFER MODALS HERE?', context)
And my urls.py looks:
path('admin/profile/<str:username>/delete', views.admin_profiles_deletion, name='admin_profiles_deletion'),
And finally my template is:
<td class="text-center td-actions">
<i class="la la-eye view"></i>
<i class="la la-edit edit"></i>
<a href="{% url 'admin_profiles_deletion' account.username %}" data-toggle="modal" data-target="#deleteaccount">
<i class="la la-close delete"></i>
</a>
<!-- Modal -->
<div class="modal fade" id="deleteaccount" tabindex="-1" role="dialog" aria-labelledby="deleteaccountTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteaccountTitle">Delete confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5>Do you want to delete?</h5>
</div>
<div class="modal-footer">
<div class="col-6 text-left">
<div class="previous">
<form method="POST">
{% csrf_token %}
<input class="btn btn-danger btn-sm btn-block" type="submit" name="submit" value="Yes">
</form>
</div>
</div>
<div class="col-6 text-left">
<div class="next">
<a class="btn btn-info btn-sm btn-block" href="{% url 'accounts' %}">No</a>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
In modal I want to hit YES and then delete specific account. but I don't know how to do it while I am using modals.
Try this one.
from django.shortcuts import redirect
...
def admin_profiles_deletion(request, username):
...
return redirect("/admin/profile/")
# or to return to same (previous) page:
return redirect(request.META['HTTP_REFERER'])
In your template add action attribute to your form
<form method="POST" action="{% url 'admin_profiles_deletion' account.username %}">
{% csrf_token %}
<input class="btn btn-danger btn-sm btn-block" type="submit" name="submit" value="Yes">
</form>
OR to update action attribute dynamically
<a href="#" data-url="{% url 'admin_profiles_deletion' account.username %}" class="deleteaccount">
<i class="la la-close delete"></i>
</a>
and than with jQuery
<script>
$(document).ready(function() {
$('a.deleteaccount').on( "click", function() {
event.preventDefault();
$('#deleteaccount form').attr('action', $(this).data("url"));
$('#deleteaccount').modal('show');
});
});
</script>
UPDATE - working example http://jsfiddle.net/cbzmewhq/1/
Add <span id="current_username"></span>? to your modal body.
Then with jQuery add your your desired text on click:
$('#deleteaccount #current_username').text($(this).data("username"));
BELOW IS AN EXAMPLE OF YOUR CODE
...<!-- YOUR TABLE -->
<td class="text-center td-actions">
<i class="la la-eye view"></i>
<i class="la la-edit edit"></i>
<a href="#" data-username="{{ account.username }}" data-url="{% url 'admin_profiles_deletion' account.username %}" class="deleteaccount">
<i class="la la-close delete"></i>
</a>
</td>
....<!-- YOUR TABLE -->
<!-- Modal OUT OF TABLE -->
<div class="modal fade" id="deleteaccount" tabindex="-1" role="dialog" aria-labelledby="deleteaccountTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteaccountTitle">Delete confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- ADD SPAN TO ADD USERNAME dynamically -->
<h5>Do you want to delete <span id="current_username"></span>?</h5>
</div>
<div class="modal-footer">
<div class="col-6 text-left">
<div class="previous">
<form method="POST">
{% csrf_token %}
<input class="btn btn-danger btn-sm btn-block" type="submit" name="submit" value="Yes">
</form>
</div>
<div class="col-6 text-left">
<div class="next">
<a class="btn btn-info btn-sm btn-block" href="{% url 'accounts' %}">No</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ADD BELOW CODE TO THE BOTTOM OF BODY -->
<script>
$(document).ready(function() {
$('a.deleteaccount').on( "click", function() {
event.preventDefault();
$('#deleteaccount form').attr('action', $(this).data("url"));
$('#deleteaccount #current_username').text($(this).data("username"));
$('#deleteaccount').modal('show');
});
});
</script>
I need your help with my flask blog app.
I made a simple dashboard listing all the posts, admin can edit or delete any of them. Edit option is fine. But, for delete option, I am trying to implement a confirmation step using a modal. My code is below.
{% 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">
Delete
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Deleting Post </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 post?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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 %}
Issue: Form action is generating same url (/delete_article/1) for all posts.
Please help.
Regards Hossain
The problem was for the reuse of modal id. As the modal code in the loop, so modals for all the post were having the same id. That's why view function was getting the same URL.
Solution (three changes in the above code):
data-target="#exampleModalCenter" -- > data-target="#exampleModalCenter{{article.id}}"
id="exampleModalCenter" --> id="exampleModalCenter{{article.id}}"
and
id="exampleModalLongTitle" --> id="exampleModalLongTitle{{article.id}}"
Create an element to select the product to be deleted in layout.html
<div id="dvtextRemoveDiv" style="display: none">
<p class="pintitle"> Select a product name to be deleted from the dropdown: </p>
<table border="0" width="1000">
<tr>
<td>
<p class="pinfield"><select name="KeyValuesRemove" id="KeyValuesRemove" class="form-control" onchange="passKeyToBeDeleted()">
{% for row in KeyValuesRemove %}
<option value="{{row}}">{{row}}</option>
{% endfor %}
</select>
</p>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteModal">Delete</button>
</td>
</tr>
</table>
</div>
Create a modal in the same page
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Delete Post?</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-secondary" data-dismiss="modal">Close</button>
<form action="{{ url_for('delete_post')}}" method="POST">
<input name="pass_value" type="hidden" value="pass_value" id="hidden_input">
<input class="btn btn-danger" type="submit" value="Delete">
</form>
</div>
</div>
</div>
</div>
Javascript function to pass value from html file to views.py (from frontend to backend)
<script>
function passKeyToBeDeleted(){
var valuefromID = document.getElementById('KeyValuesRemove').value;
$('#hidden_input').val(valuefromID);
alert(document.getElementById('hidden_input').value);
$("#deleteModal").modal("show");
}
</script>
I am developing a new theme from default one.
I notice that:
<?php echo $language; ?>
Generates:
<div class="pull-left">
<form action="http://192.168.0.1/opencart/index.php?route=common/currency/currency" method="post" enctype="multipart/form-data" id="form-currency">
<div class="btn-group open">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
<strong>$</strong>
<span class="hidden-xs hidden-sm hidden-md">Currency</span> <i class="fa fa-caret-down"></i></button><div class="dropdown-backdrop"></div>
<ul class="dropdown-menu">
<li><button class="currency-select btn btn-link btn-block" type="button" name="EUR">€ Euro</button></li>
<li><button class="currency-select btn btn-link btn-block" type="button" name="GBP">£ Pound Sterling</button></li>
<li><button class="currency-select btn btn-link btn-block" type="button" name="USD">$ US Dollar</button></li>
</ul>
</div>
<input type="hidden" name="code" value="">
<input type="hidden" name="redirect" value="http://192.168.0.1/opencart/index.php?route=common/home">
</form>
</div>
But my template uses:
<li> <span class="dropdown-title">Currency :</span>
<ul>
<li><a class="active" href="#">USD</a></li>
<li>AUD</li>
<li>EUR</li>
</ul>
</li>
What shall be done to adapt echo $language to the new template needs?
You can change its html markup by editing this file:
catalog\view\theme\default\template\common\language.tpl
Or if you have that file in your theme:
catalog\view\theme\{YOUR_THEME}\template\common\language.tpl
I have the following situation: At the user's area on the website he can see all his real estate posts in a table. There is a "trash button" for each one of the posts. When he press the button I want do delete from DB the exact instance he choose.
This is the HTML that I have. Please note that I used an to use a view to access the DB and then delete from DB. But I don't know how to send the exactly parameters to find it on the DB.
<div class="container">
<div class="col-xs-12">
<h1>Olá, {{ request.user.first_name }}</h1>
</div>
<div class="row col-md-12 col-md-offset-0 custyle">
<table class="table table-striped custab">
<thead>
<tr>
<th>Imagem Principal</th>
<th>Data Criação</th>
<th>Tipo do Anúncio</th>
<th>Tipo do Imóvel</th>
<th>Preço Venda</th>
<th>Visualizações</th>
<th>Expira</th>
<th>Status</th>
<th class="text-center">Action</th>
</tr>
</thead>
{% for anuncio in anuncios %}
<tr >
<td>
<div class="embed-responsive embed-responsive-16by9">
<img class="embed-responsive-item" src="{{anuncio.imagem_principal.url}}">
</div>
</td>
<td>Falta</td>
<td>{{anuncio.tipo_anuncio}}</td>
<td>{{anuncio.tipo_imovel}}</td>
<td>R$ {{anuncio.preco_venda}}</td>
<td>Falta</td>
<td>News Cate</td>
<td>News Cate</td>
<td><p data-placement="top" data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
<span class="glyphicon glyphicon-trash"></span>
</button></p>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder="Mohsin">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Irshad">
</div>
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
</div>
<div class="modal-footer form-actions">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
<button type="submit" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
I am practing what I learnt in a book, so I don't want to go for AJAX yet.
Make the button inside of a <form> that POSTs to a view, which will then delete the instance. For example:
html
<form action="{% url 'delete_estate %}" method="POST">
{% csrf_token %}
<input type="hidden" name="estate_id" value="{{ estate.id }}">
</form>
view
def delete_estate(request):
if request.method == "POST":
estate_id = request.POST['estate_id']
estate = Estate.objects.get(id=estate_id)
estate.delete()
messages.success(request, "Estate deleted successfully!")
return redirect("/")
urls
...
url(r'^delete-estate/$', views.delete_estate.as_view(), name='delete_estate'),
....
Put the modal inside of the for loop as well so that there is a distinct modal for every estate. Remember to change the id of the modal to something like id="delete_{{ anuncio.id }}" and have the delete button activate that same modal using data-target="delete_{{ anuncio.id }}". From within that modal you should be able to do what Hybrid said with the form and access the {{ anuncio.id }} variable.
If you didn't already know, id is already created by default.
I am making a Django application and using Twitter bootstrap carousel template for making a my site. I am planning to provide the sign up and sign in feature to the users through Twitter boostrap 3 modal.
and When I test modal simple with my external templates (not included in Django). My Modal runs well.
Here is my Modal code
<ul class="nav navbar-nav pull-right">
<!-- calling sign up modal -->
<li><a data-toggle="modal" href="#signup"><b>Sign Up</b></a></li>
<!-- calling sign up modal finished -->
<!-- sign up modal -->
<!-- Modal -->
<div class="modal fade" id="signup">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sign up modal finish -->
</ul>
Correct results
See image below
But when I run this modal from Django application templates. the modal loads but one grey transparent screen also loads over it and it makes the whole page disabled.
See image below
What would be the problem
I solved this issue by defining my modal code outside the ul tags, I put my modal code just after start of the body tag and it worked for me.
This is my code
<!-- Modal 1 -->
<!-- define the sign up modal finished -->
<!-- sign up modal -->
<!-- Modal -->
<div class="modal fade" id="signup">
<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">TrackLeech Sign Up</h4>
</div>
<div class="modal-body">
<form class="navbar-form form-inline" align="left">
<input type="text" placeholder="username" class="form-control" style="width: 200px;">
<!-- Fb Login --> <div class="fb-login-button pull-right" data-width="400">Login with Facebook</div><!-- Add FB Button Here --> <br><br>
<input type="text" placeholder="email" class="form-control" style="width: 200px;"> <!-- Add Google Button Here --> <br><br>
<input type="password" placeholder="password" class="form-control" style="width: 200px;"> <!-- Add Twitter Button Here --><br><br>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button><br><br>
<a data-toggle="modal" data-dismiss="modal" href="#signin" >Already a member ? Sign In</a>
</form>
<div class="pull-right">
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button>
<a data-toggle="modal" href="#signin" >Already a member ? Sign In</a> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sign up modal finish -->
This has resolved my issue now.