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

what is the point of adding document.ready inside sleepTime ? its irrelevant remove it first . — Atul
– Atul, Commented Aug 19, 2018 at 8:17
baically you need to remove sleepTime function , it will get bounded to the button as you are adding click handler inside document ready. — Atul
– Atul, Commented Aug 19, 2018 at 8:19
"It said the function is undefined" — Which function? You call several functions in that code. — Quentin
– Quentin, Commented Aug 19, 2018 at 8:28

Atul · Accepted Answer · 2018-08-19 08:26:03Z

3

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>

answered Aug 19, 2018 at 8:26

Atul

4302 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Houy Narun · Accepted Answer · 2018-08-19 08:41:29Z

There are two things you miss-used here:

Please do not use $(document).ready() inside another function, SleepTime(), as $(document).ready() is supposed to be executed after DOM elements already loaded.
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>

saka · Accepted Answer · 2018-08-19 09:55:45Z

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>

Collectives™ on Stack Overflow

Call Javascript function within Bootstrap button

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related