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
Related
I am trying to delete row when delete button is clicked.
<tbody>
{% for dt in data %}
<tr>
<td>
<i class="fa fa-external-link user-profile-icon"></i>
{{dt.url}}
</td>
<td>{{dt.modified}}</td>
<td>
<button type="button" class="fa fa-trash-o btn btn-danger" data-toggle="modal" data-target="#exampleModal{{forloop.counter}}">Delete</button>
</td>
<div class="modal fade bd-example-modal-lg" id="exampleModal{{forloop.counter}}" 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="exampleModal{{forloop.counter}}">DELETE</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 row
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
</tr>
{% endfor %}
</tbody>
When I click on delete button, modal appear for confirmation and when I click Yes then I have to send the {{dt.url}} for corresponding delete button.
I could use the input tag with hidden type and set the input value with {{dt.url}} . I am not able to check which delete button is clicked. Please help.
Add <input type="hidden" name="deletefile" value="" id="deletefileID"> outside your table.
Now set the value of button as {{dt.url}.
<button type="button" value="{{dt.url}" class="fa fa-trash-o btn btn-danger" data-toggle="modal" data-target="#exampleModal{{forloop.counter}}">Delete</button>
This is to use this value to set value of hidden input tag whenever delete button is clicked.
$('.btn-danger').on('click',function(){
var tmp = this;
tmp = tmp.value;
$('#deletefileID').val(tmp);
});
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>
I need some thoughts about how to solve my problem. I have the following html template with a table. It shows 5 rows and at the end of each row (in the last td) there is a button which triggers a bootstrap modal (popup window).
I am using spacebars {{#each}} to loop through all the cursors, but the problem is with the modal. It only shows the data for the first row, for every row-record the same data.
This is because the ID for the modal is the same for every record (it is the first one, #subsPopup). I need somehow to pass it different ID for every row, like #subsPopup{{var}}. Any idea how could I do this?
<!-- subscribers table -->
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Created</th>
<th>Modified</th>
<th>Mailing lists</th>
</tr>
</thead>
<tbody>
{{#each subsList}}
<tr>
<td>{{firstName}}</td>
<td>{{lastName}}</td>
<td>{{email}}</td>
<td>{{createdDate}}</td>
<td>{{modifiedDate}}</td>
<!-- Trigger the modal (popup window) with a button -->
<td>
<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#subsPopup">Show</button>
<!-- Modal -->
<div id="subsPopup" 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">Mailing List for <b>{{firstName}} {{lastName}}</b> ({{email}})</h4>
</div>
<div class="modal-body">
<p>{{mailLists}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
Your subscriptions collection probably has the _id field, so you might try outputting {{_id}}
In case anyone else comes across this issue...
My method of solving this ... (not sure if this is the most elegant , but it did work for me )
Here is an example:
[Meteor Template File - "coolmodal.html" - containing a bootstrap modal component]
<template name="mymodal">
<!-- This button we can use to trigger the modal to display-->
<button class="btn btn-success btn-lg" type="button">
<div class="modal fade" id="mycoolmodal" tabindex="-1" role="dialog">
<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">{{modalDetails}}</h4>
</div>
<div class="modal-body">
<p>Cool stuff I like to write here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</template>
[Meteor Client JS file - "cool.js" - containing template helpers, etc]
Template.mymodal.events({
'click .img-thumbnail'(event, instance) {
event.preventDefault(); // Stops the page from attempting a reload.
Session.set('myInfoForModal', this.my_data_you_want);
$('#coolmodal').modal('show');
}
});
Template.registerHelper('modalDetails',function(input){
return Session.get("myInfoForModal");
});
I have a view which contains two elements :
Button : A add button to create a row for the table
Table : A table that I populate dynamically from database, on each row I have an edit button
What I want to do is when I click on the add button it shows a modal with form (lastname, firstname, role, login etc)
and when I click on edit button (row in table) it open the same modal but with all attributes of the user in the form.
my view Users.blade.php
....
// include modal
#include('CreateOrEditModal', array('user' => isset($user) ? $user: null))
// add button
<button data-toggle="modal" data-target="#create_edit_modal" class="btn btn-primary"><i class="fa fa-plus"></i> Add user</button>
...
...
<tbody>
#foreach($users as $user)
<tr>
<td>{{$user->lastname}}</td>
<td>{{$user->firstname}}</td>
<td>{{$user->role}}</td>
<td>{{$user->login}}</td>
<td>{{$user->password}}</td>
<td>
<button class="btn btn-primary" data-target="#create_edit_modal" data="{{$user}}"><span class="fa fa-pencil"></span>Edit</button>
</td>
</tr>
#endforeach
</tbody>
my modal
<div class="modal hide fade" id="create_edit_modal" tabindex="-1" 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>
#if(isset($user))
<h4 class="modal-title">{{$user->name}}</h4>
#else
<h4 class="modal-title">Add a new user</h4>
#endif
</div>
<div class="modal-body">
#if(isset($user))
{!! Form::model($user, array('class' => 'form-horizontal','route' => array('site.update', $user->id), 'method' => 'PUT')); !!}
#else
{!! Form::open(array('url' => 'site','class' => 'form-horizontal')) !!}
#endif
<div class="row">
....
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 },
});