javascript function does not work within jquery $(document).ready block

Question

I am trying to call a JavaScript function from an onclick trigger.

HTML section:

<div class="my_radio">
    <input type="radio" name="my_radio" value="1" onclick="my_func()"/>  first button
</div><!-- end of class my_radio -->

And the JavaScript code

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func(){
            alert("this is an alert");
        }
    });
</script>

It does not work.

But if i keep the JavaScript function out of the $(document).ready() code, it works. Following is the relevant code snippet:

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func111(){
            alert("this is an alert");
        }
    });

    function  my_func(){
        alert("this is an alert");
    }
</script>

1) Why does not the first JavaScript code snippet work?

2) How can I get the first JavaScript code snippet working ?

EDIT :

SO FAR AS I KNOW, $(document).ready() is executed when the web page loads completely. So how can I prevent my_func() to be active before or after the complete page-loading if I write my_func() outside $(document).ready()?

duplicate question > stackoverflow.com/questions/4242541/… — Glavić
– Glavić, Commented Nov 27, 2011 at 18:49
like Alien said > stackoverflow.com/questions/1047454/what-is-lexical-scope — Glavić
– Glavić, Commented Nov 27, 2011 at 18:51
possible duplicate of How can I make a function defined in jQuery.ready available globally? — Andy E
– Andy E, Commented Nov 27, 2011 at 18:54
@glavić , unintentionally duplicate.. will it affect my post negatively? — Istiaque Ahmed
– Istiaque Ahmed, Commented Nov 27, 2011 at 19:18

Didier Ghys · Accepted Answer · 2011-11-27 18:56:46Z

6

It's all about javascript execution contexts and scope.

Everything that you define within a function is know only in this function.

In your first test, the function my_func() can only be used within the ready callback (and in the inner other objects). You can't reference it outside.

In your second example, the function my_func() is global to the document and accessible from anywhere.

I recognize this is maybe a verry simple explanation :-)

edited Nov 27, 2011 at 18:56

answered Nov 27, 2011 at 18:45

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

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

Comments

Sgoettschkes · Accepted Answer · 2011-11-27 18:48:26Z

5

If you define your function within a callback, you can only use it within this callback:

$(document).ready(function(){
  function something(){
    alert('test');
  }

  //..

  something(); // Will work
}

something(); // Won't work

answered Nov 27, 2011 at 18:48

Sgoettschkes

13.2k5 gold badges62 silver badges78 bronze badges

1 Comment

Istiaque Ahmed Over a year ago

the necessary and unnoticed thing to me was, everything inside the $(document).ready is defined within a callback function

jsalonen · Accepted Answer · 2011-11-27 18:47:53Z

1

Your first snippet doesn't work, because in in the function my_func111 is defined within the local scope of an anonymous function passed as an argument in your $(document).ready call.

You can fix your code by placing the function definition to the document scope and calling it inside ready function such as:

function my_func(){
   alert("this is an alert");    
}

$(document).ready(function(){
   my_func();
});

answered Nov 27, 2011 at 18:47

jsalonen

30.8k15 gold badges93 silver badges111 bronze badges

5 Comments

Istiaque Ahmed Over a year ago

what will have for onclick to do then?

jsalonen Over a year ago

Now take your time and read through your answers with patience. They already contain all the information you need to understand and answer your problem!

Istiaque Ahmed Over a year ago

i tried with ur code. the alert box shows up as soon as the page loads. clicking is not required there.

jsalonen Over a year ago

Well obvious if you don't want the alert to appear onload, then remove the my_func() call from $(document).ready? This as far as I will go with my answer. I will leave the rest for you to figure out!

jsalonen Over a year ago

Istiaque: if your problem has been solved, consider accepting an answer in order to get help in the future as well!

majelbstoat · Accepted Answer · 2011-11-27 18:48:51Z

0

I presume by "it does not work", you mean it says "my_func is not defined" or similar?

When you define a function within a function, the inner function is not visible outside of the outer function (unless it is part of the outer function's return statement).

You'll need to learn about closures, a good tutorial on which can be found here.

answered Nov 27, 2011 at 18:48

majelbstoat

13.6k4 gold badges31 silver badges26 bronze badges

2 Comments

Istiaque Ahmed Over a year ago

yes, says 'undefined'. ur link says : The site's security certificate is not trusted! answer to my ques 2? getting familiar with closure ..

Istiaque Ahmed Over a year ago

sorry, i was mistaken in my previous comment to u. does not say anything.

pashute · Accepted Answer · 2016-10-26 09:42:14Z

You'll add a global variable isReady. The $(document).ready callback section will change it to true.

Both your function and the isReady variable must be defined outside the callback of the $(document).ready, so that they can be seen from outside the scope of the callback.

<script type="text/javascript">
var isReady = false;    // outside the onReady callback

function  myFunc(){     // also outside the onReady callback
    if (!isReady) return; // abort if not ready

    alert("this is an alert");
}


// the onReady callback
$(function(){  // the newer jquery shorthand for: (document).ready(function(){
    isReady = true;
});

</script>

Your HTML code needs no changes. - I changed the names to use JS and HTML conventions, but essentially it's the same as what you originally wrote...

<div class="divMyRadio">

<input type="radio" id="myRadio" value="1" onclick="myFunc()"/>  first button

</div><!-- end of class divMyRadio -->

I As a side note: The newer JQuery uses $(function(){ as shorthand for $(document).ready(function(){ to make things easier for you.

Collectives™ on Stack Overflow

javascript function does not work within jquery $(document).ready block

5 Answers 5

Comments

1 Comment

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related