<a class="btn btn-primary" href="#" {{action "toggleStatus"}}><i class="icon-plus icon-white"></i> Add Staff</a>
This is in a view template called stafflist.handlebars. The content is as follows
<div class="page-header">
<h3>{{staff.title}} <small>List of users who has access to this application</small></h3>
</div>
<div class="commands pull-right">
sta
<a class="btn btn-primary" href="#" {{action "toggleStatus"}}><i class="icon-user icon-white"></i> {{staff.btnTitle}}</a>
</div>
<div class="pull-left">
<input type="text" class="search-query" placeholder="Search">
</div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<td>NAME</td>
<td>ID</td>
</tr>
<thead>
<tbody>
{{#each staff}}
<tr>
<td>{{this.fname}}</td>
<td>{{this.id}}</td>
</tr>
{{/each}}
</tbody>
</table>
The View file is as below
App.StaffListView = Em.View.extend({
templateName:'sellap-web/~templates/stafflist',
staffBinding:'App.staffController',
toggleStatus: function() {
alert('Hurray');
}
});
When clicking the button, the action is never calling the alert. What is going wrong here. I am using ember-skeleton to compile.
Found the culprit. My App.create has a method called init. I changed the name to something else and now it works fine. I didnt call the super.
Related
I'm new in Django and i like to implement a Modal to delete records. The problem is a funny error in the modal form because is expecting a parameter. The modal link has this
but I don't know how add the right parameter.
This is my List in html
<table id="tablaAlmacenes" class="table table-bordered table-striped">
<thead>
<tr>
<th>Almacén</th>
<th>Detalles</th>
<th></th>
</tr>
</thead>
<tbody>
{% for almacen in object_list %}
<tr>
<td>{{ almacen.almacen }}</td>
<td>{{ almacen.descripcion }}</td>
<td>
<div>
Detalles
<a a href="" class="btn btn-link text-primary">Editar</a>
<a class="btn btn-link deleteAlmacen" data-id="{{ almacen.id}}"><span class="fas fa-trash text-danger"></a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th>Almacén</th>
<th>Detalles</th>
<th></th>
</tr>
</tfoot>
</table>
this is my url.py
urlpatterns = [
path('',include('polls.urls'),name='home'),
path('admin/', admin.site.urls),
# path('contact/',views.contact, name='contacto')
path('almacenes/', AlmacenesListView.as_view(), name='almacenes'),
path('almacenes/nuevo', AlmacenesCreateView.as_view(), name='crear_almacen'),
path('almacenes/<int:id>/remove/', AlmacenesDeleteView.as_view(), name='eliminar_almacen')
]
This is my views.py
class AlmacenesListView(ListView):
model = Almacen
template_name = 'pages/index.html'
success_message = "Bien!!!!"
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['title'] = "Lista de Almacenes"
print(reverse_lazy('almacenes'))
return context
class AlmacenesCreateView(SuccessMessageMixin, CreateView):
model = Almacen
form_class = AlmacenesForm
success_url = reverse_lazy('almacenes')
success_message = "Bien!!!!"
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
return context
class AlmacenesDeleteView(DeleteView):
model = Almacen
success_url = reverse_lazy('almacenes')
and my modal code
<div class="modal fade" aria-modal="false" id="deleteAlmacenModal">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmación</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>¿Desea eliminar el Almacen?</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<form action="{% url 'eliminar_almacen' (some parameter here but error) %}" method="POST">
{% csrf_token %}
<input type="hidden" name="id" id="almacen_id"/>
<button type="submit" class="btn btn-danger">Eliminar</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
scrpt for modal
$(document).on('click','.deleteAlmacen',function(){
var id_almacen=$(this).attr('data-id');
$('#almacen_id').val(id_almacen);
$('#deleteAlmacenModal').modal('show');
});
So, if you are using bootstrap you don't need to trigger the modal with jquery but let bootstrap do the magic.
Your code should be something like that:
html:
<table id="tablaAlmacenes" class="table table-bordered table-striped">
<thead>
<tr>
<th>Almacén</th>
<th>Detalles</th>
<th></th>
</tr>
</thead>
<tbody>
{% for almacen in object_list %}
<tr>
<td>{{ almacen.almacen }}</td>
<td>{{ almacen.descripcion }}</td>
<td>
<div>
Detalles
<a a href="" class="btn btn-link text-primary">Editar</a>
<a class="btn btn-link" data-toggle="modal" data-target="#deleteAlmacenModal{{almacen.id}}""><span class="fas fa-trash text-danger"></a> <!-- data-toggle and data-target work in bootstrap4, in 5 is data-bs-target and data-bs-toggle -->
{% include 'yourtemplatefolder/modals/delete_almacen_modal.html' %} <!-- as best practice create another folder called modals and put there you modal.html files, as in this case and include them in your code -->
</div>
</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th>Almacén</th>
<th>Detalles</th>
<th></th>
</tr>
</tfoot>
</table>
Now, being the modal called inside the for loop, you can fix your modal like this:
delete_almacen_modal.html
<div class="modal fade" aria-modal="false" id="deleteAlmacenModal{{almacen.id}}">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmación</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>¿Desea eliminar el Almacen?</p>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<form action="{% url 'eliminar_almacen' pk=almacen.id %}" method="POST">
{% csrf_token %}
<input type="hidden" name="id" id="almacen_id"/>
<button type="submit" class="btn btn-danger">Eliminar</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Now that should work.
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'm trying to change the interaction of a page so that additional info about a product appears in a modal rather than an element that is shown/hidden when a button is clicked.
The bit I'm not sure about is making the modal adapt it's contents to each product. (I'm not sure if django must prepare 3 different modals first of all at the backend - if this is possible or whether there is a simpler way?)
Previously I had the template:
<div class="item price-2 col-md-4 col-12 text-center best-buy">
<div class="item-inner">
<div class="heading">
<h3 class="title"><b>Cheapest</b></h3>
</div>
{% include 'components/quote_summary_item.html' with quote=first_quote %}
</div><!--//item-inner-->
</div><!--//item-->
{% include 'components/quote_detail.html' with quote=first_quote %}
Where quote_summary_item.html is:
<div>
<div class="quotes-summary"><img src="{{ quote.ImageUrl }}" alt=""></div>
<p></p>
<p >.........
</p>
<a class="btn btn-quote-primary" href="{% url 'users:profile %}">Select</a></div>
<div class="content">
<p><b>Your Quote Details</b></p>
<p>{{ quote.Name }}<br/>
{{ quote.Type }} <br/>
.....
</p>
<button class="btn btn-cta-secondary" data-id="{{ quote.priceId }}">Info</button>
</div><!--//content-->
and quote_detail is:
<div class="quote" id="quote{{ quote.priceId }}" style="display:none">
<div >
<p><b>About this quote:</b></p>
{{ quote.synopsisText|safe }}
</div>
<div class="row">
<div class="col">
<table class="table">
<thead class="til-table-head">
<tr>
<th>Information</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>{{ quote.Something }}</td>
</tr>
<tr>
<td>Name</td>
<td>{{ quote.Name }}</td>
</tr>
<tr>
<td></td>
<td>{{ quote.payType }}</td>
</tr>
.......
</tbody>
</table>
</div>
</div>
</div>
And the .js used was:
<script type="text/javascript">
$(document).ready(function () {
$('.btn-cta-secondary').click(function (e) {
var id = $(e.currentTarget).data('id')
$('.quote').hide()
$('#quote' + id).show()
})
})
</script>
I've set up a modal template wrapper around quotes_detail.html however I'm not sure how to change the .js needed to pass in the relevant quote data to something like:
{% include 'components/quotes_modal.html' with quote=my_quote %}
and pass in the relevant quote based on the button id clicked.
There are two decent ways to do this. Implement multiple modals if there aren't too many of them or use ajax to retrieve the contents if there are lots of them.
There is no need to have a .js file as all the required js is built into bootstrap.
Control each modal with eg a button:
<button type="button" class="btn btn-cta-secondary" data-toggle="modal" data-target="#{{ quote.priceId }}" data-id="{{ quote.priceId }}">More Info</button>
Then include the modal template in the relevant page:
{% include 'components/quote_detail.html' with quote=second_quote %}
{% include 'components/quote_detail.html' with quote=first_quote %}
with components/quote_details.html
<div class="modal fade" id="{{ quote.priceId }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
.....
with the rest as per bootstrap docs.
To do this via ajax have a look at https://www.abidibo.net/blog/2015/11/18/modal-django-forms-bootstrap-4/
I would like to have an action that prints all the selected check-boxes on my table to the console.
in my controller I have
removedSelected: function() {
let selected = this.filterBy('isSelected', true);
console.log(selected);
}
in my template file I have
{{input type="checkbox" checked="isSelected"}}
I have setup my controller to filter all the records that are "isSelected" in the table by using input helper on ember.
I am getting an error on the console which states this.filterBy is not a function
Do i need to setup an array to handle this first?
Below is more of the code for a better picture.
Thanks!
// templates/warranty/index.hbs
<div class="container">
<h4>List</h4>
<div class="row">
<div class="col-sm-3">
<div class="control-group">
{{#link-to 'warranty.new' class="btn btn-primary btn-sm"}}New Claim{{/link-to}}
<button class="btn btn-primary btn-sm" {{action "toggleMultiple"}}>Select</button>
{{#if canDeleteMultiple}}<button class="btn btn-danger btn-sm"{{action "removedSelected" warranty}}>Delete Selected</button>{{/if}}
</div>
</div>
<div class="container">
<table class="table table-striped table-hover ">
<thead>
<tr>
{{#if canDeleteMultiple}}<th>Select</th>{{/if}}
<th>Action</th>
<th>Claim ID</th>
<th>Claim Status</th>
<th>Serial Number</th>
<th>Issue Description</th>
</tr>
</thead>
<tbody>
{{#each model as |warranty|}}
<tr>
{{#if canDeleteMultiple}}{{input type="checkbox" checked="isSelected"}}{{/if}}
<td>{{#link-to 'warranty.edit' warranty.id class='btn btn-success btn-xs'}}Edit{{/link-to}}<button class="btn btn-danger btn-xs" {{action "deleteWarranty" warranty}}>Delete</button></td>
<td>{{warranty.id}}</td>
<td>{{warranty.claimStatus}}</td>
<td>{{warranty.serialNumber}}</td>
<td>{{warranty.issueDescription}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
// app/controllers/warranty/index.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
toggleMultiple() {
this.toggleProperty('canDeleteMultiple');
},
removedSelected: function() {
let selected = this.filterBy('isSelected', true);
console.log(selected);
}
}
});
I have done this way, you can check the twiddle (https://ember-twiddle.com/aa88cd0442ec0d2219e792d58ab8b703?openFiles=templates.index.hbs%2Ctemplates.components.checkbox-component.hbs), same thing as mention by kumkanillam,
in your index.hbs i used checkbox as a component,
{{checkbox-component isChecked=warranty.isSelected action=deleteItems index=index}}{{/if}}
and in controller actions,
removedSelected: function() {
let selected = this.get('model').filterBy('isSelected', true);
console.log(selected);
}
In your hbs file,
{{input type="checkbox" checked=warranty.isSelected }}
OR
<input type="checkbox" checked={{warranty.isSelected}} onchange={{action (mut warranty.isSelected) value="target.checked" }}>
and in your controller,
removedSelected: function() {
let selected = this.get('model').filterBy('isSelected', true);
console.log(selected);
}
Suppose I have the following partial template:
<script type="text/x-handlebars" data-template-name="_folderList">
<table id="folder-list">
<thead>
<tr class="PLEASE_MAKE_ME_ACTIVE_IF_SELECTED_ROW">
<th>Name</th>
<th>Date Created</th>
</tr>
</thead>
<tbody>
{{#each folder in controller}}
<tr>
<td>
{{#linkTo "folder" folder }}
<i class="icon-folder-close"></i> {{ folder.folder_name }}
{{/linkTo}}
</td>
<td style="padding-left: 15px;">
{{ prettyDate folder.created_date}}
</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
Notice the class I've added to the table row element. How can I add an "active" class to this row when it's child link is the active link? Ember automatically adds the active link when the current route matches the element in the collection. I'm trying to find the elegant, "Ember way" of doing this without resorting to jQuery hacks.
While I'd still like to see an answer to the question as I originally stated it, the workaround I went with for now is not to use tables at all. I'm already using Bootstrap based CSS layouts for the rest of my site, so I decided to use a fluid layout instead of tables:
<script type="text/x-handlebars" data-template-name="_folderList">
<div id="folder-list">
<div class="container-fluid list-header">
<div class="row-fluid">
<div class="span5">Name</div>
<div class="span7">Date Created</div>
</div>
</div>
{{#each folder in controller}}
{{#linkTo "folder" folder }}
<div class="container-fluid list-item">
<div class="row-fluid">
<div class="span5">
<i class="icon-folder-close"></i> {{ folder.folder_name }}
</div>
<div class="span7">
{{ prettyDate folder.created_date}}
</div>
</div>
</div>
{{/linkTo}}
{{/each}}
</div>
</script>
This allows me to wrap the whole "row" with the anchor using {{#linkTo}} and style the whole row accordingly.
You can use bindAttr to toggle the classname. For example if you hold the state in an isSelected property in your controller then in the template.
<tr {{bindAttr class='isSelected:active'}}>
Where active is the css class name.