$ is not defined in JQuery

Question

Let me show you all, i put this code in a file called consultas.php

CONSULTAS.PHP

This file shows the table with data, at the end of column called folio id="'.$row["folio"].'" when i clicked there this shows me and towards to VISTAPREVIA.PHP for more data about this folio but in paging #1 it works very well and now when i'm going to paging #2 i clicked again and doesn't work because doesn't show me anything, the error says me: Uncaught ReferenceError: $ is not defined

<script type="text/javascript">     
        $(document).ready(function() {
            var table = $('#registros').DataTable({
                "paging": true                
            });
            //new $.fn.dataTable.AutoFill( table );
            $('.back').on("click", function(event)
            {            
                event.preventDefault();            
                location.reload();
            });

            $('.modificar').on("click", function(event)
            {            
                event.preventDefault();            
                //Cargamos el contenido del enlace
                var f = $(this).attr('id');
                $('#mainContainer').load(this.href, {folio: f}, function(){                     
                });
            });
            $('.vistaprevia').on("click", function(event)
            {            
                event.preventDefault();            
                //Cargamos el contenido del enlace
                var f = $(this).attr('id');
                $('#mainContainer').load(this.href, {folio: f}, function(){                     
                });
            });
            $('.detalle').on("click", function(event)
            {            
                event.preventDefault();
                var f = $(this).attr('id');
                $('<div></div>').load(this.href, {folio: f}).modal();                            
                
            });
        });
    </script>
<a href="#" class="back">REGRESAR ATRÁS</a>
<h1 class="titPer">CONSULTA DE LA TABLA</h1>
<div class="tabla">
    <table id="registros" class="display" cellspacing="0">
        <thead>
            <tr>
                <th>Folio</th>
                <th>Estatus</th>
                <th>Punto de Venta</th>
                <th>Usuario</th>
                <th>Acciones</th>            
            </tr>
        </thead>        
        <tbody>
            <?php
                while ($row = mysql_fetch_array($consulta)) {
            ?>
                <tr>                            
                    <td><?=$row['folio']?></td>                
                    <td><?=$row['estatus']?></td>                
                    <td><?=$row['punto_venta']?></td>
                    <td><?=$row['usuario']?></td>
                    <td>
                        <?php
                            if($_SESSION['permisos'] == 'VENDEDOR' || $_SESSION['permisos'] == 'JEFESUC' || $_SESSION['permisos'] == 'EMBARQUES'){
                                echo '
                                    <center>
                                        <a class="modificar icon-pencil" href="includes/vistaPrevia.php" id="'.$row["folio"].'"></a>
                                         | 
                                        <a class="detalle icon-eye-plus" href="includes/lightbox.php" id="'.$row["folio"].'"></a>
                                    </center>
                                ';                                
                            }else{
                                echo'
                                    <center>                                    
                                        <a class="vistaprevia icon-eye-plus" href="includes/vistaPrevia.php" id="'.$row["folio"].'"></a>
                                    </center>
                                ';
                            }
                        ?>                        
                    </td>
                </tr>
            <?php
                }
            ?>
        </tbody>
    </table>                 
</div>

VISTAPREVIA.PHP

<?php session_start(); ?>
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>

</head>
<a href="includes/consultas.php" class="back">REGRESAR ATRÁS</a>
<h1 class="titPer">ACTUALIZACIÓN DE DATOS</h1>
<!-- <form action="includes/"></form> -->
<?php
    if($_SESSION['permisos'] == 'CALIDAD'){
        include('upRegCal.php');
    }
?>

<form action="includes/edit.php" enctype="multipart/form-data" id="formAct" method="POST" name="enviarForm">
    <?php
        if($_SESSION['permisos'] == 'VENDEDOR' || $_SESSION['permisos'] == 'JEFESUC' || $_SESSION['permisos'] == 'EMBARQUES'){
            include('upRegUser.php');
        }

        if($_SESSION['permisos'] == 'ADMINISTRADOR'){
            //include('upRegCal.php');
            echo "Hola Administrador";
        }
    ?>    
</form>

last

INDEX.PHP
i have to assure this part because i put the correct Jquery scripts but i don't know why and i couldn't find the problem and yes i use the Datables Scripts

<?php
    session_start();     
