Call Javascript function within Bootstrap button

Question

I have a javascript code which I would like to put it in a function called SleepTime so I can pass in value and then call this function when I click on a button in an html page. Here's my code.

<script>
    function SleepTime(value) {
        $(document).ready(function () {
            $("#ajaxSubmit").click(function (){
                setTimeout(function() {
                    $('#progressBarCenter').modal('toggle');
                }, value);
            });
        });
    }
</script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#progressBarCenter" id="ajaxSubmit" onclick="SleepTime(2000);" > Execute Script</button>

I get an error when I ran the above code. It said the function is undefined but I did define it?? How do I call this function so I can pass in the value??

tks

Solution 1

try this , the correct way of doing this , hope this helps:-

$(document).ready(function () {
            $("#ajaxSubmit").click(function (){
                    var sleepTime =$(this).attr('sleepTime');
                setTimeout(function() {

                                    //$('#progressBarCenter').modal('toggle');
                    console.log('will get printed after 2 seconds')
                }, sleepTime);
            });
 });


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#progressBarCenter" id="ajaxSubmit" sleepTime=2000 > Execute Script</button>

Solution 2

There are two things you miss-used here:

1. Please do not use $(document).ready() inside another function, SleepTime(), as $(document).ready() is supposed to be executed after DOM elements already loaded.

2. You call function SleepTime() one in you attribute onclick(), and you defined click() event listener inside function SleepTime(), this as far as I concern, it never be executed.

The correct way is as below:

$(document).ready(function() {
  function SleepTime(value) {
    alert(value);
    setTimeout(function() {
      $('#progressBarCenter').modal('toggle');
    }, value);
  }

  $('#ajaxSubmit').click(function() {
    SleepTime(2000);
  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#progressBarCenter" id="ajaxSubmit"> Execute Script</button>

</div>

Solution 3

you can do one of these solutions

First One, using a java script function -remove data-toggle="modal" data-target="#progressBarCenter" -remove document ready, and click event listener from the function -then call function on onclick

   <script>
            function SleepTime(value) {
               setTimeout(function() {
                  $('#progressBarCenter').modal('toggle');
               }, value);
             }
        </script>

        <button type="button" class="btn btn-primary" id="ajaxSubmit" onclick="SleepTime(2000);" > Execute Script</button>

Second One, Using a JQuery event -remove data-toggle="modal" data-target="#progressBarCenter" -remove the function and put the code inside jQuery event listener -remove onclick attribute from html

    <script>   
var value = 2000;
            $(document).ready(function () {
                    $("#ajaxSubmit").click(function (){
                        setTimeout(function() {
                            $('#progressBarCenter').modal('toggle');
                        }, value);
                    });
                });  
    </script>

<button type="button" class="btn btn-primary" id="ajaxSubmit" > Execute Script</button>