Problema al cargar table con ajax

[Pablo00000]

buenas tardes, disculpen la molestia.

en mi proyecto uso las siguientes librerias: jQuery y Bootstrap y mi problema es al siguiente:

Código HTML:

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                   <tr>
                      <th>Nº</th>
                      <th hidden="true">Id</th>
                      <th>Carácter</th>
                      <th>Estado</th>
                   </tr>
                </thead>
                <tbody>
                    <div id="resultado"></div>
                </tbody>
            </table> 

codigo ajax, donde mando a llamar la funcion e inserto en el html:

Código:

$(document).ready()
    $(function() {
        $.ajax({
            url: '../model/tipo_rif.php',
            data: {funcion: 'cambiarStatus'},
            type: 'POST',
            success: function(data) {
                $("#resultado").html(data);
                alert(data);
            },
            error: function(){
                alert('Error!');
            }
        });
    });

en el div resultado cargo desde Ajax, cuando se carga la pantalla.. el problema es q cuando lo cargo me aparece fuera del <table>

Código PHP:

  <?php 
    require '../model/conexion.php'; 
 
    if(isset($_POST['funcion']) && !empty($_POST['funcion'])) { 
        $funcion = $_POST['funcion']; 
        switch($funcion) { 
            case 'cambiarStatus' : test();break; 
            case 'blah' : blah();break; 
            // ...etc... 
        } 
    }; 
     
    function test(){ 
                        $pdo = conexion::connect();  
                        $sql = "SELECT  
                                id,  
                                caracter,  
                                CASE  
                                WHEN status='t' THEN 'activo' 
                                WHEN status='f' THEN 'inactivo' 
                                ELSE 'error' 
                                END AS status 
 
                                FROM tipos_rif ORDER BY caracter"; 
                        $con = 1; 
                        foreach ($pdo->query($sql) as $row) { 
                    ?> 
                    <tr> 
                        <td><?php echo $con; ?></td> 
                        <td hidden="true"><?php echo $row['id']; ?></td> 
                        <td><?php echo $row['caracter']; ?></td> 
                        <td><input type="checkbox" data-toggle="toggle" onchange="CambiarStatus(<?php echo $row['id']; ?>)" data-on="Activado" data-off="Desactivado"<?php if($row['status']=="activo"){ ?> checked><label hidden="true">a</label><?php }else{ ?>><label hidden="true">b</label><?php } ?></td> 
                    </tr> 
                    <?php 
                        $con++; 
                        } 
                        conexion::disconnect(); 
    }   

y corrobo en un alert q me imprima lo q deseo mando a colocar en el html.. y es correcto..



abre y cierra las filas y las columnas.. no veo el error de xq se salga del <table>

de antemano gracias

[Alexis88]

Y es que es algo evidente. El <div> no es un elemento que forme parte de la estructura del <tbody>, por eso es que lo excluye. Sería mejor si cargaras la información directamente en el <tbody>.

Un saludo

[Pablo00000]

ok tenias razon, gracias :3 crei q funcionaba sustituyendo ese codigo el cual contenia el id. pero no me funciona del todo.

Código HTML:

<table id="cargaTabla" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                   <tr>
                      <th>Nº</th>
                      <th hidden="true">Id</th>
                      <th>Carácter</th>
                      <th>Estado</th>
                   </tr>
                </thead>
                <tbody id="resultado">
                </tbody>
            </table> 

