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>
Related
Each button opens a different modal
I have a peculiar issue with Bootstrap 5 modal. I have a webpage that lists database records (please see screenshot). Each record has three buttons to open their respective modal (view, edit, other).
Once the page loads, if I click the 'view' button to open its respective modal, the content of the modal body appears correctly. If I close this modal and then click either my 'edit' or 'other' buttons to open their respective modal, the content of the modal body is that of my 'view' modal - even though the modal header displays the correct title for my 'edit' and 'other' modals (suggesting to me that the correct block of 'modal code' is in play).
Now, if I refresh the webpage, and then click either my 'edit' or 'other' buttons (not clicking the 'view' button just yet), the respective modal opens with the correct content in the modal body as expected. But, once I click my 'view' button and open its respective modal, all subsequent attempts to open my 'view' and 'other' modals keep displaying the modal body content of my 'view' modal - despite what the modal header title shows.
My code is listed below. Since I an not experienced in Javascript, I suspect the case of this issue lies there. Any feedback is appreciated.
HTML Table Code:
<table >
<thead>
<tr>
<th>ID</th>
<th>Name (Last, First)</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1046</td>
<td>ABBE, BILLY</td>
<td>
<button id="1046" class="btn btn-primary btn-sm me-1 mb-1 " role="button" />View</button>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyEditBtn" role="button" />Edit</a>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyOtherBtn" role="button" />Another Action</a>
</td>
</tr>
<tr>
<td>506</td>
<td>ABBEY, TEST</td>
<td>
<button id="506" class="btn btn-primary btn-sm me-1 mb-1 " role="button" />View</button>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyEditBtn" role="button" />Edit</a>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyOtherBtn" role="button" />Another Action</a>
</td>
</tr>
</tbody>
</table>
Modal HTML:
<div class="modal fade" id="MyEditModal" tabindex="-1" role="dialog" aria-labelledby="MyEditModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="MyEditModalLabel">Edit Modal</h5>
</div>
<form action="xxxx.php" method="post" name="EditForm" id="EditForm">
<div class="modal-body">
<h6 class="mt-2">Test edit modal</h6>
<div class="form-floating">
<input class="form-control border-0 fw-bold bg-white" type="text" name="Edit_Name" id="Edit_Name" >
<label for="Edit_Name" class="form-label">Name:</label>
</div>
<div class="form-floating">
<input class="form-control border-0 fw-bold bg-white" type="text" name="Edit_Email" id="Edit_Email" >
<label for="Edit_Email" class="form-label">Email:</label>
</div>
<input type="text" name="Edit_ID" id="Edit_ID">
<input type="hidden" name="Modal_Type" value="Edit" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" name="editdata" class="btn btn-warning">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="MyOtherModal" tabindex="-1" role="dialog" aria-labelledby="MyOtherModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="MyOtherModalLabel">Other Modal</h5>
</div>
<form action="xxxx.php" method="post" name="OtherForm" id="OtherForm">
<div class="modal-body">
<h6 class="mt-2">Test other modal</h6>
<div class="form-floating">
<input class="form-control" type="text" name="Other_Name" id="Other_Name" >
<label for="Other_Name" class="form-label">Name:</label>
</div>
<div class="form-floating">
<input class="form-control" type="text" name="Other_Email" id="Other_Email" >
<label for="Other_Email" class="form-label">Email:</label>
</div>
<input type="text" name="Other_ID" id="Other_ID">
<input type="hidden" name="Modal_Type" value="Other" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" name="adddata" class="btn btn-warning">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" id="ShowRecordModal" role="dialog" aria-labelledby="MyViewModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="ShowRecordModal">
<h5 class="modal-title">Customer Details</h5>
<button type="button" class="btn-close no-print" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Supporting Javascript:
<script>
$(document).ready(function() {
$('table tbody').on('click', 'button', function() {
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
cust_id = data[0];
$.ajax({url: "readtest.php",
method: 'post',
data: {CID:cust_id},
success: function(result) {
$(".modal-body").html(result);
}
});
$('#ShowRecordModal').modal('show');
})
})
</script>
<script>
$(document).ready(function () {
$('.MyEditBtn').on('click', function () {
$('#MyEditModal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
$('#Edit_ID').val(data[0]);
$('#Edit_Email').val(data[1]);
$('#Edit_Name').val(data[2]);
});
});
</script>
<script>
$(document).ready(function () {
$('.MyOtherBtn').on('click', function () {
$('#MyOtherModal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
$('#Other_ID').val(data[0]);
$('#Other_Email').val(data[1]);
$('#Other_Name').val(data[2]);
});
});
</script>
I've removed extraneous codes such as the DataTables plug-in leaving only the minimum code to eliminate possible third-party components involvement in the issue.
The reason why all your modals get the same content in the modal body after clicking on the "view" button is because you're targeting the .modal-body of every modal on your page in your jQuery $.ajax() function: $(".modal-body").html(result);.
You need to target the modal ID first in the jQuery selector $():
$("#ShowRecordModal .modal-body").html(result);
I have a dynamic table, and in the button value I store value of each id.
I want to pass my button value to a modal popup view and do a database query in the backend. I will do that via node.js and EJS template. I know I can probably do this via using jQuery, but I don't know the details.
The <%= ProInfoList[j].Id %> is my node.js loop to get each data id.
This is button code to trigger modal view:
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
value="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
I would like to use a hidden form field to achieve my goal, but it didn't work.
The form action="/delProInfo/del" is my backend node.js function.
This is my modal code:
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
This may help.
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
title="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
Add a attributes name as title and assign id into title attribute
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" class="hiddenValue" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
</div>
</div>
</div>
When you will click on dropbtn button then you can get attribute name as title and set this value into hidden input type.
<script type="text/javascript">
$(document).ready(function(){
$('.dropbtn').click(function(){
var title = $('.dropbtn').attr('title')
$('.hiddenValue').val(title);
})
})
</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');
}
I want to ask if how would it be possible to pass the value from the input field to the third parameter of #Html.Action in order to be accessed to the controller method. Here is my code:
In my view:
Here is the script that passes the id to the input.
<script type="text/javascript">
$(document).on("click", ".desktop_id", function () {
var deskId = $(this).data('id');
$(".modal-body #idd").val(deskId);
});
</script>
Here is the modal to show the partial view of the action
<a data-toggle="modal" data-id="#item.desktop_info_id" title="Add this item" class="desktop_id" href="#myModal1"><i title="Actions" class="fa fa-th"></i></a>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" 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="myModalLabel1">Actions</h4>
</div>
<div class="modal-body">
<input type="text" name="idd" id="idd" value=""/>
#Html.Action("Transaction", "Desktop", new {id=---need to be field---})
</div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How would it be possible that the #Html.Action("Transaction", "Desktop", new {id=---need to be filled---}) third paraameter can access the id value the same from the input field so that I can pass it to the controller? Thanks.
Try to redirect to your action directly from your jQuery function:
<script type="text/javascript">
$(document).on("click", ".desktop_id", function () {
var deskId = $(this).data('id');
var url = '#Html.Raw(Url.Action("Transaction", "Desktop", new { id = "_id" }))';
url = url.replace("_id", deskId);
window.location(url);
});
</script>
I think I understand what you need. your modal depends on id so you can use it directly like
<a data-toggle="modal" data-id="#item.desktop_info_id" title="Add this item" class="desktop_id" href="##item.desktop_info_id"><i title="Actions" class="fa fa-th"></i></a>
NOTE: here in href="##item.desktop_info_id" used dynamic id
Also set same id for modal: id="#item.desktop_info_id"
<div class="modal fade" id="#item.desktop_info_id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" 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="myModalLabel1">Actions</h4>
</div>
<div class="modal-body">
<input type="text" name="idd" id="idd" value=""/>
#Html.Action("Transaction", "Desktop", new {id=item.desktop_info_id})
</div>
<div class="modal-footer">
<button type="button"class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
UPDATE
Here fiddle with sample, and all seems work: dotnetfiddle