How to call external function inside jquery code from html?

Question

I need to load function to get data from external JS included in HTML file, and I'm doing this:

<body onLoad="getTicket();">
......
</body>

or this:

<html>
<body>
    <head>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/functions.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            getTicket();
        });
    <script>
    </head>
<body>
</html>

or this:

<html>
<body>
    <head>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/functions.js" type="text/javascript"></script>
    <script>
        getTicket();
    <script>
    </head>
<body>
</html>

And I have this in functions.JS:

functioOne() {

}

functionTwo() {

}

$(document).ready(function() {
    ...
    .....
    function getTicket() {
        //to do
    }
});

But does'nt work and in the console display this:

Uncaught ReferenceError: getTicket is not defined

Regards.

how are you including that external js file into that HTTML file ? — yogi
– yogi, Commented Feb 16, 2013 at 8:47
What browser are you using? Does it produce errors in your console? If there's a parsing error inside your functions.js file, the browser may 'skip' the rest of the file, causing your getTicket() function to 'not' being defined — thaJeztah
– thaJeztah, Commented Feb 16, 2013 at 8:59
The head tag has to be put before the body tag - especially when you want <body onLoad="getTicket();"> — biberman
– biberman, Commented Apr 20, 2021 at 20:27

Camilo Martin · Accepted Answer · 2013-02-16 08:47:18Z

9

Your getTicket function is defined only in the context (scope) of the jQuery closure (anonymous function). Define it in the global scope instead (elsewhere in the file and not as a "function parameter").

If you need variables from that scope, encapsulate them in a namespace (an object), or declare it as window.getTicket = function() { /* ... */}.

answered Feb 16, 2013 at 8:47

Camilo Martin

38.1k22 gold badges121 silver badges156 bronze badges

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

Comments

Afzaal Ahmad Zeeshan · Accepted Answer · 2017-09-13 19:04:20Z

5

Try putting the function getTicket(){} outside or the doc ready:

functio One() {

}

function Two() {

}
function getTicket() {
    //to do
}

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

Your order of inclusion is perfect no issues with that.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>

This is perfectly fine.

edited Sep 13, 2017 at 19:04

Afzaal Ahmad Zeeshan

15.9k14 gold badges61 silver badges106 bronze badges

answered Feb 16, 2013 at 8:54

Jai

74.8k12 gold badges77 silver badges104 bronze badges

3 Comments

SoldierCorp Over a year ago

The problem is that getTicket() contains jQuery code and for that reason I can't put out.

Jai Over a year ago

There should not be any issues i think but you can try this though.

DrLivingston Over a year ago

@SoldierCorp the document on ready part just makes sure that the DOM is populated before your jQuery runs. You can define code outside of it, just so long as it isn't called yet. (now whether or not you should is another question)

sdepold · Accepted Answer · 2013-02-16 08:47:59Z

4

you could do this:

$(document).ready(function() {
  ...
  .....
  window.getTicket = function() {
    //to do
  } 
});

once the document is ready, you will be able to call getTicket

answered Feb 16, 2013 at 8:47

sdepold

6,2262 gold badges43 silver badges47 bronze badges

1 Comment

SoldierCorp Over a year ago

You mean, that I put that code in external js or in html file?

collimarco · Accepted Answer · 2013-02-16 08:53:19Z

0

Add <script type="text/javascript src="external.js"></script> to head.

Then you have to wait for the document to be fully loaded.

The problem is that your code gets executed this way:

execute external.js
your function is not defined because the document hasn't finished loading
you call the undefined function
the document is ready

IMHO I don't think is a good idea to define a function inside $(document).ready. It would be simpler to normally define that function, then call it inside $(document).ready.

edited Feb 16, 2013 at 8:53

answered Feb 16, 2013 at 8:47

collimarco

35.7k37 gold badges116 silver badges157 bronze badges

1 Comment

Camilo Martin Over a year ago

I -1'd you when your answer was just to "add the script tag" (which had nothing to do with the problem that the scope of the function was a closure, which means that he couldn't ever see it). Now you've edited it so I'm un-minus-oneing-it.

Harish Ambady · Accepted Answer · 2013-02-16 08:54:19Z

0

You must include the js file before calling the function. If you do This:

<html>
<body>
    <head>
    <!-- include script files here.(jquery and custom script files) -->
    <script>
        $(document).ready(function() {
            getTicket();
        });
    </script>
    </head>
<body>
</html>

you must include your script file before calling the function.

edited Feb 16, 2013 at 8:54

answered Feb 16, 2013 at 8:48

Harish Ambady

13.2k4 gold badges32 silver badges56 bronze badges

1 Comment

SoldierCorp Over a year ago

Obviously that I have it, is the first thing you should do.

Collectives™ on Stack Overflow

How to call external function inside jquery code from html?

5 Answers 5

Comments

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related