Código PHP:

  <?php
    require '../model/conexion.php';

    if(isset($_POST['funcion']) && !empty($_POST['funcion'])) {
        $funcion = $_POST['funcion'];
        switch($funcion) {
            case 'cargarTabla' : cargarTabla();break;
            case 'blah' : blah();break;
            // ...etc...
        }
    };
    
    function cargarTabla(){
                        $pdo = conexion::connect(); 
                        $sql = "SELECT 
                                id, 
                                caracter, 
                                CASE 
                                WHEN status='t' THEN 'activo'
                                WHEN status='f' THEN 'inactivo'
                                ELSE 'error'
                                END AS status

                                FROM tipos_rif ORDER BY caracter";
                        $con = 1;
                        foreach ($pdo->query($sql) as $row) {
?>
                    <tr>
                        <td><?php echo $con; ?></td>
                        <td hidden="true"><?php echo $row['id']; ?></td>
                        <td><?php echo $row['caracter']; ?></td>
                        <td><input type="checkbox" data-toggle="toggle" onchange="CambiarStatus(<?php echo $row['id']; ?>)" data-on="Activado" data-off="Desactivado" 
                        <?php if($row['status']=="activo"){ ?>
                            checked><label hidden="true">a</label>
                        <?php }else{ ?>
                            ><label hidden="true">b</label>
                        <?php } ?>
                        </td>
                    </tr>
<?php
                        $con++;
                        }
                        conexion::disconnect();
    }
?>   

la tabla no me carga la libreria datatable q estoy usando.. y unos efectos al checkbox.. como sino escuchara el js y el css de bootstrap.. no se si me hace falta llamar algunas cosas.. y donde las debo llamar..

[Alexis88]

Recuerda que estás trabajando con elementos dinámicos, por lo que si los estás tratando como elementos fijos, no va a funcionar.

Solo por si acaso, lee acerca de la delegación de eventos. Es lo que se usa cuando se trabaja con elementos cargados dinámicamente.

Un saludo

[Pablo00000]

estuve investigando mas acerca del trabajo de ajax y su funcionamiento dinamico

el resultado q ahora me arroja es este:



y no entiendo por que?

codigo html:

Código HTML:

<table id="cargaTabla" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                   <tr>
                      <th>Nº</th>
                      <th hidden="true">Id</th>
                      <th>Carácter</th>
                      <th>Estado</th>
                   </tr>
                </thead>
                <tbody class="Datos">
                </tbody>
            </table> 

codigo ajax:

Código:

$(document).ready(function() {
    cargarTabla();
});

function cargarTabla(){
    $.ajax({
        url: '../controller/tipo_rif.php',
        dataType: 'json',
        type: 'POST',
        data: {
            'accion': 'cargarTabla' 
        },
        success: function (data) {
            $.each(data, function(index){
                var etiqueta;
                if($(data[index].status).text('activo')){
                    etiqueta = "<input type='checkbox' data-toggle='toggle' onchange='CambiarStatus("+data[index].id+")' data-on='Activado' data-off='Desactivado' checked><label hidden='true'>a</label>";
                }else if($(data[index].status).text('inactivo')){
                    etiqueta = "<input type='checkbox' data-toggle='toggle' onchange='CambiarStatus("+data[index].id+")' data-on='Activado' data-off='Desactivado'><label hidden='true'>b</label>";
                }
                $(".Datos").append("\
                    <tr>\n\
                        <td>"+data[index].cont+"</td>\n\
                        <td hidden='true'>"+data[index].id+"</td>\n\
                        <td>"+data[index].caracter+"</td>\n\
                        <td>"+etiqueta+"</td>\n\
                    </tr>\n\
                ");
            });
        }
    });
}

codigo php:

Código PHP:

  <?php 
include("../model/conexion.php"); 
 
if($_POST["accion"]=="cargarTabla"){ 
    cargarTabla(); 
} 
 
function cargarTabla(){ 
    $pdo = conexion::connect();  
    $sql = "SELECT  
            id,  
            caracter,  
            CASE  
            WHEN status='t' THEN 'activo' 
            WHEN status='f' THEN 'inactivo' 
            ELSE 'error' 
            END AS status 
 
            FROM tipos_rif ORDER BY caracter"; 
    $cont=0; 
    foreach ($pdo->query($sql) as $row) { 
        $cont++; 
        $datos[] = array('cont'=>$cont,'id'=>$row['id'],'caracter'=>$row['caracter'],'status'=>$row['status']); 
    } 
    conexion::disconnect(); 
    header('Content-type: application/json'); 
    echo json_encode($datos); 
}   

disculpen mi ignorancia pero ya no se q hacer! y me urge