0

Buenas tardes,

Estoy haciendo (mejor dicho, re-haciendo) un CRUD de información y me da el error del titulo. Tengo por un lado la vista, con esto en el body:

<body onload="VerSolInfo()">

Después tengo un archivo ajax.js con esta función:

function VerSolInfo() {
    $.ajax({
        type: "GET",
        url: "../assets/webla/solicitudinfo.php",
        success: function(data){
            $('tbody').html(data);
        }
    })
}

Y un archivo solicitudinfo.php con este código:

 else {
        $solicitudes = $solicitud->getSolicitudes();
        $totalsolicitudes = count($solicitudes);
        if ($totalsolicitudes > 0){
            //foreach ($solicitudes as $solinfo){ 

            while($solinfo = $solicitudes->fetch()){
    ?>
        <tr>
            <td><?php echo $solinfo['IDSolicitud']; ?></td>
            <td><?php echo $solinfo['DiaSolicitud']; ?><br><?php echo $solinfo['HoraSolicitud']; ?></td>
            <td><?php echo $solinfo['Centro']; ?></td>
            <td><?php echo $solinfo['Nombre']; ?>  <?php echo $solinfo['Apellidos']; ?></td>
            <td><?php echo $solinfo['CursoEscolar']; ?></td>
            <td><?php echo getAge($solinfo['FechaNacimiento']); ?> años</td>
            <td><i class="fa fa-phone-square" aria-hidden="true"></i> <?php echo $solinfo['MovilContacto']; ?><br><i class="fa fa-envelope" aria-hidden="true"></i> <?php echo $solinfo['EmailContacto']; ?></td>
            <td><span class="label label-default green" style="background-color:#32C5D2;border-radius: 5px !important;">Nueva Solicitud</span></td>
            <td>
                <a class="btneliminarsolinfo btn" data-id="<?php echo $solinfo['IDSolicitud']; ?>" data-action="remove" style="background-color:#FF0206;border: 0px !important;color:white;" data-toggle="confirmation" title="¿Eliminar Solicitud?" data-singleton="true"> <i class="fa fa-trash" aria-hidden="true"></i> </a>
                <a class="btnversolinfo btn" data-id="<?php echo $solinfo['IDSolicitud']; ?>" data-action="ver" style="background-color:#1b9e1d;border: 0px !important;color:white;"> <i class="fa fa-eye" aria-hidden="true"></i> </a>
                <a class="btneditarsolinfo btn" data-id="<?php echo $solinfo['IDSolicitud']; ?>" data-action="editar" style="background-color:#5172F3;border: 0px !important;color:white;"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> </a>
                <a class="btnetiquetarsolinfo btn" data-id="<?php echo $solinfo['IDSolicitud']; ?>" data-action="etiquetar" style="background-color:#EDC30F;border: 0px !important;color:white;"> <i class="fa fa-tags" aria-hidden="true"></i> </a>
                <div id="resultado-mi-formulario"></div>
            </td>
        </tr>
    <?php   
            }
        }
    }

?>

El problema es que en la tabla no carga ningún dato y en la consola me sale el error del titulo.

¿Alguien podría decirme que estoy haciendo mal?

Errores código ajax:

function NuevaSolInfo() {     
    var data = $(this).serialize();

    $.ajax({            
        type : 'POST',
        url  : '../assets/webla/solicitudinfo.php',
        data : data,
        success :  function(data) {                 
            $("#resultado-mi-formulario").html(data).fadeIn();
            $('#nuevasolicitud').modal('hide');

        },
        complete: function(){
            setTimeout(function() {
        }, 15000);    
        }
    });         
    return false;           
}

function VerSolInfo() {
    $.ajax({
        type: "GET",
        url: "../assets/webla/solicitudinfo.php",
        success: function(data){
            $('tbody').html(data);
        }
    });
}

Me esta dando varios errores en esta parte del código y no sé que esta mal realmente, ya que yo lo veo bien. Antes funcionaba la función de NuevaSolInfo y ahora no sé que he hecho que no funciona.

En function NuevaSolInfo me sale "is defined but never used", en var data = $(this).serialize(); me dice "Missing use strict statement", en function VerSolInfo lo mismo, "is defined but never used" y en $.ajax de abajo (el de arriba no) me sale "Missing use strict statement".

Alguien sabria decirme cual es el problema?

Código para nueva solicitud

Este es el modal, con la funcion en el button submit de onclick="NuevaSolInfo()"

<form name="form" method="post" id="solicitudinfo">
<input type="hidden" name="action" value="insert"/>
<div class="title" style="margin-top:15px;margin-bottom: 15px;">
    <p>Información del Alumno</p>
