Call JQuery function in JavaScript function

Question

I got this JQuery code:

file: code.js

 jQuery(function(){

        function renderSVG(){
            //Something
        };
 });

File: index.html

<script>
      function mostrarOdonto() {
          renderSVG();
      };
</script>

But i got a problem here: http://i.gyazo.com/9550a64fc16c7570107706fb2162d84f.png in renderSVG() inside mostrarOdonto() "Uncaught ReferenceError: renderSvg is not defined"

I tried $renderSVG(); but doesnot work. Anyone can help me?

Thanks so much!

PD: Sorry bad english

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

That is caused by javascript closures. It is local within the jQuery call and not accessible outside. You can read more about it here: MDN Documentation

You can declare objects outside of the jQuery function call to have it available globally. i.e.:

function RenderSVG(){
 //Do Stuff
}

jQuery(function(){
   RenderSVG();
});

This ensures that it is accessible outside the jquery scope or if you really need it within jQuery you can go the route of a jQuery Plugin a la: jQuery docs

Example:

(function( $ ) {
    $.fn.renderSVG = function( options ) {
       //Do Stuff with canvas since it would be referenced in this.
    }; 
}( jQuery ));

Then you can call it like: $('#mycanvas').renderSVG({/*options*/});

Update 1:

You have to ensure when your code is called after loading jQuery and any plugins. in your <head> tag you should put <script src=".../jquery.min.js"> or whatever your file for jquery is called followed by any plugin scripts ...src="jquery.svg.js", then you put your code:

<script>
   function RenderSVG(){
   }

   //And most important is that you call it after it is ready. In this example
   //I use jQuery(window).load you can also use jQuery(document).ready
   jQuery(window).load(function(){
      RenderSVG();
   });
</script>

if it still doesn't work you have to ensure the library for the svg methods aren't doing something weird. To be sure we would have to know the library you are using.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 30, 2014 at 6:14

MiltoxBeyond

2,7511 gold badge16 silver badges14 bronze badges

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

1 Comment

Cizaquita Over a year ago

My renderSVG function uses JQuery methods, and show me errors here: clear() method gyazo.com/e0ed4d5ea3417e2152d1f25f1936e219.png Thanks

A.M.N.Bandara · Accepted Answer · 2014-10-30 05:59:00Z

0

The function renderSVG() is a local function,since it is inside jQuery(function(){ }. It is valid only in that scope , So it is not accessible via other scopes. So try it like this.

<script>
      jQuery(function(){
         function mostrarOdonto() {
             renderSVG();
         };
      };
</script>

answered Oct 30, 2014 at 5:59

A.M.N.Bandara

1,50815 silver badges32 bronze badges

4 Comments

Menztrual Over a year ago

Or declare renderSVG as a variable outside of jQuery

A.M.N.Bandara Over a year ago

It would work. Bu the issue is, from that moment on, that variable will be global. It is not a good practice to declare global variables.

Winchestro Over a year ago

@Xl-lord Please explain why it is not a good practice to declare global variables.

Cizaquita Over a year ago

Hi, but it doesnot work, sayd: Uncaught ReferenceError: jQuery is not defined And in the final line need "});" i.gyazo.com/3ddf061f272a4d173e77a9d332cf37ab.png

vedbhawsar · Accepted Answer · 2014-10-30 06:33:40Z

0

You can Do it in this way JSFIDDLE LINK

HTML:

 <input type="button" value="go" onclick=" mostrarOdonto();">

Scripts:

 $.renderSVG = function() {
  alert("I am calling form jquery");
 };

 $(document).ready(function() {
  alert("function is ready to use now");
 });

 function mostrarOdonto() {
      $.renderSVG();
  };

This should work as per your requirement. The Jquery part can go into your Code.js file.

edited Oct 30, 2014 at 6:33

answered Oct 30, 2014 at 6:13

vedbhawsar

758 bronze badges

2 Comments

Cizaquita Over a year ago

But my renderSVG is a function: function renderSVG(){ //code }; see my question, thanks.

vedbhawsar Over a year ago

if you want renderSVG to be a Java Script function the function should be in calling scope. either do like above or call it from jquery scope- jQuery(function(){function mostrarOdonto() { renderSVG(); }; };

user3811714 · Accepted Answer · 2014-10-30 06:37:49Z

0

I think could help you it's simple and straight forward

$(document).ready(function() {
 mostrarOdonto();

});

 function renderSVG() {
    alert("Testing purpose only");
};

function mostrarOdonto() {
    renderSVG();
};

answered Oct 30, 2014 at 6:37

user3811714

2763 gold badges8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Call JQuery function in JavaScript function

4 Answers 4

Update 1:

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Update 1:

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related