jQuery Cide:

function modal(this) {
        alert($(this).data("id"));
    }

HTML Code:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-id="<?php echo $state['ID']?>" onclick='modal(this)'>Open Modal</button>

Bootstrap Modal

<!-- 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">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Error:

Uncaught ReferenceError: modal is not defined at HTMLButtonElement.onclick

I already defined modal outside of document ready function but it displaying me modal is not defined error How to resolve this error?

jQuery Cide:

function modal(this) {
        alert($(this).data("id"));
    }

HTML Code:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-id="<?php echo $state['ID']?>" onclick='modal(this)'>Open Modal</button>

Bootstrap Modal

<!-- 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">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Error:

Uncaught ReferenceError: modal is not defined at HTMLButtonElement.onclick

I already defined modal outside of document ready function but it displaying me modal is not defined error How to resolve this error?

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Mar 21, 2017 at 14:12 Rushabh Shah asked Mar 21, 2017 at 13:55 Rushabh ShahRushabh Shah 51533 gold badges66 silver badges2222 bronze badges 5

• 4 the function is defined in document ready handler scope, move function modal outside – Satpal Commented Mar 21, 2017 at 13:56
• 1 Or better yet, use an unobtrusive event handler on the button and get rid of the outdated on* event attribute – Rory McCrossan Commented Mar 21, 2017 at 14:01
• Better yet, don't use onclick inline, as it is not remended. Use $('#id').on("click", function() {//your code}); instead. – adprocas Commented Mar 21, 2017 at 14:01
• In HTML events you can only use the functions defined in global scope. So either move your modal function to outside $(document).ready or assign a click event using JS. – Gangadhar Jannu Commented Mar 21, 2017 at 14:02
• I updated code still it not working please help me – Rushabh Shah Commented Mar 21, 2017 at 14:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 0

Here is working snippet.

function modal(ref) {
	alert($(ref).data("id"));
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-id="1" onclick='modal(this)'>Open Modal</button>

Read this: Why can't I use onClick to execute a function inside a jQuery $(document).ready function?

1. Add an id to the button: id="btnModal"

2. Delete this: onclick='modal(this)'

3. Put this (outside your document.ready):

   $('#btnModal' ).click(function() 
    {
       $('#myModal').modal('show');
    });