Calling js function in another file - Dependency between Javascript scripts

Asked

Viewed 23,429 times

4

I am doubtful in js to call a function in another js.

Example:

if (nome == ""){
   exibirModal();
}

As the function "exibirModal()" is in other js, is giving error as if the function had not been declared.

In my html I put the script exibirMensagem.js and then my cadastro.js

javascript

5 answers

5


By what you’re saying, if the files are being loaded in the correct order - i.e., what contains the function statement exibirModal being loaded before you try to call this function -, all indicates that you have a scope problem.

Probably the function exibirModal is being declared within another function. If it is not depend on variables declared in that other function, move it out (i.e., to the global scope) must resolve. Otherwise, change the statement of something like:

function exibirModal() { ...

for:

window.exibirModal = function() { ...
  • 1

    Dude vlw even! worked!

  • Show, I just added in another file as if I was in the same and it worked here. Vlw

2

You can make the first script execute an existing function in the second script, but to do so you must trigger the event execution onloaddocument as this example (using jQuery):

$(document).ready(function() {
   somar(a,b); //somar() ainda será definido
});
  • 1

    This is not necessary and should not be the problem. Loading scripts on a page is synchronous. Page does not continue to load while the included file has not been loaded. Look at this question for more details.

  • @Beet I think you don’t understand the answer. He wants to display a modal but the method has not been loaded, so he will make the call just on document ready, where everything has already been loaded

  • Exactly. There is no way the function has not been loaded, since the author of the question explains that he has included the file where the function is declared before the file from which the function is called.

  • @Beet for me is not explicit the order in which he is carrying

  • It’s written in the question: "In my html I put the script exibirMensagem.js and then my cadastro.js". But fine, I just said that to clarify the point.

  • hi @Beet! I don’t want to be boring, I’m just policing my interpretation and I want your help! In the details of the question, it is explicit in which file the if in question was written? []s!

  • In fact, it is not. My interpretation came out of the fact that he explained the order, which made me infer that the if was in the second file, while the function in the first. Hugs!

Show 2 more comments

2

You should expect the entire page to be loaded to have access to the DOM elements, which probably happens within your function exibirModal(). So try to take advantage to make the call in a function triggered by the event "onload":

window.addEventListener("load", function(){
    if (nome == ""){ exibirModal(); }
});

  • This is not necessary and should not be the problem. Loading scripts on a page is synchronous. Page does not continue to load while the included file has not been loaded. Look at this question for more details.

  • 1

    As pointed out by @Beterraba, in fact, the scripts are loaded synchronously, in the sequence in which they were called, fact apparently already known by the OP. So I edited my answer to clarify better.

  • vlw for the return!

2

You know the Requirejs ? http://requirejs.org/

Requirejs is a Javascript and module file loader. It is a javascript library.

Download into http://requirejs.org/docs/download.html#requirejs or refer to your html in CDN //cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js

With Requirejs you inform that certain portion of your javascript code requires, that is, you need another javascript library to be loaded.

Example (adapting from http://requirejs.org/docs/start.html) :

Let’s say your site has this structure :

project-directory/
--project.html
--scripts/
----cadastro.js
----exibirMensagem.js
----require.min.js  (faça o download em http://requirejs.org/docs/release/2.1.14/minified/require.js )

So in your HTML do something like :

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- O atributo data-main diz para o require.js carregar
             scripts/cadastro.js depois que o require.js seja carregado. -->
        <script data-main="scripts/cadastro" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

Finally within your.js register you do something like this :

    require(["exibirMensagem"], function(exibirMensagem) {

     if (nome == ""){ exibirModal(); }

    //Essa função será executada quando exibirMensagem.js for carregado.
    //Se exibirMensagem.js usar o método define() (mais detalhes em http://requirejs.org/docs/api.html#define ), então essa função só será disparada quando todos os módulos definidos forem carregados.
});

I hope it helps.

  • Guy had the same problem, and I thought it was cool what you said about the Requirejs, had never heard of it, and it will help me a lot. Thanks, and congratulations

  • I’ll try now... I did other tests and it didn’t work... vlw!!!

0

Checks that the embed order of your script displays.js messaging and.js registration. Open the browser console (usually F12) and try to perform the desired function.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.