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
});
Related
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 am writing a program with foundation reveal modal. When a modal is opened, the javascript need to stop executing until user has press the button in the modal, then only the javascript continue execute. This is more similar like Alert() function in javascript. Is it possible?
I need some guidelines, thanks!
Yes this is possible.
HTML:
<div id="modal_div" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="okbtn" type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<!-- end html-->
Javascript:
function hide_modal_on_click(top_level_modal_div, button) {
var top_level_modal_div = $("#modal_div").show();
var button = $("#okbtn").on('click', function() {
top_level_modal_div.hide();
})
}
hide_modal_on_click();
I have 5 modal forms in a page. And I want to get the Id of the currently opened one.
I know I can check with $('#myModal').hasClass('in');. If I have 5 modal forms I have to write this 5 times. Which I don't want to.
Is there some way I can determine which modal the user has open currently open and then I will get the id of that.
You can use the shown.bs.modal event to get the current open modal.
Modal Events
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
Here is an example
$('.modal').on('shown.bs.modal', function (e) {
var crntModalId = "current modal id is: " + $(this).attr('id');
$('.output').text('');
$('.output').text(crntModalId);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="output"></div>
<br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-One">
Launch modal one
</button>
<!-- Modal -->
<div class="modal fade" id="myModal-One" 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">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">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-Two">
Launch modal two
</button>
<!-- Modal -->
<div class="modal fade" id="myModal-Two" 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">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">Save changes</button>
</div>
</div>
</div>
</div>
It's very simple, with bootstrap modal event's
To get any attribute value from the modal trigger button you can use $(e.relatedTarget)
To get the modal attribute value you can use $(e.currentTarget)
In your case, you can get the Opened modal id with
$('.modal').on('shown.bs.modal', function(e) {
var modalid = $(e.currentTarget).attr('id');
});
Fiddle
A bootstrap modal gets automatically the class 'shown.bs.modal' when is open, so you can use this to track which one is open.
I have a table from which i am trying on row button click to open a modal containing the details of the object with the rowId. when my button is pressed i go into code behind and do a query that searches the data from the database, then in javascript i send the data to the modal and open it. The table is placed inside a partial view on it's own so that i can pass here a model. the problem that i am facing is that the modal is not opening as a modal but it is opening as a partial view inside the page.
here is my javascript:
$(document).ready(function () {
$('.btn').click(function () {
debugger;
var url = $('#rowDetails').data('url');
$('#rowDetailsBody').html(data);
$('#rowDetails').modal('toggle');
$('#rowDetails').modal('show');
});
});
row detail is the name of my modal that is contained in a partial view, and rowDetailBody is the Modal-Body.
this the function that i do to get data:
public ActionResult ShowDialog(int id )
{
PSEntities _context = new PSEntities(true);
var data = //some query here
return PartialView("ShowDialog", data);
}
i return to a partial view named showDialog the data that is fetched from the database.
and this is my patialView:
<div class="modal fade" draggable="true" id="rowDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">SMS #item.SmsMT.Id</h3>
</div>
<div class="modal-body" id="rowDetailsBody">
<table style="width:100%;" class="table table table-hover table-striped table-condensed export-table" border="0">
<tr>
<td align="left">
<label>#ViewRes.SharedStrings.SmsID</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Id)
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-sm" type="button" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
plz can someone help me and tell how to open the window in a modal instead of full screen
Looks like you have missed modal-dialog and modal-content wrapper from your modal markup.
<div class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
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>