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">
....
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);
});
I would like my modal's submit button to bring my users to my contact form outside of the modal and to close the modal in the process.
I've tried several ideas but so far, I am scrolling to the element wanted but when the modal closes it scrolls back to the element where my modal is initially located.
Modal :
<div class="modal fade" id="Modal-<?= $formation['id'] ?>" 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">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">
<?= $formation['descriptionLongue'] ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary devis">Demander un devis</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<!-- FORMATION -->
Contact Form
<div class="container col-4" id="contact">
<!-- form contact -->
<form class="text-center border border-light p-5" action="<?=buildUrl('/contact');?>" method="POST">
etc...
Javacript
const target = document.getElementById('contact'),
buttons = document.querySelectorAll('.devis');
for (const button of buttons) {
button.addEventListener('click', function(){
$(this).parents('.modal').modal('hide');
target.scrollIntoView({
block: 'start',
behavior: 'smooth',
inline: 'nearest'
});
});
}
I want to show bootstrap badges like accepted, rejected according to a bool value from the model called status . the problem here is I tried doing it using jquery but it's either all shown or all hide. so I guess it can't read the status values. I opened developer tools and there is no error. I need guidance. I appreciate your help.
#for (int i = 0; i < Model._Requests.Count(); i++)
{
<tr>
<td>
#Html.DisplayFor(x => Model._Requests[i].Account_Name)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].LOB)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Operation_Date)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Employee_no)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Fulfillment_Rate)
</td>
<td>
<span name="badge" class="badge badge-warning" id="pend">WTF</span>
</td>
<!--for the accept button-->
#using (Html.BeginForm("Add_Fulfillment_Accept", "TBL_Request", FormMethod.Post))
{
#Html.AntiForgeryToken()
<td>
<button id="btnAccept" class="btn btn-success" name="a_button" type="submit" value="true">Accept</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
#Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
}
<!--for the reject button-->
#using (Html.BeginForm("Add_Fulfillment_Reject", "TBL_Request", FormMethod.Post))
{
#Html.AntiForgeryToken()
<td>
<button id="btnReject" class="btn btn-danger" name="button" data-toggle="modal" data-target="#exampleModal" type="button" value="false">Reject</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
#Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
<!--this is the note modal of the reject button -->
<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">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
#Html.TextArea("Note", Model._Requests[i].Note, htmlAttributes: new { #class = "form-control" })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" value="submit" class="btn btn-success" id="finalSave" />
</div>
</div>
</div>
</div>
}
</tr>
}
</tbody>
</table>
script
var flag = $('[name = "Status"]').val();
if (flag === false) {
$('#pend').show();
}
else {
$('#pend').hide();
}
the badge i'm trying to show
<span name="badge" class="badge badge-warning" id="pend">WTF</span>
If status doesnt change afterwards, just set some class dynamically to this item in your cshtml
<span name="badge" class="badge badge-warning #{Model.Status ? "visible" : "invisible"}" id="pend">WTF</span>
If it does change you have to trigger events on that value change
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 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 },
});