ReferenceError: $ is not defined in Firefox

-1

The problem is only given to me in Firefox, I get an error: ReferenceError: $ is not defined . I have read that it may be a Firefox certificate problem, but I have not solved it.

var count=0;


$('#invitado').click(function(){
    if(count==0){
      document.getElementById('sesion_popup').style.display='block';
      document.getElementById('invitado').style.color='black';
      document.getElementById('inicio_registro').style.display='none';
      count=1;
    }else{
      document.getElementById('sesion_popup').style.display='none';
      document.getElementById('invitado').style.color='blue';
      document.getElementById('inicio_registro').style.display='flex';
      count=0;
    }
  });

  $('#sesion_usuario').click(function(){
    if(count==0){
      document.getElementById('panel_usuario_popup').style.display='block';
      document.getElementById('sesion_usuario').style.color='black';
      document.getElementById('inicio_registro').style.display='none';
      count=1;
    }else{
      document.getElementById('panel_usuario_popup').style.display='none';
      document.getElementById('sesion_usuario').style.color='blue';
      document.getElementById('inicio_registro').style.display='flex';
      count=0;
    }
  });
.usuario #sesion_popup {
    position: absolute;
    height: 205px;
    background: #fff;
    font-family: "Helvetica Neue Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
    z-index: 300;
    width: 328px;
    padding-top: 65px;
    padding-left: 39px;
    display: none;
    left: -5px;
    top: -5px;
    box-shadow: .1px .1px 2px #888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sesion">
     <a rel="nofollow" href="#" id="invitado">Invitado</a><div id="inicio_registro"><a class="iniciemos" href="https://www.laxtore.com/Iniciar-Sesion/">Iniciar Sesión</a><a href="https://www.laxtore.com/Registro/">Registrarse</a></div>

</div>

<div id="sesion_popup">
    <a href="">Login avanzado</a>
    <a href="">Registrarse</a>
    <form class="credenciales"  action="<?php echo $ruta ?>" method="post">
         <div class="inputs">
            <input type="text" name="usuario" placeholder="Usuario:">
            <input type="password" name="password" value="Contraseña:">
         </div>
         <input class="submit_login" type="submit" name="submit_login" value="►">
      </form>
</div>

EDITO: I was loading javascript this way:

'<script src="https://code.jquery.com/jquery-latest.js"  type="text/javascript" async></script>'

Removing async works everything correctly.

    
asked by JetLagFox 10.12.2017 в 16:50
source

2 answers

1

The problem I have managed to solve by modifying the way I was including the jQuery library. I was doing it like this:

<script src="https://code.jquery.com/jquery-latest.js"  type="text/javascript" async></script>

Removing the async parameter no longer gives me an error in Firefox.

    
answered by 10.12.2017 в 17:05
0

Good, most likely you are using the firefox less than 3.6 and you do not have support for the async attribute.

Definition and use

  

The async attribute is a Boolean attribute.

     

When present, it specifies that the script will run asynchronously as soon as it is available.

Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).

Note: There are several ways in which you can run an external script:

  • If async is present: the script runs asynchronously with the rest of the page (the script will run while the page continues the analysis)
  • If async is not present and the postponement is present: the script is executed when the page has finished analyzing
  • If it is not present or asynchronous or deferred: the script is searched and executed immediately, before the browser continues analyzing the page

Greetings, I hope it helps you.

Source: www.w3schools.com

    
answered by 10.12.2017 в 18:29