1

Quiero mostrar en mi página datos que obtengo de la BD (MySQL) a través de Ajax. En mi vista tengo 3 select de los cuáles obtendrán la información para la consulta y un botón que realiza la acción. Sin embargo, cuando presiono el botón, no me pinta nada en la tabla que quiero llenar. Pero cuando arrojo un console.log si veo los datos, ordenados como un array de objetos. No me arroja errores como tal, pero no me muestra la información en la vista.

Mi código javascript es el siguiente:

$(document).ready(function() {
        $('#searchData').click(function() {
            var url = "<?php echo base_url('index.php/Dashboard_admin/search_report') ?>";
            var id_compania = document.getElementById('id_compania').value;
            var id_activity = document.getElementById('id_activity').value;
            var month_ = document.getElementById('month_').value;
            $.ajax({
                url: url,
                type: "POST",
                data: {
                    'id_compania': id_compania,
                    'id_activity': id_activity,
                    'month_': month_
                },
                dataType: "JSON",
                success: function(data) {
                    console.log(data);
                    var html = '';
                    var i;
                    for (i = 0; i < data.length; i++) {
                        html += '<tr>' +
                            '<td>' + data[i].dttime + '</td>' +
                            '<td>' + data[i].amount + '</td>' +
                            '<td>' + data[i].description + '</td>' +
                            '<td>' + data[i].frequency + '</td>' +
                            '<td>' + data[i].Month_pay + '</td>' +
                            '<td>' + data[i].Year_pay + '</td>' +
                            '<td>' + data[i].dttime_pay + '</td>' +
                            '</tr>';
                    }
                    $('#datos').html(html);
                }
            });
        })
    })

Mi conocimiento en ajax es bastante poco, por lo que hasta donde he llegado ha sido gracias a muchas dudas que he solucionado con preguntas de acá.

Este es el código de la vista:

<div class="row">
                    <div class="col">
                        <label>Company: </label>
                        <select id="id_compania" name="id_compania" class="form-control">
                            <option value="">-SELECT-</option>
                            <?php
                                for ($i = 0; $i < count($compania_list); $i++) {
                                    echo '<option value="'.$compania_list[$i]->id_compania.'">'.$compania_list[$i]->nombrec.'</option>';
                                }
                            ?>
                        </select>
                    </div>
                    <div class="col">
                        <label>Activities: </label>
                        <select id="id_activity" name="id_activity" class="form-control">
                            <option value="">-SELECT-</option>
                            <?php
                                for ($i = 0; $i < count($activity_list); $i++) {
                                    echo '<option value="'.$activity_list[$i]->id_activity.'">'.$activity_list[$i]->activities.'</option>';
                                }
                            ?>
                        </select>
                    </div>
                    <div class="col">
                        <label>Month: </label>
                        <select id="month_" name="month_" class="form-control">
                            <option value="">-SELECT-</option>
                            <option value="1">January</option>
                            <option value="2">February</option>
                            <option value="3">March</option>
                            <option value="4">April</option>
                            <option value="5">May</option>
                            <option value="6">June</option>
                            <option value="7">July</option>
                            <option value="8">August</option>
                            <option value="9">September</option>
                            <option value="10">October</option>
                            <option value="11">November</option>
                            <option value="12">December</option>
                        </select>
                    </div>
                    <div class="col">
                        <center>
                        <button type="submit" class="btn btn-success" id="searchData">Search</button>
                        </center>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <table class="stripe hover multiple-select-row data-table-export nowrap">
                        <thead>
                            <tr>
                                <th class="table-plus datatable-nosort">Date</th>
                                <th class="table-plus datatable-nosort">Amount</th>
                                <th class="table-plus datatable-nosort">Description</th>
                                <th class="table-plus datatable-nosort">Frequency</th>
                                <th class="table-plus datatable-nosort">Month</th>
                                <th class="table-plus datatable-nosort">Year</th>
                                <th class="table-plus datatable-nosort">Datetime Pay</th>
                            </tr>
                        </thead>
                        <tbody id='datos'>
                        </tbody>
                    </table>
                </div>