</div>
<div class="row">
    <div class="col-md-6">
        <label> Centro:</label>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
          <select id="centro" name="centro" class="selectpicker form-control" data-live-search="true" >
            <option value="" selected disabled>Centro</option>
            <option value="Bormujos">Bormujos</option>
            <option value="Bollullos">Bollullos de la Mitación</option>
            <option value="Bol/Bor">Bol/Bor Pendiente de asignar</option>
            <option value="Summer School">Summer School</option>
          </select>
        </div>
    </div>
    <div class="col-md-6">
        <label> Curso:</label>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
          <select id="curso" name="curso" class="selectpicker form-control" data-live-search="true" >
            <option value="" selected disabled>Curso a Inscribir</option>
            <option value="Nursery 1">Nursery 1</option>
            <option value="Nursery 2">Nursery 2</option>
            <option value="Playway 1">Playway 1</option>
            <option value="Playway 2">Playway 2</option>
            <option value="Starters 1">Starters 1</option>
            <option value="Starters 2">Starters 2</option>
            <option value="Movers 1">Movers 1</option>
            <option value="Movers 2">Movers 2</option>
            <option value="Flyers 1">Flyers 1</option>
            <option value="Flyers 2">Flyers 2</option>
            <option value="Pre PET">Pre PET</option>
            <option value="KET">KET</option>
            <option value="PET">PET</option>
            <option value="FIRST">FIRST</option>
            <option value="CAE">CAE</option>
            <option value="CPE">CPE</option>
            <option value="Intensivo PET">Intensivo PET</option>
            <option value="Intensivo FIRST">Intensivo FIRST</option>
            <option value="Intensivo CAE">Intensivo CAE</option>
            <option value="Intensivo CPE">Intensivo CPE</option>
            <option value="Starter Adults">Starter Adults</option>
            <option value="Conversación">Conversación</option>
            <option value="Business">Business</option>
            <option value="One to one">One to one</option>
            <option value="English Support">English Support</option>
            <option value="French Support">French Support</option>
            <option value="German Support">German Support</option>
            <option value="Francés Iniciación">Francés Iniciación</option>
            <option value="Francés Primaria">Francés Primaria</option>
            <option value="Francés Secundaria">Francés Secundaria</option>
            <option value="Francés A1">Francés A1</option>
            <option value="Francés A2">Francés A2</option>
            <option value="Francés B1">Francés B1</option>
            <option value="Francés B2">Francés B2</option>
            <option value="Francés C1">Francés C1</option>
            <option value="Alemán Iniciación">Alemán Iniciación</option>
            <option value="Alemán Primaria">Alemán Primaria</option>
            <option value="Alemán Secundaria">Alemán Secundaria</option>
            <option value="Alemán A1">Alemán A1</option>
            <option value="Alemán A2">Alemán A2</option>
            <option value="Alemán B1">Alemán B1</option>
            <option value="Alemán B2">Alemán B2</option>
            <option value="Alemán C1">Alemán C1</option>
            <option value="Pendiente de Nivel">Pendiente de Nivel</option>
          </select>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label> Nombre Alumno:</label>
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></div>
                <input type="text" class="form-control" name="nombre" placeholder="Nombre"  maxlength="50">
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label> Apellidos Alumno:</label>
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></div>
                <input type="text" class="form-control" name="apellidos" placeholder="Apellidos"  maxlength="50">
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label> Fecha de Nacimiento:</label>
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></div>
                <input type="date" class="form-control" name="fechanacimiento" >
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label>Población:</label>
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-home" aria-hidden="true"></i></div>
                <input type="text" class="form-control" name="pueblo" placeholder="Población">
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label>Código Postal:</label>
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-location-arrow" aria-hidden="true"></i></div>
                <input type="number" class="form-control" name="codpostal" placeholder="Código Postal">
            </div>
        </div>
    </div>
</div>
<div class="title" style="margin-top:30px;margin-bottom: 15px;">
    <p>Información del Primer Tutor</p>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label>Nombre Tutor:</label>
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></div>
                <input type="text" class="form-control" name="nombretutor" placeholder="Nombre">
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label>Apellidos Tutor:</label>
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></div>
                <input type="text" class="form-control" name="apellidostutor" placeholder="Apellidos">
            </div>
        </div>
    </div>
</div>
<div class="title" style="margin-top:30px;margin-bottom: 15px;">
    <p>Información General</p>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label> Correo de Contacto:</label>
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-envelope" aria-hidden="true"></i></div>
                <input type="email" class="form-control" name="email" placeholder="Correo Electrónico" >
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label> Movil de Contacto:</label>
            <div class="input-group">
                <div class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></div>
                <input type="tel" class="form-control" name="movil" placeholder="Movil" >
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <label> Atendido por:</label>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
          <select id="atendido" name="atendido" class="selectpicker form-control" data-live-search="true" >
            <option value="" selected disabled>Atendido por...</option>
            <option value="Mari Carmen Puerta Clewer">Mari Carmen Puerta Clewer</option>
            <option value="Charlie Clewer">Charlie Clewer</option>
            <option value="Samantha Clewer">Samantha Clewer</option>
            <option value="Lupe Barba">Lupe Barba</option>
            <option value="Sandra Álvarez">Sandra Álvarez</option>
          </select>
        </div>
    </div>
    <div class="col-md-12">
        <div class="form-group">
          <label>Observaciones:</label>
          <textarea class="form-control" rows="5" name="observaciones" style="height: auto !important;"></textarea>
        </div>
    </div>
    <div id="resultado-mi-formulario"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
