Develop Reference

How to pass value into href link of a Bootstrap Modal?

I want to clear the values of a certain table so I want to get the table name using Bootstrap modal. I want the name of the table in url.
This is my code:
Here I'm sending the name of the table into the modal
<ol class="breadcrumb text-center">
<li class="breadcrumb-item">
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
</ol>
I want to pass the value inside data-table into href as clear.php?clear_id="table_name"
<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Are you sure you want to clear scrap for this table.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger" href="clear.php?clear_id=">Clear</a>
</div>
</div>
</div>
</div>
Thank you in advance!

You can dynamically change the href value of the Clear button in your modal by utilising the shown.bs.modal event trigger and building the URL with the data-table attribute at your disposal provided by the relatedTarget property in the event object.
I've add a clear button click event to emphasise this visually.
$('#scrapModal').on('show.bs.modal', function (e) {
var table = $(e.relatedTarget).data('table')
var href = 'clear.php?clear_id=' + table
$('.btn-danger', this).attr('href', href)
console.log(href)
})
// Simulate "clear" button click to alert href value
$('#scrapModal .btn-danger').on('click', function (e) {
e.preventDefault()
alert(e.target.pathname + e.target.search)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="breadcrumb text-center">
<li class="breadcrumb-item">
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
</li>
</ol>
<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to clear scrap for this table.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger" href="#">Clear</a>
</div>
</div>
</div>
</div>

Use the following lines of code inside your script tag and this should work fine.
$('#scrapModal .btn-danger').on('click', function (e) {
e.preventDefault()
alert(e.target.pathname + e.target.search)
})

You can do it by using a simple script like this:
$('#scrapModal').on('show.bs.modal', function (event) {
var table = $(event.relatedTarget).data('table');
$(this).find('.btn-danger').attr("href", "clear.php?clear_id=" + table);
)}
This will run when the modal appears. It would be better to give the confirm button an id attribute in order to look up in a more elegant way.
You can find more information about varying the modal content here: https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

Programm edit entity instead add

There is modal window in my jsp. I use it for both: add or edit my items. It decides what to do depends on "id": add if "id" is null, edit - if not null.
<div class="modal fade" id="editRow">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="modalTitle"></h2>
</div>
<div class="modal-body">
<form class="form-horizontal" id="detailsForm">
<input type="hidden" id="id" name="id">
...
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<button class="btn btn-primary" type="button" onclick="save()">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
Generally it works fine, but there is one scenario which does not work:
I open "edit" windows for some item
Don't save it, just close "edit" window
Open "add" window, enter some data
After saving it edit item from 1), instead adding new one
There is button on this jsp, which I press to call "add" window:
<a class="btn btn-info" onclick="add('<spring:message code="meals.add"/>')">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>
There is "add" js function from this button:
var form;
...
form = $('#detailsForm');
...
function add(title) {
$('#modalTitle').html(title);
form[0].reset();
$('#editRow').modal();
}
I thought form[0].reset(); should prevent such wrong scenario, but seems it does not help. Could you explain?

Seems that reset() doesn't nullify your form's id, instead it will clear form's input.
https://www.w3schools.com/jsref/met_form_reset.asp

Onclick function triggering multiple times

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
});

How to Submit other Modal form on Submit Button click of Current Modal

I have a Bootstrap Modal which contains a Submit Button.Apart from this Modal I have another one also which contains Form and other elements like Lables, Text boxes and a Submit button.Now I have a requirement where in a click Submit button of first Modal , it should submit the Form of the Second Modal..Below I am posting my First and Second Modal HTML Prototype ..
<div class="modal alert" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="DeleteModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title" id="DeleteModalLabel">Confirm Delete</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-sm-6 control-label">Are You Sure To Delete !!!</label>
</div>
</div>
<div class="modal-footer">
<div class="pull-right">
<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-trash"></i> Delete</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Cancel</button>
</div>
</div>
</div>
</div>
and Here is the Second One..
<div class="modal fade" id="StudentModal" tabindex="-1" role="dialog" aria-labelledby="StudentModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<form action="~/GetStudent" class="form-horizontal" role="form" method="post" id="frmStudent">
<div class="modal-footer">
<div class="pull-right">
<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
</div>
</div>
</form>
</div>
</div>
Please suggest me How can this is possible.Thanks..

Adding a class to delete button
<button type="submit" class="btn btn-success delete"><i class="glyphicon glyphicon-trash"></i> Delete</button>
Write a click event.
$('.delete').on('click',function(){
$('#DeleteModal').modal('hide');
$("#frmStudent").submit();
});
Note : This is just a basic example. Now if you want to use ajax to submit the form then there are way different steps to achieve it.

Bootstrap Confirmation Dialog

I currently have a page that asks the user if they want to actually do something. Currently, it works like this:
Do This Thing
<script type="text/javascript">
function promptUser() {
return confirm("Are you sure you want to do this thing?");
}
</script>
Now, the user wants to add some graphics, etc to the dialog. For that reason, I want to use the Bootstrap Modal window as I have it elsewhere in my code. I've added the following:
<div id="confirmDialog" class="modal hide fade">
<div class="modal-body">
Are you sure you want to do this thing?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="confirmed">Yes</button>
<button type="button" data-dismiss="modal" class="btn">No</button>
</div>
</div>
However, I'm not sure how to wire up the interaction with the link. If the user says "No", I want to stay on the page. If the user says "Yes", I want to redirect the user to the url in the href. How do I set this up?
Thanks

HTML
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
click me
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="confirm">confirm</button>
</div>
</div>
</div>
</div>
JS
$('#confirm').on('click', funciton(){
window.location.href = "http://stackoverflow.com";
});

$('#confirmed').click(function(){
location.href = "some URL "
});
It will stay on no as it's default behavior or bootstrap modal and we have attached event on yes button on mention above.

Late to the party, but things have moved on in the last few years. For reference, in case anyone else needs to ask the same question, it might be easier to wrap the modal in a form, and use an input to respond:
<!-- Modal -->
<form action="letsdothisthing.php method="post">
<div class="modal fade" id="myModal" 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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary value="YES" ></input>
</div>
</div>
</div>
</div>
</form>