?>
<!DOCTYPE html>
<html>
    <head>  
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
        <title>Bienvenido</title>
        <script src="js/jquery-1.11.2.js"></script>     
        <script src="js/funciones.js"></script>
        <script src="libs/datatables/media/js/jquery.dataTables.js"></script>
        <script src="libs/datatables/extensions/AutoFill/js/dataTables.autoFill.js"></script>

        <script type='text/javascript' src='js/jquery.simplemodal.js'></script>
        <script type='text/javascript' src='js/basic.js'></script>

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400,600,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/normalize.css" type="text/css"/>    
        <link rel="stylesheet" href="css/estilos.css" type="text/css"/>     
        <link rel="stylesheet" href="css/estilosForm.css" type="text/css"/>
        <link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />       
   
        <link rel="stylesheet" href="libs/datatables/media/css/jquery.dataTables.css" type="text/css"/>
        <link rel="stylesheet" href="libs/datatables/extensions/AutoFill/css/dataTables.autoFill.css" type="text/css"/>     
        
    </head>
     
    <body>
        <div class="fondoHeader"></div>
        <header class="shadow">
            <nav>       
                <?php                               
                if(isset($_SESSION['usuario']))
                    include('includes/btnSiSession.php');                   
                else
                    include('includes/btnNoSession.php');                   
                ?>              
            </nav>          
        </header>       
        <div id='mainContainer'>        
            <?php                           
                include('includes/bienvenido.php');             
        
                if(isset($_SESSION['usuario'])){
                    echo "<script language='JavaScript'>"; 
                    // echo "document.getElementById('login').style.display='none'"; 
                    echo "document.getElementById('login').style.visibility='hidden'"; 
                    echo "</script>";
                }
                else{
                    echo "<script language='JavaScript'>"; 
                    // echo "document.getElementById('login').style.display='block'"; 
                    echo "document.getElementById('login').style.visibility='visible'"; 
                    echo "</script>";
                }
            ?>
        </div>
        <div class="clear"></div>
        <footer> 
            <?php
                include('includes/footer.php');
            ?>    
        </footer>
    </body>
</html>

UPDATE i put this code jQuery CDN script

<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">     
        $(document).ready(function() {
            var table = $('#registros').DataTable({
                "paging": true                
            });
            //new $.fn.dataTable.AutoFill( table );
            $('.back').on("click", function(event)
            {            
                event.preventDefault();            
                location.reload();
            });

            $('.modificar').on("click", function(event)
            {            
                event.preventDefault();            
                //Cargamos el contenido del enlace
                var f = $(this).attr('id');
                $('#mainContainer').load(this.href, {folio: f}, function(){                     
                });
            });
            $('.vistaprevia').on("click", function(event)
            {            
                event.preventDefault();            
                //Cargamos el contenido del enlace
                var f = $(this).attr('id');
                $('#mainContainer').load(this.href, {folio: f}, function(){                     
                });
            });
            $('.detalle').on("click", function(event)
            {            
                event.preventDefault();
                var f = $(this).attr('id');
                $('<div></div>').load(this.href, {folio: f}).modal();                            
                
            });
        });
    </script>

Include jQuery before calling jQuery functions and include it everywhere. — Andrei, Jul 03 '15 at 16:37
I did that, but doesn't work too @Pointy because show me the same problem "not defined" — Arturo Zamarripa Bringas, Jul 03 '15 at 17:21
@Andrew i include too as you say but doesn't work too like same the problem — Arturo Zamarripa Bringas, Jul 03 '15 at 17:21
@michael yes i think same as you but i had to rewrite the jQuery in only script because i had duplicates jQuery and even so doesn't work — Arturo Zamarripa Bringas, Jul 03 '15 at 17:21

Léni · Answer 1 · 2015-07-03T16:53:05.763

2

In consultas.php, you must include JQuery (<script src="js/jquery-1.11.2.js"></script>) before using it, before your <script>.

In web, each page is different, then you must add jQuery in each one.

example

<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">     
        $(document).ready(function() {
        /* ... */
        });
</script>

edited Jul 03 '15 at 16:53

answered Jul 03 '15 at 16:47

Léni

51
4

score 0 · Answer 2 · answered Jul 03 '15 at 16:51

0

In some cases you have to use jQuery instead of $.

2nd option: jQuery(document).ready(function($) {

After this you can use $ as synonym for jquery.

answered Jul 03 '15 at 16:51

radscheit

352
4
22

This is the solution that also worked by me always! – Jul 03 '15 at 16:58

score 0 · Answer 3 · answered Jul 03 '15 at 16:57

0

This error is because you're missing the JQuery library. If you are including your Javascript libraries(including JQuery) at the bottom of your page(footer), you can either

Include the JQuery library at the top of the page

OR

make your Javascripts functions into a common js file and include it at the footer just below the Jquery include.

Here is the link to Jquery CDN

answered Jul 03 '15 at 16:57

ash__939

1,614
2
12
21

i put the jQuery CDN scripts, but it shows this error "Uncaught TypeError: Cannot use 'in' operator to search for 'length' in", even if include the jQuery Library at the top of the page, because the version 1.11.2 it works! instead 1.11.3 – Arturo Zamarripa Bringas Jul 03 '15 at 17:26
Post the erroneous Javascript here. You can click on the error message (if you're seeing it in the developer tools console) to see what is the cause of the error. – ash__939 Jul 03 '15 at 17:35
Uncaught ReferenceError: $ is not defined(anonymous function) @ vistaPrevia.php:34 – Arturo Zamarripa Bringas Jul 03 '15 at 18:02
Put your jQuery CDN script. This error will be resolved. Then you have posted something about "Uncaught TypeError: Cannot use 'in' operator..." in your previous comment. Post more details about that – ash__939 Jul 03 '15 at 18:05
[link]http://prntscr.com/7ofmgk here is the caption about this problem – Arturo Zamarripa Bringas Jul 03 '15 at 18:13
;-p Can you please post your source code? At least the JS? – ash__939 Jul 03 '15 at 18:21
sorry for the late, i posted my source code including jQuery CDN Script – Arturo Zamarripa Bringas Jul 03 '15 at 18:59

$ is not defined in JQuery

3 Answers3

example

Linked