How to call external function inside jquery code from html?

javascript jquery html function

47,845

Solution 1

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() { /* ... */}.

Solution 2

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.

Solution 3

you could do this:

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

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

47,845

Author by

SoldierCorp

Full-stack web and mobile developer Portfolio: https://edgardorl.com Youtube: http://youtube.com/SoldierCorp0

Updated on July 05, 2022

Comments

SoldierCorp almost 2 years

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.

SoldierCorp about 11 years

You mean, that I put that code in external js or in html file?
SoldierCorp about 11 years

Obviously that I have it, is the first thing you should do.
SoldierCorp about 11 years

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

There should not be any issues i think but you can try this though.
Camilo Martin about 11 years

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.
DrLivingston about 10 years

@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)
ZEESHAN ARSHAD over 7 years

Thank you, your example helped to get the idea.