Requiring a file makes ajax not work

Question

Requiring a file makes ajax not work

Navigation

#1 by (1 votes)

1

At the moment I am doing a dynamic table with ajax and everything works fine .. until I enter a label <?php require("nav.php"); ?> in a div, this file is a generic menu; Suddenly the error appears in the firefox console:

TypeError: $.ajax is not a function

and the table disappears.

Inventory file.php:

<?php 
    session_start();
        require("conexion.php");
        $permiso = $_SESSION['u_tipo'];
        $id_usuario = $_SESSION['id_usuario'];
        if($_SESSION['logged']=='yes')
        { 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

    <script type="text/javascript"> 

     $(document).ready(function(){

            function obtener_datos(){
                $.ajax({
                    url: 'mostrar_inventario.php',
                    method: 'POST',
                    data: {permiso: '<?php echo $permiso; ?>'},
                    success: function(data){
                        $('#result').html(data)
                    }
                })
            }

            obtener_datos();

        $(document).on('click','#add',function(){

            var serial = $('#serial_add').text();
            var color = $('#color_add').text();
            var marca = $('#marca_add').text();
            var tipo = $('#tipo_add').text();
            var costo = $('#costo_add').text();
            var estado = $('#estado_add').text();

            $.ajax({
                url: 'insertar.php',
                method: 'POST',
                data: {serial: serial, color: color, marca: marca, tipo: tipo, costo: costo, estado: estado},
                success: function(data){
                    obtener_datos();
                }
            })
        })


        function actualizar_datos(id, texto, columna){
            $.ajax({
                url: 'actualizar.php',
                method: 'POST',
                data: {id: id, texto: texto, columna: columna},
                success: function(data){
                    obtener_datos();
                }
            })
        }

        $(document).on('blur','#nombre_usuario',function(){
            var id = $(this).data('id_usuario');

            var nombre = $(this).text();

            actualizar_datos(id, nombre, 'nombre_users');

        })

        $(document).on('blur','#apellido_usuario',function(){
            var id = $(this).data('id_apellido');

            var apellido = $(this).text();

            actualizar_datos(id, apellido, 'apellido_users');

        })

        $(document).on('click','#Eliminar',function(){

            var id = $(this).data('id_eliminar');
            $.ajax({
                url: 'eliminar.php',
                method: "POST",
                data: {id: id},
                success: function(data){
                    obtener_datos();
                }

            })
        })

     });

    </script>

</head>
<body>
<div>
    <?php 
    require("nav.php");
    ?>
</div>
    <div id="container">
        <div id="result"></div>
    </div>
</body>
<?php
}
else{
    header("location:../index.php");
}
?>
</html>

Archivo nav.php:

<!DOCTYPE html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="scss/estilos.scss">

  </head>
  <body>
    <section class="bienvenidos">
      <header class="encabezado">
        <div class="container float-right">
          <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">
              <p id="tipo">#tipodeusuario</p>
            </a>
          <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul class="navbar-nav mr-auto mt-2 mt-md-0">
              <li id="li_perfil" class="nav-item">
                <a class="nav-link" href="perfil.php">
                  <i class="fa fa-id-badge" aria-hidden="true"></i> &nbsp&nbspPerfil 
                </a>
              </li>
              <li id="li_inventario" class="nav-item">
                <a class="nav-link" href="inventario.php"> 
                <i class="fa fa-bicycle" aria-hidden="true"></i> &nbsp&nbspInventario
                </a>
              </li>
              <li id="li_perdidas" class="nav-item">
                <a class="nav-link" href="c_perdidas.php">
                <i class="fa fa-chain-broken" aria-hidden="true"></i> &nbsp&nbspCiclas perdidas
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="salir.php"> 
                <i class="fa fa-user-times" aria-hidden="true"></i> &nbsp&nbspSalir
                </a>
              </li>
            </ul>
          </div>
          </nav>
        </div>
      </header>
    </section>
    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

What can I do?

javascript html php ajax required

asked by DianaDiana 27.06.2017 в 17:18

source

1 answer

Problem with SQL Server queries Forum limit of votes by post PHP

score 1 · Answer 1

I'll tell you some things about your code:

From jQuery 3 this function becomes obsolete. And it is, I think, the most used in jQuery:

 $(document).ready(function(){
   ...

You can go substituting for this one:

     $(function() { ...

See the jQuery documentation , and the Important Note from this answer here in Stackoverflow .

The error message: TypeError: $.ajax is not a function clearly indicates that there is a problem with your calls to ajax via jQuery. Which could be because:

a. The jQuery library is not included when making the call to Ajax. In that sense I would review this:

Do you really have your jQuery library in a local folder called js ? Check that it is correct or include the official library, using the jQuery own cdn. For what do you want to have a local a bookstore that you can include without problem from its origin?:

<script   src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

The problem of nav.php : If nav.php is only part that should be included in another document, why do you create nav.php as if it were an independent document, with its DOCTYPE , its labels <head> , <body> , inclusion again of certain libraries , etc. When you include or require nav.php in another document you will have a lot of duplicate things.

In particular, I would end my calls to $ajax by semicolons. For example here:

     $.ajax({
                url: 'mostrar_inventario.php',
                method: 'POST',
                data: {permiso: '<?php echo $permiso; ?>'},
                success: function(data){
                    $('#result').html(data)
                }
            });