Incluso adjunto una imagen de como se ve en mi página. Yo asumo que mi controlador y mi modelo están bien, pues si me hace la consulta a la base de datos y me arroja la información correcta en el console.log, pero no me pinta la tabla.

introducir la descripción de la imagen aquí

Edición:

Anexo la función de mi controlador y la de mi modelo, estoy trabajando con CodeIgniter 3.

Controlador:

Esta función me sirve para cargar la vista y llenar los select con datos

public function show_report() {
    if ( $this->admin->logged_id() ) {
        $data['compania_list'] = $this->admin->get_compania_list_admin(); 
        $data['activity_list'] = $this->admin->get_activity_list();
        $this->load->view("reports", $data);
    } else {
        redirect("login_admin");
    }
}//fin show_report

Y esta otra función es la que hace el trabajo de consultar al modelo

public function search_report() {
    $id_compania = $this->input->post('id_compania');
    $id_activity = $this->input->post('id_activity');
    $month_ = $this->input->post('month_');
    $data['search'] = $this->admin->search_report($id_compania, $id_activity, $month_);
    echo json_encode($data);
    //$this->load->view("reports", $data);
}

Y mi modelo es el siguiente:

function search_report($id_compania, $id_activity, $month_) {
    $this->db->select("DATE_FORMAT(datetime, '%m/%d/%y') AS dttime, amount, description, frequency, Month_pay, Year_pay, DATE_FORMAT(datetime_pay, '%m/%d/%y') AS dttime_pay");
    $this->db->from('payment_reports');
    $this->db->join('compania', 'compania.id_compania = payment_reports.id_compania');
    $this->db->join('activities', 'activities.id_activity = payment_reports.id_activity');
    $this->db->where('payment_reports.id_compania=',$id_compania);
    $this->db->where('activities.id_activity=', $id_activity);
    $this->db->where('MONTH(datetime)=', $month_);
    $this->db->where('YEAR(datetime) = YEAR(NOW())');
    $query = $this->db->get();
    return $query->result();
}

Edición 2:

Así se ve la página antes de presionar el botón, la imagen que subí anteriormente es como se ve después de que se presiona:

introducir la descripción de la imagen aquí

Edición 3:

Edito nuevamente mi pregunta esperando que pueda verla alguien, sigo sin solucionar mi problema y todo lo que podría indicar para solucionar el error, no me resulta. Lo último que se me ocurre es que no hay compatibilidad con la versión de CodeIgniter con la que estoy trabajando (que es 3, con PHP 7.4.25 de mi hosting).

Edición 4:

Ya conseguí que los select me den la información nueva sin necesidad de recargar la página y era añadir al ajax la opción async: true y quiero compartirlo por si da el caso que alguien más lo necesita.

En mi mismo código agregué esa pequeña línea y ahora cada que cambia el valor de uno de mis select, me vuelve a recibir la información de los 3. Sin embargo, no me imprime nada en la tabla aún, solo en la consola.

