1

tengo el siguiente código pero no logro hacerlo funcionar.

Mi código HTML.

   <?php 
   	session_start();
   	if($_SESSION['rango']!='Administrador'){
  	    header("Location:index.php");
   	}
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form action="" method="">		
	<input type="submit" id="RevisarUsuarios" value="Verificar">
		
	  <table border="1" id="miTabla">
	     <caption>Verificar</caption>
		<thead>
		  <tr>
		     <th colspan="3">Registros Base de Datos</th>
		  </tr>
		  <tr>
		     <td>Usuarios</td>	
		     <td>Correo Electronico</td>	
		     <td>Rango</td>	
		  </tr>

		</thead>
			<tbody id="contenido">
				
			</tbody>
		</table>
	</form>
	
	<script src="js/jquery-3.2.1.min.js"></script> <!--Utilizar libreria JQUERY-->
	<script src="js/codigoadmin.js"></script> <!--TODO lo que utilize JQUERY deberá ser referenciado 										despues de la libreria.-->
</body>
</html>

Al momento de hacer click en mi botón con id #RevisarUsuarios realizo la petición al servidor al siguiente archivo PHP.

<?php

    require_once('../Modelo/class.conexion.php');
    require_once('../Modelo/class.consultas.php');

    $consultas = new Consultas();
    $datos = $consultas->cargarUsuarios();

    $results = (count($datos) > 0) ? $datos : array("error"=>"No hay opciones en la BD");
    $arrayJson = json_encode($results);
    print_r($arrayJson);

?>

Este me regresa un json_encode que posteriormente intento procesar en mi archivo JS. Que es el siguiente:

$(document).ready(function() {
    $('#RevisarUsuarios').click(function(event) {
        alert('Realizaré la petición');
        $.get('Controlador/cargarUsuarios.php', function(data) { 
            alert('Obtuve los datos');
            console.log(data);
                        $.each(data, function(idx, opt) {
                          alert('Estoy recorriendo el registro numero: ' + idx);
                  $('#mitabla contenido').append('<tr><td>' + opt.nickname + '</td><td>' + opt.email + '</td><td>' + opt.nickname + '</td></tr>');

                console.log(opt.nickname + ' ' + opt.email + ' ' + opt.rango);
        });
    }, 'json');
    });
});

Los 3 alerts se muestran correctamente. Con el ultimo console.log visualizo los datos que trae la variable data por la petición AJAX, como se muestra en la imagen, mas sin embargo no logro anexarlos a mi tabla ya intente hacerlo directamente a la tabla y al tbody de esta, pero no lo consigo.

introducir la descripción de la imagen aquí

Gracias por cualquier aportación.

14
  • Prueba cambiando $('#mitabla contenido') por $('#mitabla #contenido')
    – user34391
    el 19 sep. 2017 a las 22:55
  • Te falta un # en contenido: $('#mitabla #contenido').append ...
    – Elmer
    el 19 sep. 2017 a las 22:55
  • Ya se lo agregué sigue sin funcionar. El console log, y los alerts siguen mostrándose correctamente el 19 sep. 2017 a las 23:03
  • ¿Así $('#mitabla').append('<tr><td>' + opt.nickname + '</td><td>' + opt.email + '</td><td>' + opt.nickname + '</td></tr>'); no funciona?
    – A. Cedano
    el 19 sep. 2017 a las 23:07
  • No, ya intente hacerlo con el id de la tabla y con el id del tbody, mas sin embargo en ninguno de los 2 funciona correctamente. el 19 sep. 2017 a las 23:09

2 respuestas 2

3

Complementando tu respuesta, @antonio291093...

El error decaía por que el elemento al que estás haciendo clic es un input de tipo submit, y su comportamiento natural es enviar la información. Sin embargo, para hacerla llegar a su destino, debe de recargar el navegador a la página hacia donde tu estás haciendo la petición con el método .$get.

En otras palabras, la acción por defecto de un submit, siempre recargará el navegador y hará que pierdas el DOM actual.

Para prevenir esto, .preventDefault() de jQuery, cancela el comportamiento y/o defecto natural de un elemento. Te pongo otro ejemplo:

El comportamiento natural de un elemento <a>, es siempre dirigirte hacia una página web. Con .preventDefault(), previene ese comportamiento y no le permite al elemento realizar esa acción.

$(document).ready(function(){
  $('#conPD').click(function(e){
    e.preventDefault();
    alert('Evite su comportamiento por defecto con PreventDefault');
  });
  
  $('#sinPD').click(function(){
    alert('Este es el comportamiento por defecto del elemento');
  });
});
a{
 display:block;
 margin:25px;
}
<a href="https://es.stackoverflow.com/" target="_blank" id="conPD">Soy un link CON .PreventDefault()</a>
<a href="https://es.stackoverflow.com/" target="_blank" id="sinPD">Soy un link SIN .PreventDefault()</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p data-height="300" data-theme-id="25171" data-slug-hash="PJNMPP" data-default-tab="js,result" data-user="Hoose" data-embed-version="2" data-pen-title="Evitar comportamiento por defecto de los elementos con preventDefault()" class="codepen">See the Pen <a href="https://codepen.io/Hoose/pen/PJNMPP/">Evitar comportamiento por defecto de los elementos con preventDefault()</a> by Hoose (<a href="https://codepen.io/Hoose">@Hoose</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

EDITO: Parece que StackOverFlow en Español no permite las redirecciones hacia otras páginas. Checa mi CodePen https://codepen.io/Hoose/pen/PJNMPP

1
  • Gracias, me ayudaste a comprender la situación el ejemplo fue muy claro, pongo tu respuesta como solución al problema, por la aclaración muchas gracias. el 21 sep. 2017 a las 3:05
2

Insertando la linea:

event.preventDefault();

Después del evento click en el botón se solucionó el problema, y ya se despliegan correctamente los registros en la tabla. Espero le sea de utilidad a alguien mas.

$(document).ready(function() {

    $('#RevisarUsuarios').click(function(event) {
        event.preventDefault();
        alert('Realizaré la petición');
        $.get('Controlador/cargarUsuarios.php', function(data) { 
            alert('Obtuve los datos');
        $.each(data, function(idx, opt) {
            //alert('Estoy recorriendo el registro numero: ' + idx);
            $('#mitabla').append('<tr><td>' + opt.nickname + '</td><td>' + opt.email + '</td><td>' + opt.nickname + '</td></tr>');
            console.log(opt.nickname + ' ' + opt.email + ' ' + opt.rango);
        });
    }, 'json');
    });
});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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