I have a listing page containing a link button to show modal repeating in a PHP loop. I have searched and found these:
Passing data to a bootstrap modal, Passing data to Bootstrap 3 Modal and Pass id to Bootstrap modal and some others but failed.
What I want
I have fetched the data id from database and pass it to bootstrap modal and there I will use this id to display more info through MySQL queries.
I have written all the code but the ID is not passing to the modal.
Modal Link Button code
<a class="btn btn-warning btn-minier" href="#modal-form-show" role="button" data-toggle="modal" data-target="#myModal" data-id="<?php echo $cottage_id ?>"><i class="icon-edit bigger-120"></i> Reservation </a>
Modal code
<!-- Modal -->
<div id="myModal" 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">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
JS code
$('#modal-form-show').on('show.bs.modal', function(e) {
var c_id= $('a[href="#modal-form-show"]').data('id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});
I have taken a text input in modal named cottage and I want show that id in this input.
Try this snippet:
$('.btn-minier').click(function(){
var c_id = $(this).attr('data-id');
$('#cottage').val(c_id);
});
I have change little , when button click show the popup & i've set the value of data-id=2
Button
<a class="btn btn-warning btn-minier" id="btnModalPopup" href="" role="button" data-toggle="modal" data-target="" data-id="2"><i class="icon-edit bigger-120"></i> Reservation </a>
I add button in you modal
<div id="myModal" 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">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>
ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" readonly />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btnSubmit">Submit</button>
</div>
</div>
</div>
</div>
Javascript code
<script>
$(document).ready(function () {
$('#btnModalPopup').click(function () {
var c_id = $(this).data('id');
console.log(c_id)
$('#myModal #cottage').val(c_id)
$('#myModal').modal('show')
});
$('#btnSubmit').click(function () {
alert('submit button click')
// get the id , from input field.
var id = document.getElementById('cottage').value;
console.log(id)
alert(id)
//You can set the id - to php variable - then hit to sever by ajax
})
});
</script>
Try using attr method of JQuery
$('#modal-form-show').on('show.bs.modal', function(e) {
// instead of this
//var c_id= $('a[href="#modal-form-show"]').data('id');
// try this one
var c_id= $('a[href="#modal-form-show"]').attr('data-id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});
Related
here is my link and the sample data value i want to pass "data-id"
<i class="fas fa-edit fa-lg fa-fw"></i>
javascript code to load the modal and assign the data value to the modal
<script>
$("#openModal").click(function(){
$(".modal-body").text($(this).data("id"));
$("#edit_task").modal("open");
});
</script>
my modal
<div class="modal fade" id="edit_task">
<div class="modal-dialog">
<div class="modal-content">
<form action="" method="post" enctype="multipart/form-data">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">add new user</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
modal body i would like to display the modal variable here
<!-- Modal body -->
<div class="modal-body">
</div>
modal footer
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<?php
echo "<button type='submit' class='btn btn-primary' name='edit' onclick='return mess()'; >";echo "save"; echo "</button>";
?>
</div>
function to confirm when a value is saved
<script type="text/javascript">
function mess(){
alert ("the new user is successfully saved");
return true;
}
</script>
end of the modal
</form>
</div>
</div>
</div>
I have created a working fiddle of what you are looking for.
I changed your Wah button, replacing the href attribute with a data-target attribute:
<a class="btn btn-primary" data-toggle="modal" data-target="#edit_task" data-id="Wah">Wah</a>
Note: If you want the button to look like a link then replace the btn-primary class I used in the example with btn-link
Instead of using a click event on a button, use bootstraps show.bs.modal event. The $(event.relatedTarget) syntax is how you can get the button object for the button that was clicked to open the modal.
$(document).ready(function(){
$('#edit_task').on('show.bs.modal', function (event) {
$('#edit_task').find('.modal-body').text($(event.relatedTarget).data('id'));
})
});
I am building a table based on data returned from my API.
For each row in the table I would like to create a bootstrap modal with additional info in it.
This is how I do it right now. I created a designated div and I put all the modals inside it. Please note that in addition the modal's HTML is pretty big by itself:
let modal = `<div id="modal-${i}">big HTML here</div>`;
$("#modalsCollector").append(modal);
And this is how my table row looks like:
<tr data-toggle="modal" data-target="#modal-${i}">
Because I sometimes have 500+ table rows there is eventually a huge div (#modalsCollector) full of same (by structure) modals. I feel that it affects page performance.
Is there a better, more elegant and performance optimized way to bind modals to table rows? Or in general, working with many hidden elements instead of pushing them into the DOM that way?
You can include only one "null" modal in your <body>, like this:
<div id="myModal" 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>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then when you have to show the modal generate it using jQuery like this:
$("#button").click(function(e){
$("#myModal .modal-header").append(HTML for modal header here);
$("#myModal .modal-body").html(big HTML for modal body here);
$("#myModal").modal("show");
});
So, basically you change the modal header and the modal body of the same modal each time, with the needed information accordingly, without the need of like thousands of modals.
Bootstrap has a neat way of changing the components of the same modal. This is as long as you need the same modal just different content inside.
https://getbootstrap.com/docs/4.5/components/modal/#varying-modal-content
Here is an example:
HTML:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fta">Open modal for #fat</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and jQuery:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// Update the modal's content.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
I have been doing this some time now. I have an anchor tag that opens a pop up modal and passes the dropdown value to that modal which I already accomplished.
Now In my modal, I need to use the value on the textbox which is hidden (but not for now) to a mysql query.
I'm thinking on how Can i put that value in textbox to a php variable.
Need help please.
Here's my javascript for the opening of modal.
<script type="text/javascript">
$('#modalRegister').on('show.bs.modal', function(e) {
var modal = $(this),
datestart = $('#datestart').val();
modal.find('#myVal').val(datestart);
})
</script>
Now my Modal
<div id="modalRegister" 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" style="text-align-last: center">Register</h4>
</div>
<div class="modal-body">
<input type="text" id="myVal" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Im thinking of doing a query there to cast a table and put the results on that table. The where clause if <input type="text" id="myVal" value=""/>
I am having an issue when saving inside of the add-comment modal. When I click on "save" inside of the modal it is triggers depending on how many times I have previously opened that modal.
The form I am working with is dynamic so there could be 1 to many comments to be added. I only want to use one modal to insert comments in a hidden field (not shown)
I am very confused to why when i click on the
TEST CASE
Launch Page
Open the comment modal using the comment icon
Click Save
Repeat open and saving the comment modal multiple times.
Look inside of console to see
"In Save Comment: " + i
Where i equals the number of times it is in that function.
HTML
<form id="requestForm">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#detailsModal"><span class="glyphicon glyphicon-share" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default" data-add-comment><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
</form>
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel">
<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="detailsModalLabel">User Details</h4>
</div>
<div class="modal-body">
<table class="table table-bordered">
<tbody>
<tr>
<td class="col-sm-3"><strong>Name</strong></td>
<td class="col-sm-4" id="info-name"></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Details Modal -->
<!-- Comments Modal -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel">
<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="commentModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<textarea id="modalComTxt" class="form-control" rows="4" maxlength="512"></textarea>
<p>Characters left: <span id="txtAreaCount">512</span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save-comment" type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
JAVASCRIPT
$("#requestForm").on('click', '[data-add-comment]', function() {
var curComBtn = $(this);
var curComment = curComBtn.prev().val();
var modalTxt = $('#modalComTxt');
var commentModal = $('#commentModal');
modalTxt.val(curComment); //set the modal value with existing comment
var i = 1;
$('#txtAreaCount').text((512 - modalTxt.val().length)); //change text count in modal
commentModal.modal('toggle');
//Function when clicking save in modal
$('#save-comment').click(function() {
console.log("In Save Comment: " + i)
i++
console.dir(curComBtn.prev());
curComBtn.prev().val(modalTxt.val());
});
});
Move the code below outside the $("#requestForm").on('click', function(){...} handler. What is happening, is that you bind an additional handler to save-comment button click event every time the [data-add-comment] button of the form gets clicked.
$('#save-comment').click(function() {
var curComBtn = $('#requestForm').find('[data-target="#detailsModal"]');
curComBtn.val( $('#modalComTxt').val() );
});
Every time someone clicks #requestForm you bind the click eventlistener to #save-comment. So after opening the modal for a second time there will be two click eventlisteners binded to #save-comment.
Since #save-comment isn't added dynamically, you can bind the click event outside of the #requestForm click handler:
$('#requestform').click(function(){
// do stuff
});
$('#save-comment').click(function(){
// do other stuff
});
I currently have panels and each panel has an ID associated with it which is held in the data-id attribute of each panel. I can get this easily through JavaScript. One the panels I have a delete button which will delete the panel and it's entry within the database. Once this delete button is clicked, a modal will fire up with a Html.BeginForm() which is hooked up to an action on my controller. I was wondering if it was possible to add an the widget ID to the routing values via JavaScript?
Here is my modal:
<div class="modal fade" id="deleteWidgetModal" tabindex="-1" role="dialog" 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">Delete widget?</h4><!--add depending on which panel you have clicked-->
</div>
<div class="modal-body" id="myModalBody">
<!--Depending on which panel insert content-->
#using (Html.BeginForm("DeleteWidgetConfirmed", "Dashboard", FormMethod.Post,))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
Do you wish to delete this widget?
<div class="form-group">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" value="DeleteWidgetConfirmed" class="btn btn-danger btn-ok" id="delete-widget">Delete</button>
</div>
</div>
</div>
}
</div>
</div>
</div>
and here is the JavaScript:
/*---------------------------------------------DELETING PANELS-------------------------------------------------*/
$(document).ready(function () {
$('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) {
//get id here
//toggle the modal
$('#deleteWidgetModal').modal('toggle');
//pass id to form
});
});
$(document).ready(function () {
document.getElementById('#delete-widget').onclick = function (event) {
event.preventDefault();
var parentElement = $(this).closest(".col-md-4.column");
var targetElement = $(this).closest(".panel.panel-default");
targetElement.remove();
//parentElement.addClass("expand-panel");
checkEmptyPanelContainers();
}
});
Html.BeginForm is transformed into a <form> tag before your javascript and user interaction is executed. You can modify that form using something like this
$("form").prop('myattribute', value)