Develop Reference

pass data into modal from ngFor

I got simple table where I got files from my backend:
<table class="table table-sm align-items-center table-hover table-flush responsive">
<thead class="thead-light">
<tr>
<th scope="col" class="lPart">Filename</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let file of fileUploads | async | filter: name | paginate: { itemsPerPage: 10,
currentPage: p }; let i = index">
<td id="lPart" style="cursor: pointer; font-weight: normal;">
{{file.name}}
<button type="button" class="btn btn-sm btn-default" (click)="show()">{{file.name}}</button>
</td>
</tr>
</tbody>
</table>
I tried add button which opens a modal
<button type="button" class="btn btn-sm btn-default" (click)="show()">{{file.name}}</button>
And there is modal
<div [style.display]="showModal ? 'block' : 'none'" class="modal" id="imagemodal" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">{{file.name}}</h4>
</div>
<div class="modal-body">
<img src="http://localhost:3000/files/{{file.name}}{{file.ext}}"
id="imagepreview" style="width: 425px; height: 425px;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"
(click)="hide()">Close</button>
</div>
</div>
</div>
</div>
Problem is that this modal "works" only if is inside <td> tag
There is my method where I get files
showFiles() {
this.fileUploads = this.uploadService.getAccidentFiles();
this.fileUploads.forEach(element => {
});
}
and for opening modal
show() {
this.showModal = true;
}
Another problem is that if I got my modal inside <td> tag I got only last image from my uploaded files. I want to have next to filename button where I can click preview then I can show modal with image preview.

Passing data from Blade to modal in Laravel

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>

MVC pass value from modal to parent on button click

How do you pass a value from a modal with rendered partial view inside to the parent textboxfor.
textbox from my parent:
#Html.Label("Taxpayer Name")
#Html.TextBoxFor(m => m.taxpayername, new { #id = "search",data_toggle = "modal", data_target = "#myModal", data_backdrop = "static",data_keyboard = "false" })
#Html.ValidationMessageFor(m => m.taxpayername)
modal with the partial view:
<div class="modal fade" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
#{Html.RenderAction("Payer", "Registration");}
</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>
</div>
The Partial View:
<table class="table" id="payer">
<thead>
<tr>
<th>
#Html.DisplayName("TITLE")
</th>
<th>
#Html.DisplayName("NAME")
</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.userTitle)
</td>
<td>
#Html.DisplayFor(modelItem => item.FullName)
</td>
<td>
#Html.HiddenFor(modelItem => item.userId)
</td>
<td>
Select
</td>
</tr>
}</tbody>
</table>
#section Scripts{
<script type="text/javascript" src="~/Scripts/DataTables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script>
$(document).ready(function(){
$("#payer").DataTable({
});
});
</script>
<script type="text/javascript">
function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("search");
txtName.value = document.getElementById('name').value;
}
window.close();
}
</script>
whenever i click the select, i was able to retrieve the fullname and id but doesn't populate the textboxfor.
thanks in advance.

Move this function to parent and remove the onclick function:
$(document).on('click',function(){
if (window.opener != null && !window.opener.closed){
var val=$('#name').val();
$('#search').val(val);
}
window.close();
});

how to append html to dynamically created html part

function add_items()
{
var ingrediants_name = $("input[name='hidden_name[]']").map(function(){return $(this).val();}).get();
mystat++;
var my=mystat;
console.log(my);
$('#ingrdiants_table').append('<tr> <th class="no">'+my+'</th><td ><select class="selectpicker input-xlarge" name="ingredients_name[]" id="ingredients_name[]" style="width:200px;" >\n\
\n\
\n\
</select>\n\
</td> <td><input type="text" name="ingrediant_quant[]" class="form-control"></td></tr>');
//var selecter = $("input[name='ingredients_name[]']").map(function(){return $(this).val();}).get();
var letters = "";
for (i = 0; i < my; i++)
{
for(j=0;j<ingrediants_name.length;j++)
{
//$("#ingredients_name[0]").append('<option>'+ingrediants_name[j]+'</option>');
letters += '<option>'+ingrediants_name[j]+'</option>';
}
document.getElementById("ingredients_name[0]").innerHTML = letters;
}
}
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width:700px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<button class="btn btn-primary" type="button" name="add" onclick="add_items()">Add Ingredients</button>
</div>
<div class="modal-body">
<table id="ingrdiants_table" class="table table-bordered table-hover">
<thead>
<th>N</th>
<th>Ingrediant Name</th>
<th>Quantity</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" id="pencat">save</button>
</div>
</div>
</div>
</div>
Please help me to resolve this. I am creating select option dynamically on click with append in java script. I have assigned select option id="name[]",now i want to assign option to all of select option box through append or something better. how can it work?

How to pass value from checkbox to field formset in django

I make a button inside a table Product. When I click on the button will display popup table for user choose items by checkbox. I'm using formset to make row in table. But my button to insert items to table Product is not working.
Popup table for choose items:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">Search Product</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-lg-12">
<div class="col-lg-10"><input type="text" class="form-control" id="search"
name="txtSearch"
placeholder="Search"></div>
<div class="col-lg-2">
<button type="button" class="btn start" id="btnSearch" name="btnSearch">
<i class="fa fa-search" aria-hidden="true"></i>
<span></span>
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel-body">
<div class="adv-table">
<table id="tblData"
class="display table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Supplier</th>
<th>Sale Code</th>
<th>Purchase Code</th>
<th></th>
</tr>
</thead>
{% if supplier_item %}
<tbody>
{% for i in supplier_item %}
<tr class="gradeX">
<td>{{ i.item.name }}</td>
<td>{{ i.supplier.name }}</td>
<td>{{ i.price }}</td>
<td>{{ i.quantity }}</td>
<td><input type="checkbox" name="choices"
id="{{ i.item.id }}"
value="{{ i.item.name }}">
</td>
</tr>
{% endfor %}
</tbody>
{% endif %}
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-success" type="button" id="btnAddItems">Save changes</button>
</div>
</div>
</div>
</div>
jQuery:
$(document).ready(function () {
$('input[type=checkbox]').click(function () {
if ($(this).is(':checked'))
$(this).attr('checked', 'checked');
else
$(this).removeAttr('checked');
});
$('#btnAddItems').on('click', function () {
debugger;
var allVals = [];
$('input[checked=checked]').each(function () {
allVals.push($(this).val());
})
return allVals;
cloneMore('#dynamic-table tr.gradeX:last', 'form', allVals);
function cloneMore(selector, type, allVals) {
for (i = 0; i < allVals.length; i++) {
var newElement = $(selector).clone(true);
var total = $('#id_' + type + '-TOTAL_FORMS').val();
newElement.find(':input').each(function () {
var name = $(this).attr('name').replace('-' + (total - 1) + '-', '-' + total + '-');
var id = 'id_' + name;
var value = allVals[i];
$(this).attr({'name': name, 'id': id, 'value': value}).val('').removeAttr('checked');
});
newElement.find('label').each(function () {
var newFor = $(this).attr('for').replace('-' + (total - 1) + '-', '-' + total + '-');
$(this).attr('for', newFor);
});
total++;
$('#id_' + type + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
}
};
});
});