How to call a function when Modal has loaded?

Question

I have the function below. I want to call the function when the myModal has finished loading. This is what I have so far.

(function ($) {


    $.ajaxSetup({"error":function(XMLHttpRequest,textStatus, errorThrown) {
          alert(textStatus);
          alert(errorThrown);
          alert(XMLHttpRequest.responseText);
      }});

    function get_fun() {

         $.getJSON('/sms/fetch/', function(json) {
            alert('json: ' + json + ' ...');
        });


    };


})(jQuery, window, document);

on page: How do I now call my function?

<script src="/js/smart.js"></script>

<script>
$(document).ready(function() {
    $('#myModal').on('shown', function() {


      get_fun()
    })
});
</script>

I get the error: ReferenceError: get_fun is not defined

Answer 1

Found this on W3 school and works for me. Try it out. https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_event_shown&stacked=h

    $("#myModal").on('shown.bs.modal', function () {
        alert('The modal is fully shown.');
   });

Answer 2

use load event to perform the task.

<script>
$(document).ready(function() {
    $('#myModal').on('load', function() {

       alert("hello!")
    })
});
</script>