<div class="table">
....
<tr *ngFor="let product of products; index as i">
<th scope="row">{{ i + 1 }}</th>
<td>{{ product.name }}</td>
<td>{{ product.category }}</td>
<td>{{ product.price }}</td>
<td>{{ product.quantity ? "not over" : "it's over" }}</td>
<th>
<button
class="btn btn-warning ml-2"
data-toggle="modal"
data-target="#updateProduct"
(click)="fetchProduct(product._id, updateModal)"
>
UPDATE
</button>
<button
class="btn btn-danger ml-2"
data-toggle="modal"
data-target="#deleteProduct"
>
DELETE
</button>
</th>
</tr>
....
</div>
<div
class="modal fade"
id="deleteProduct"
data-backdrop="static"
tabindex="-1"
role="dialog"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<h4>Are you sure you want to delete?</h4>
<button
type="button"
class="btn btn-secondary ml-2 mr-2"
data-dismiss="modal"
>
CANCEL
</button>
<button
type="button"
class="btn btn-primary ml-2 mr-2"
(click)="deleteProduct(product._id)"
>
DELETE
</button>
</div>
</div>
</div>
</div>
These two blocks of code are in the same HTML page.
My goal is to remove a warning modal when the delete key is pressed in the table. And then press the delete button on the modal to delete the existing line.
But I can't get the id value I returned here in the modal part.
Normally when I do this without a modal in the table it works fine because I can take the id value and delete it directly. But I don't know how to give this id value when I am out.
How can I solve this?
in your ts create new variable:
deleteID : any;
in your html add below code:(inside ngFor)
<button
class="btn btn-danger ml-2"
data-toggle="modal"
data-target="#deleteProduct"
(click)="deleteID= product._id"
>
DELETE
</button>
inside modal:
<button
type="button"
class="btn btn-primary ml-2 mr-2"
(click)="deleteProduct(deleteID)"
>
DELETE
</button>
hope it will be help.
Related
It is a table display in webpage, it displays one button for row using Datatable.
In the column #4 displays either of 2 values, one is --- which is desires for trigger any of the two Modals after click over it own row's button.
When click over any row's button, console.log successfully display message set, however it does not open any modal and display error document.getElementById(...).modal is not a function at HTMLButtonElement.<anonymous>
Table header is ['eamil', 'first-name', 'last-name', 'NIT', 'button']
data value for table is:
[['prueba1#gmail.com','Daniel','Apellido01','907595-0'],
['prueba4#gmail.com','Prueba04','Apellido04','---']]
HTML
<!-- DataTable -->
<table id="listados" class="display nowrap responsive" style="width:100%">
<thead>
<tr>
{% for i in header %}
<th>{{ i }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for i in evnts %}
<tr>
<td class="text-dark">{{ i[0] }}</td>
<td class="text-dark">{{ i[1] }}</td>
<td class="text-dark">{{ i[2] }}</td>
{% if i[3] != '---' %}
<td class="text-dark">{{ i[3] }}</td>
{% else %}
<td class="text-dark">{{ i[3] }}</td>
{% endif %}
<td></td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
{% for i in header %}
<th>{{ i }}</th>
{% endfor %}
</tr>
</tfoot>
</table>
<!-- Modals -->
<div class="modal fade" id="newNit" tabindex="-1" role="dialog" aria-labelledby="newNitModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newNitModalLabel">Agregar Nuevo NIT</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="nuevo"></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-success" id="borrar">Continuar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="actualizarNit" tabindex="-1" role="dialog" aria-labelledby="actualizarNitModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="actualizarNitModalLabel">Actualizar informacion NIT</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="update"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-success" id="borrar">Continuar</button>
</div>
</div>
</div>
</div>
snippet for Datatable and modals
$(document).ready( function () {
var pasarValor;
var table = $('#listados').DataTable({
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button class='btn-success' data-toggle='modal' id='agregarNit'>NIT</button>"
}
],
"scrollX":true,
})
$('#listados #agregarNit').on('click', function() {
var data = table.row( $(this).parents('tr') ).data();
pasarValor = {
mail: data[0],
nit: data[3]
};
if (data[3] === '---'){
console.log('True')
document.getElementById('newNit').modal('show');
} else {
console.log('False')
document.getElementById('actualizarNit').modal('show');
}
});
});
1.this is present in file index.blade.php .In this between html code one button tag is placed in which data target is present in different file .Can it be possible to trigger the modal from remote button
<button class="btn btn-small btn-warning btn-circle" data-toggle="modal" data-target=".ept-modal" onclick="productTestMapModal('<?=base64_encode(base64_encode($product->id));?>')">Available Tests</button>
2.while modal target file is
<div class="clear-back">
<div class="modal-header">
{{ $product->name }} - Available tests
<button type="button" title="Close" class="close pull-right white" data-dismiss="modal">
<i class="material-icons">close</i>
</button>
</div>
<div class="pad-15">
<span class="text-success"><i class="fa fa-circle user-online"></i> Select tests to be mapped in {{ $product->name }}</span>
<button class="btn btn-primary pull-right btn-circle" onclick="productTestMap(this, '<?=base64_encode(base64_encode($product->id));?>')">Save</button>
<div class="clearfix"></div><br/>
<div style="width:99%;overflow-y:auto;">
<table class="table">
<thead>
<tr class="center">
#foreach($product->course->testGroups as $testgroup)
<th>{{ $testgroup->name }}
<button class="btn btn-primary btn-circle btn-sm" onclick="selectTestgroups('{{$testgroup->id}}')">Select All</button>
<button class="btn btn-primary btn-circle btn-sm" onclick="unselectTestgroups('{{$testgroup->id}}')">UnSelect All</button>
</th>
#endforeach
</tr>
</thead>
<tbody>
<tr>
#foreach($product->course->testGroups as $testgroup)
<td>
#foreach($testgroup->subgroups as $subgroup)
#foreach($subgroup->tests as $t)
<span class="badge badgetest_{{$testgroup->id}} {{ in_array($t->id,$product_tests) ? 'selected' : '' }}" onclick="toggleSelection(this)"><span class="test-id hidden">{{ $t->id }}</span>{{ $t->name }}</span>
#endforeach
#endforeach
</td>
#endforeach
</tr>
</tbody>
</table>
</div>
<div class="clearfix"></div><br/>
</div>
in order to open modal from another blade file, you have to include that file, button in the target file index.blade.php like so:
#include('rel_path_to_modal_file.modal_file_name')
and please follow the bootstrap documentation to use modal as it call by id, not a class.
I have a situation like display table with different columns, say the first column is id and the second column is name, the third column has a button which on click opens up a modal; the data in the table is coming from foreach loop.
I want to pass the id to the modal when button clicked.
<td>{{ $emp->req_id}} </td>
<td>{{ $emp->empid}} </td>
<td>{{ $emp->visit_title}} </td>
<td>{{ $emp->stays_nights}}</td>
<td>{{ $emp->apply_date }}</td>
<td>{{ $emp->travel_charges }}</td>
<td>{{ $emp->hotel_charges }}</td>
<td>{{ $emp->meal_charges }}</td>
<td>{{ $emp->approv_status}}</td>
#endforeach
</tr>
</tbody>
For this, you can use jquery
step(1) add this code in your blade file
<button type="button" data-toggle="modal" data-target-id="{{ $emp->id }}" data-target="#modelName">Button name </button>
step (2) define your jquery method
<script>
$(document).ready(function () {
$("#modelName").on("show.bs.modal", function (e) {
var id = $(e.relatedTarget).data('target-id');
$('#pass_id').val(id);
});
});
</script>
step (3) Make Modal
<div class="modal fade" id="modelName" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog data-dialog-centerd" 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 text-center" id="myModalLabel">Model header Name</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="#"
method="post"
enctype="multipart/form-data">
{{ csrf_field() }}
<div class="portlet-body form">
<div class="form-body">
<div class="form-group">
<input class="form-control" name="name" type="text"
id="pass_id">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
give an identifiable class say employee <tr class="employee"> and put the id of the entry in the same tag like this <tr class="employee" data-id="{{$emp->id}}">. Then when you would click on the row you could do something like this:
const employees = document.querySelectorAll('.employee');
employees.forEach( employee => {
employee.addEventListener(e => {
const employeeId = e.target.getAttribute('data-id');
// do what you need to do with the id
})
})
I suggest you to refactor this
<a title="Approve" data-toggle="modal" data-target="#modal-block-popout" class="btn btn-outline-success btn-sm" href="approve<?php $emp->id; ?>">Approve </a>
to
<button type="button" title="Approve" class="btn btn-outline-success btn-sm btn-toggle-modal-block-popout" data-id="<?php $emp->id; ?>" >Approve</button>
And add this Javascript
$(document).on('click', '.btn-toggle-modal-block-popout', function() {
var id = $(this).attr('data-id');
//DO WHAT EVER YOU NEED
$('#modal-block-popout').modal('show');
};
Of course for disapprove it will be the same.
The Answer To The Question (The One That Worked For Me)
Step#1 Add Button in the column Of the table:
<button type="button" onclick="myfunction( {{$a->id }})" > My Button </button>
Step#2 Add Script for The function that is calling from the button:
<script>
function myfunction(e){
var x = e;
$('#edit_req_id').val(req_id); //The id where to pass the value
$('#modal-block-popout').modal('show'); //The id of the modal to show
};
</script>
Step#3: Add Modal to which you want to pass the value to:
<div class="modal fade" id="modal-block-popout">
<div class="modal-content ">
<div class="block-options">
<button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close" name="btn"> <i class="fa fa-fw fa-times"></i></button>
</div>
<div class="block-content">
<input class="form-control form-control-alt " type="text" id="edit_req_id" name="empid">
</div
</div>
This is working for me you can try this :
<i class="mdi mdi-eyedropper px-2" type="button" data-bs-toggle="modal"
data-target-id="{{ $item->id }}" data-bs-target="#modelName"></i>
then :
Modal for Update
<div class="modal fade" id="modelName" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog data-dialog-centerd" 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 text-center" id="myModalLabel">Model header Name</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="#" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="portlet-body form">
<div class="form-body">
<div class="form-group">
<input class="form-control" name="name" type="text" id="pass_id">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
then
<script>
$(document).ready(function() {
$("#modelName").on("show.bs.modal", function(e) {
var id = $(e.relatedTarget).data('target-id');
$('#pass_id').val(id);
});
});
</script>
{% for key,value in config.items %}
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-id={{ key }} data-target="#myModal"><i class="glyphicon glyphicon-pencil" aria-hidden="true"></i></button>{{key}}
</td>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog" id= {{ forloop.counter }>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Version for <strong>{{key}}</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder={{key}} {{ forloop.counter }}>
{{ forloop.counter }}
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok-sign"></span> Accept</button>
<button type="button" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove-circle"></span> Reject</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
{% endfor %}
//I have a datatable where the rows are getting populated based on the loop values.
Now inside the datatable in one particular row I have a button upon clicking it I should display the values of the particular row.
But the problem I am facing is only the first value is getting displayed in the modal.
when I am trying to check through {{ forloop.counter }} The value is always 1 inside the modal.But if i check outside the modal it is incrementing.
Can anyone guide me
I'm currently running into a problem. The problem is that it returns exactly this ' ' when trying to fetch data from 2 classes above the button.
This is how my app.js looks like:
$('.edit').on('click', function(event) {
event.preventDefault();
var productNamee = event.target.parentNode.childNodes[1].textContent;
$('#productname').val(productNamee);
$('#myModal').modal('show');
});
This is how my code looks like where it's implemented:
<table class="table table-striped table-bordered">
<tr>
<th>Product Name</th>
<th>Brand</th>
<th>Description</th>
<th>Posted On</th>
<th>Actions</th>
</tr>
#foreach($posts as $post)
<tr>
<div class="postcontest">
<td>{{ $post->productname }}</td>
<td>{{ $post->brands }}</td>
<td>{{ $post->description }}</td>
<td>{{ $post->created_at }}</td>
</div>
<td>
<div class="interaction">
<a class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
<a class="btn btn-danger btn-sm" href="{{ route('post.delete', ['post_id' => $post->id]) }}" role="button"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</div>
</td>
</tr>
#endforeach
</table>
This is what it returns when opening the modal:
https://gyazo.com/b5709533810d4bdb95029db3af8a9c4c (Totally nothing!)
The Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">Edit a product</h4>
</div>
<div class="modal-body">
<form action="#" method="post">
<div class="form-group">
<label for="name">Product Name</label>
<input class='form-control' type="text" name="productname" id="productname">
</div>
<div class="form-group">
<label for="brands">Brands</label>
<input class='form-control' type="text" name="brands" id="brands">
</div>
<div class="form-group">
<label for="brands">Cop Link</label>
<input class='form-control' type="text" name="coplink" id="coplink">
</div>
<div class="form-group">
<label for="brands">Description</label>
<textarea class="form-control" name="description" id="description" rows="5"></textarea>
</div>
<input type="hidden" name="_token" value="{{ Session::token() }}">
</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></form>
</div>
</div>
</div>
</div>
Yes, the ID of the text field is 'productname' and that's all correct.
I'm currently out of ideas on how to fix this, any help would be appreciated!
Change this code:
<a class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
To
<a onClick="edit('{{$post->productname}}',
'{{$post->brands}}',
'{{$post->description}}',
'{{$post->created_at}}'),"
class="btn btn-warning btn-sm edit" role="button" href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></span></a>
And
$('.edit').on('click', function(event) {
event.preventDefault();
var productNamee = event.target.parentNode.childNodes[1].textContent;
$('#productname').val(productNamee);
$('#myModal').modal('show');
});
To
function edit(productname, brands, description, created_at) {
event.preventDefault();
$('#productname').val(productname);
$('#brands').val(brands);
$('#description').val(description);
$('#created_at').val(created_at);
$('#myModal').modal('show');
}