$(document).ready(function() {
    $('#searchData').click(function() {
        var url = "<?php echo base_url('index.php/Dashboard_admin/search_report') ?>";
        var id_compania = document.getElementById('id_compania').value;
        var id_activity = document.getElementById('id_activity').value;
        var month_ = document.getElementById('month_').value;
        $.ajax({
            url: url,
            type: "POST",
        async: true,
            data: {
                'id_compania': id_compania,
                'id_activity': id_activity,
                'month_': month_
            },
            dataType: "JSON",
            success: function(data) {
                console.log(data);
                var html = '';
                var i;
                for (i = 0; i < data.length; i++) {
                    html += '<tr>' +
                        '<td>' + data[i].dttime + '</td>' +
                        '<td>' + data[i].amount + '</td>' +
                        '<td>' + data[i].description + '</td>' +
                        '<td>' + data[i].frequency + '</td>' +
                        '<td>' + data[i].Month_pay + '</td>' +
                        '<td>' + data[i].Year_pay + '</td>' +
                        '<td>' + data[i].dttime_pay + '</td>' +
                        '</tr>';
                }
                $('#datos').html(html);
            }
        });
    })

Pero con el resto de la problemática, sigo igual.

8
  • Ya verificaste que tu petición cae en el succes?. En el data de Ajax el nombre del los parámetros a enviar no llevan comillas simples. el 14 jul. 2022 a las 14:59
  • Si llega al success, puesto que si me imprime los datos en el console.log, apenas me estoy metiendo a Ajax y hay muchas cosas que desconozco aún el 14 jul. 2022 a las 15:06
  • Omite lo del onChange, pensé que era pintar la data en select anidados el 14 jul. 2022 a las 15:07
  • Ya verificaste que tu variable html realmente se llena?, si recibes una respuesta, ahora verifica que al tratarlos en el for realmente lo haga. el 14 jul. 2022 a las 15:10
  • Ya lo revisé y no, no se llena la variable html. Tengo que convertir lo que obtiene del "data" para que lo pueda almacenar? Ahí está mi error por lo visto jeje el 14 jul. 2022 a las 15:15

1 respuesta 1

0

La función Ajax necesita analizar la cadena como JSon, ejemplo:

$(document).ready(function() {
  $('#searchData').click(function() {
    var url = "<?php echo base_url('index.php/Dashboard_admin/search_report') ?>";
    var id_compania = document.getElementById('id_compania').value;
    var id_activity = document.getElementById('id_activity').value;
    var month_ = document.getElementById('month_').value;
    $.ajax({
      url: url,
      type: "POST",
      data: {
        id_compania: id_compania,
        id_activity: id_activity,
        month_: month_
      },
      dataType: "json",
      success: function(data) {
        console.log(data);
        var html = '';
        var i;
        for (i = 0; i < data.length; i++) {
          html += '<tr>' +
            '<td>' + data[i].dttime + '</td>' +
            '<td>' + data[i].amount + '</td>' +
            '<td>' + data[i].description + '</td>' +
            '<td>' + data[i].frequency + '</td>' +
            '<td>' + data[i].Month_pay + '</td>' +
            '<td>' + data[i].Year_pay + '</td>' +
            '<td>' + data[i].dttime_pay + '</td>' +
            '</tr>';
        }
        $('#datos').html(html);
      }
    });
  })
})

Intenta hacerlo así y me dices si te funciono, comprueba de nuevo tu variable HTML.

9
  • Me arroja un error, de hecho así lo estuve intentando hacer y por lo mismo que me arrojaba el error lo quité de mi código. este es el error que me muestra: Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) at Object.success (show_report:329:24) at i (script.js:2:28017) at Object.fireWith [as resolveWith] (script.js:2:28783) at A (script.js:4:14035) at XMLHttpRequest.<anonymous> (script.js:4:16323) el 14 jul. 2022 a las 16:12
  • Modifique la respuesta, si el error es porque ya estas indicando que recibirás una respuesta de tipo JSon, es redundante, verifica la edición que hice. el 14 jul. 2022 a las 16:42
  • Sigue sin pintarme la tabla :c el 14 jul. 2022 a las 16:49
  • Al parecer no has mencionado que genere algún tipo de error, ya verificaste que estés haciendo referencia al script js de la función Ajax en tu index, donde quieres pintar?, ya inspeccionaste que sucede en el elmento #datos en tu navegador, no veo que otra cosa pudiera ser, es complicado sin replicar tu código. el 14 jul. 2022 a las 16:58
  • No me arroja ningún error, por eso no hago mención de ello. Si estoy haciendo referencia al script js y a la hora de que presiono el botón search, la tabla hace "el intento" por así decirlo de cargar información, pero se queda vacía. Agregaré una imagen de mi página antes de presionar el botón search (el después es la que ya tengo insertada en la pregunta inicialmente). el 14 jul. 2022 a las 17:03

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.