<button type="reset" class="btn btn-warning">Limpiar</button>
<button type="submit" id="btsubmit" class="btn btn-info" onClick="NuevaSolInfo()">Enviar Solicitud de Información</button>
</form>

La parte de AJAX que tengo (sin modificarla con lo nuevo que has puesto en la respuesta:

function NuevaSolInfo() {     
    var data = $(this).serialize();

    $.ajax({            
        type : 'POST',
        url  : '../assets/webla/solicitudinfo.php',
        data : data,
        success :  function(data) {
            $('#nuevasolicitud').modal('hide');
            VerSolInfo();
        },
        complete: function(){
            setTimeout(function() {
        }, 15000);    
        }
    });         
    return false;           
}

Y la parte del php que lo inserta en la BDD

if ($_POST['action'] == "insert") {
    $centro = secure($_POST['centro']);
    $curso = secure($_POST['curso']);
    $nombre = ucwords(strtolower(secure($_POST['nombre'])));
    $apellido = ucwords(strtolower(secure($_POST['apellidos'])));
    $fechanacimiento = secure($_POST['fechanacimiento']);
    $poblacion = ucwords(strtolower(secure($_POST['pueblo'])));
    $codpostal = secure($_POST['codpostal']);
    $nombretutor = ucwords(strtolower(secure($_POST['nombretutor'])));
    $apellidostutor = ucwords(strtolower(secure($_POST['apellidostutor'])));
    $email = strtolower(secure($_POST['email']));
    $movil = secure($_POST['movil']);
    $conocen = "Not Answered";
    $atendido = secure($_POST['atendido']);
    $observaciones = ucfirst(strtolower(secure($_POST['observaciones'])));
    $dia = date("d") . "/" . date("m") . "/" . date("Y");
    $hora = date("G") . ":" . date("i") . ":" . date("s");

    $solicitud->addSolicitud($dia, $hora, $centro, $curso, $nombre, $apellido, $fechanacimiento, $poblacion, $codpostal, $nombretutor, $apellidostutor, $email, $movil, $conocen, $observaciones, $atendido);

    if ($solicitud == true) {
        echo "<script>swal('Confirmación', 'Se ha añadido la nueva solicitud.', 'success')</script>";
    } else {
        echo "<script>swal('Error', 'Ha ocurrido un problema al enviar la solicitud de información. Inténtelo de nuevo o llame al 902 024 890.', 'error')</script>";
    }
}
8
  • He probado usando la función con document.ready() pero tampoco me funciona. Sigue apareciendo el error, que esa función no esta definida. El archivo donde esta, ajax.js, esta insertado en el head.
    – Charlie
    el 5 oct. 2017 a las 16:52
  • Usa un setTimeout para llamar la función. Revisa además si la URL del script es correcta, ¿usas una URL relativa o absoluta? el 5 oct. 2017 a las 16:55
  • ¿Donde pondría el setTimeout? y la ruta es absoluta
    – Charlie
    el 5 oct. 2017 a las 16:58
  • Ejemplo: $(document).ready(function() { setTimeout(VerSolInfo, 2000); });; el 5 oct. 2017 a las 17:00
  • Que va, así sigue sin funcionar
    – Charlie
    el 5 oct. 2017 a las 17:01

1 respuesta 1

0

Sería algo así, fijate en los comentarios.

$(document).ready(function(){
  //VerSolInfo();
  
  var $form = $('#form');
  
  $form.on('submit', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    var datosDelFormulario = $(this).serialize();
    
    console.log(datosDelFormulario);
    
    return false; // para que no se recargue la página
  });
  
  
});

function VerSolInfo() {

  $.ajax({
    url:'/solicitudes'
  }).done(function(response){
    $('#tBody').html(response);
  })
  .fail(function(error) {
    console.log(error);
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Esto sería sin jQuery --->
<script>
function myFunc() {
	alert("asdasd");
}
</script>



<body onload="myFunc()"></body>

<!-- Con jQuery no haría falta onload=myFunc()-->

<!--Con jquery tendrías tú tabla -->

<table>
  <tbody id="tBody"></tbody>
</table>

<form id="form">
  <input name="nombre">
  <button>Insertar</button>
</form>

11
  • Lo de this.serialize() no te va a funcionar
    – Thakur
    el 5 oct. 2017 a las 18:54
  • Elimino los comentarios anteriores y corrijo: Ya me muestra todos los datos, lo que ahora pasa es que no me deja insertar un nuevo dato cuando antes si funcionaba. ¿Podrías echarle un vistazo al código de arriba que he añadido nuevo en la pregunta?
    – Charlie
    el 5 oct. 2017 a las 18:54
  • Pero si antes this.serialize(); funcionaba, ¿Por qué ahora no?
    – Charlie
    el 5 oct. 2017 a las 18:55
  • Voy a editar mi respuesta.
    – Thakur
    el 5 oct. 2017 a las 18:57
  • Ya está editado
    – Thakur
    el 5 oct. 2017 a las 19:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.