locked
Bootstrap Modal, Inline Javascript and function issue RRS feed

  • Question

  • User1144600762 posted

    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?

    Wednesday, November 9, 2016 10:12 PM

Answers

  • User-1838255255 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 10, 2016 6:44 AM

All replies

  • User1777532290 posted

    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

    Thursday, November 10, 2016 2:43 AM
  • User-1838255255 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 10, 2016 6:44 AM