Error including js in view

Asked

Viewed 42 times

0

On the system I am working on, there is a php file of js functions:

<script type="text/javascript">
  function alertaProximaBloqueada(){
    [...]
  }
  function ManualAluno() {
    [...]
  }
  [...]
</script>

This file is included at the end of the view that uses these functions, thus:

</body>
<?php include 'Includes/funcoes_ameai.php';?>

What happens is that when I look at the source code with crtl+u the functions are all there, but when I try to execute any one, I get this error:

Uncaught Referenceerror: NOME_DA_FUNCAO is not defined [...]

The strange thing is that if I copy the function and play in the same place it is being included, inside the view (between the tags ), I can run it normally.

javascript html include

2 answers

1

Transform the file funcoes_ameai.php in an archive funcoes_ameai.js and call you in the view as follows:

<script src="/Includes/funcoes_ameai.js"></script>

The difference between the file .php and the .js for its functions is that you can remove the tags <script> of the beginning and end of the file .php and program in the entire file in language .js

  • I’ve already tried it, I’ll try it once more

  • It didn’t even work, it matters, if I access it in the source code, I can view the code and even then the error repeats

  • 1

    When viewing the source code, is the script being called before the location where its function is called? What I mean is that if during execution you try to call a js function that will be declared after, it really won’t work.

1


The problem is that you are calling the functions in the middle of the view while they are being declared after the body in another block <script>. Thus, when trying to perform the functions before, they have not yet been loaded into memory.

You can resolve this by waiting for the DOM to be loaded, calling the functions within the event DOMContentLoaded:

<script>
document.addEventListener("DOMContentLoaded", function(){
   // chame as funções aqui
});
</script>

Example with error:

<script>
funcao();
</script>

<script>
function funcao(){
   console.log("ok");
}
</script>

Example without error:

<script>
document.addEventListener("DOMContentLoaded", function(){
   funcao();
});
</script>

<script>
function funcao(){
   console.log("ok");
}
</script>

You could solve this by also loading the functions on <head> or at the beginning of <body>, without the need to use DOMContentLoaded.

Another point to see is that if you are calling functions using triggers from the element, such as onclick, for example, when using the event function DOMContentLoaded will result in the same error because the functions are within the scope of DOMContentLoaded. If this is the case, you have 2 alternatives: load the functions on head or beginning of body (there need not use DOMContentLoaded), or trade onclick for addEventListener or element.onclick, where element is the element that triggers the function.

Browser other questions tagged javascript html include

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