I have a BS modal on a page that I would like for a user to be able to submit by using the enter button on a keyboard or a button submit on the modal. While attempting to implement this functionality, I've discover something that needs to be changed and
I haven't figured it out. When the modal is open and the keyboard enter button is depressed, a function is called that is unrelated to the modal code.
The BS modal is and the image buttons are on the same page.
A table is dynamically built and loaded using ajax and for each record in the table, adding the image buttons. These images load as expected and with clicking an image the function below is called. The code is:
However, when the modal is open, and the keyboard enter key is pressed, the deleteRecord function is
called also. Why? and how can I separate this behavior?
You have to create external javascript for your modal popup and control the event handler through your code like $("[element/id]").on("click",function). Dont use inline javascript because it's hard to debug and control your code. your code should starts
with IIFE (immediately invoke expression). I'll give you sample reference below.
According to your description and code, I make a test in my side, when I open dialog , then press enter key, dialog close and not trigger button click event. So I suggest you can add judge of press key, like this:
<script>
function deleteRecord() {
if (event.keyCode == 13)
{
//prevent your deleteRecord event
}
}
</script>
Best Regards,
Eric Du
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
27 Points
84 Posts
Bootstrap Modal, Inline Javascript and function issue
Nov 09, 2016 10:12 PM|cowasaki|LINK
I have a BS modal on a page that I would like for a user to be able to submit by using the enter button on a keyboard or a button submit on the modal. While attempting to implement this functionality, I've discover something that needs to be changed and I haven't figured it out. When the modal is open and the keyboard enter button is depressed, a function is called that is unrelated to the modal code.
The BS modal is and the image buttons are on the same page.
A table is dynamically built and loaded using ajax and for each record in the table, adding the image buttons. These images load as expected and with clicking an image the function below is called. The code is:
html page:
modal
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<div class="form-group">
<table>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default alert-success" id="btnSave" OnClick="btnSaveClick()" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-default" id="closeProjectModal" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
JS file code
the js script is referenced at the bottom of the html page. This code is outside of document.ready();
"<input type='image' src = 'myimage.jpg' data-id='"+ data[i].id+ "' OnClick=deleteRecord(event) />";
function deleteRecord(event) {
...delete the record
}
However, when the modal is open, and the keyboard enter key is pressed, the deleteRecord function is called also. Why? and how can I separate this behavior?
Member
60 Points
25 Posts
Re: Bootstrap Modal, Inline Javascript and function issue
Nov 10, 2016 02:43 AM|mardyDacasin|LINK
Hi,
You have to create external javascript for your modal popup and control the event handler through your code like $("[element/id]").on("click",function). Dont use inline javascript because it's hard to debug and control your code. your code should starts with IIFE (immediately invoke expression). I'll give you sample reference below.
Reference:
http://benalman.com/news/2010/11/immediately-invoked-function-expression/
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-modals.php
*Dont forget to mark as answered if it helps you to solve your problem* Thanks
Regards,
Mardy
Mardy
Contributor
6730 Points
2715 Posts
Re: Bootstrap Modal, Inline Javascript and function issue
Nov 10, 2016 06:44 AM|Eric Du|LINK
Hi cowasaki,
According to your description and code, I make a test in my side, when I open dialog , then press enter key, dialog close and not trigger button click event. So I suggest you can add judge of press key, like this:
<script> function deleteRecord() { if (event.keyCode == 13) { //prevent your deleteRecord event } } </script>Best Regards,
Eric Du
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.