Display data from DB in a html table

yu

yusufo 17 Feb, 2016

Hi,

I have an event switcher that checks if there are no records, only one record or many records on a database table.

When there are many records, I want to show a table listing the records with a button to select one row.

When the user selects a row I want to display the different values on the form. How can I archieve this solution?

I have a custom code inside On found of DB READ with html and php code to show the table, but it does not appear.

<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
        div.tabla{text-align:center;}
        div.tabla table{margin: 0 auto;text-align: left;}
        td{text-align:center;background-color: #81c2e8;color:#393b41;}
        tr{text-align:center;color:#fff;background-color: #81c2e8;}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
            $("table tbody tr").click(function(){
             var seleccion = $(this).text();
             var arr = seleccion.split("\n");
             alert (arr[1].trim());
             alert (arr[2].trim());
             alert (arr[3].trim());
             alert (arr[4].trim());
    });
});
        </script>
        </head>
        <body>
<h3 style="text-align: center">Seleccionar uno de los siguientes demandantes</h3>
<div class="tabla">
        <table id="demandantes" width="80%" border ="1">
        <thead>
            <tr>
                <th scope="col"><p>ID</p></th>
                <th scope="col"><p>Nombre</p></th>
                <th scope="col"><p>Primer Apellido</p></th>
                <th scope="col"><p>Segundo Apellido</p></th>
                <th scope="col"><p>Seleccionar</p></th>
            </tr>
            </thead>
<tbody>
<?php
foreach ($form->data['Data'] as $d){
echo "<tr>
                        <td>' .$d['idDemandante']. '</td>
                        <td>' .$d["nombre"]. '</td>
                        <td>' .$d["apellido1"]. '</td>
                        <td>' .$d["apellido2"]. '</td>
                        <td><button type="button">' ."Seleccionar".'</button></td>
                      </tr>";
}
?>
</tbody>
</table>
</html>

Thanks.

Joaquín

Gr

GreyHead 17 Feb, 2016

Hi Joaquin,

This will probably work if you leave out the <html>, <head>. <meta> and <body> tags - Joomla! provides those.

Otherwise use ChronoConnectivity which is designed to show lists like this.

Bob

yu

yusufo 17 Feb, 2016

Hi Bob,

I removed those tags but the problem is the same. I can see the form page 2 rendered but the tabla doesn't appear.

The debugger shows that the query is executed without errors and there are 2 rows on database table with this conditions.

Please, can you take a look?

Thanks.

Debugger info:

Data Array

Array
(
    [chronoform] => RegistrarLlamada
    [event] => buscar
    [buscarNombre] => Joaquin
    [buscarApellido1] => Duro
    [buscarApellido2] => 
    [button3] => Buscar
    [Data] => Array
        (
            [0] => Array
                (
                    [idDemandante] => 3
                    [nombre] => Joaquin
                    [apellido1] => Duro
                    [apellido2] => 
                )

            [1] => Array
                (
                    [idDemandante] => 8
                    [nombre] => Joaquin
                    [apellido1] => Duro
                    [apellido2] => Arribas
                )

        )

)

Array
(
)

Errors

Array
(
)

Debug Info

Array
(
    [61] => Array
        (
            [DB Read] => Array
                (
                    [Queries] => Array
                        (
                            [0] => SELECT `Data`.`idDemandante` AS `Data.idDemandante`, `Data`.`nombre` AS `Data.nombre`, `Data`.`apellido1` AS `Data.apellido1`, `Data`.`apellido2` AS `Data.apellido2` FROM `z2ma5_sioa_demandante` AS `Data` WHERE `Data`.`nombre` = 'Joaquin' AND `Data`.`apellido1` = 'Duro'
                        )

                )

        )

)

Gr

GreyHead 17 Feb, 2016

Hi Joaquin,

Looking again there's a problem with the quotes - see

echo "<tr>
                        <td>'

this starts with a double quote and ends with a single quote - they both need to be the same.

Bob

yu

yusufo 17 Feb, 2016

Thanks Bob!! Got it.

At last, if I click over "Seleccionar" button on first row, how can I copy the values of first row (Nombre, Primer Apellido, Segundo Apellido) on the form fields.

I have the JQUERY code to get the values but I don't know where I must copy the values to the form (in the "Setup" hierarchy page on chronoforms V5 and how to do it. (Now, I can see the values through Javacript alert)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
            $("table tbody tr").click(function(){
             var seleccion = $(this).text();
             var arr = seleccion.split("\n");
             alert (arr[1].trim());
             alert (arr[2].trim());
             alert (arr[3].trim());
             alert (arr[4].trim());
    });
});
        </script>

Thanks,

Joaquín

Gr

GreyHead 17 Feb, 2016

Hi Joaquín,

I'm really not clear what you need to do here? Do you want to make these entries editable in a form? Then usually you'd pass the record ID and look up the data with a DB Read action in the form.

Is there some reason why you are custom building this instead of using ChronoConnectivity?

Bob

yu

yusufo 17 Feb, 2016

Hi Bob,

I am not using Chronoconectivity because I tried to make with it a few weeks ago and I could'nt show the table.

Sorry I forgot to attach the image.

If not possible, I can try again with ChronoConectivity with your help.

Thanks. Regards,

Joaquín

yu

yusufo 17 Feb, 2016

1 Likes

I got it with JQUERY!!!!

Here is the code if helps in the future:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
            $("table tbody tr").click(function(){
             var seleccion = $(this).text();
             var arr = seleccion.split("\n");
             var j_id = arr[1].trim();
            var j_nombre = arr[2].trim();
             var j_apellido1 = arr[3].trim();
             var j_apellido2 = arr[4].trim();
 $('#idDemandante').val(j_id);
$('#nombre').val(j_nombre);
$('#apellido1').val(j_apellido1);
$('#apellido2').val(j_apellido2);
    });
});
        </script>

Thank you Bob!!!.Regards,

Joaquín