I wanted to know if it is possible to send a PHP array to a function I have in a Javascript file using onclick
an HTML button event.
Is this possible to do?, and if it is correct, how can I do it?
I try to pass the array and the function does not capture it.
My array is this:
<?php
echo '<pre>';
print_r($maestros['data'][$key]);
die();
And as a result I get this:
Array
(
[idusuario_administrador] => 37
[dsnombre_completo_usuario] => MAR�A CAMILA OSORIO
[dscorreo_electronico] => [email protected]
[perfil] => 5
[id] => 35
[titulo] => �Hola! Mi nombre es Mar�a Camilo Osorio, soy
[imagen] => m1.jpg
[fecha] => 2022-02-24 14:31:45
)
I try to pass it to a Javascript function as follows:
<a type="button" class="btnModalUser" onclick="ejecutarModal('<?= $maestros['data'][$key]; ?>', 'degradadopeq<?= $tipoDegradado; ?>')"></a>
But the result in the HTML of the page is as follows:
<a type="button" class="btnModalUser" onclick="ejecutarModal('Array', 'degradadopeq1')"></a>
I tried passing the function to it json_encode()
, in the event onclick
but nothing came out, it appeared empty, why does this happen and how can I solve it?
Note: it is not possible to use the implode
, since in the array property it titulo
is a description where commas, etc. can go.
My complete code is:
<?php
foreach ($maestros['data'] as $key => $value) :
$tipoDegradado = 1;
?>
<div class="col-3 p-3" style="height: 500px;">
<div class="card h-100 cardredondeada degradadopeq<?= $tipoDegradado; ?> ">
<a type="button" class="btnModalUser" onclick="ejecutarModal(<?= json_encode($maestros['data'][$key]) ?>, 'degradadopeq<?= $tipoDegradado; ?>')">
<img src="/img/<?= $value['imagen']; ?>" class="card-keymg-top" id="imgMaestro<?= $key ?>" alt="<?= utf8_encode($value['dsnombre_completo_usuario']); ?>" style="width: 100%; height: 350px;">
<div class=" card-body">
<center>
<h3 class="card-title text-white"><?= utf8_encode($value['dsnombre_completo_usuario']); ?></h3>
</center>
</div>
</a>
</div>
</div>
<?php endforeach; ?>
The content of $maestros
is as follows:
echo "<pre>";
var_export($maestros);
die();
And the result is:
array (
'error' => 0,
'mensaje' => 'Se han encontrado los siguientes maestros.',
'data' =>
array (
0 =>
array (
'idusuario_administrador' => '37',
'dsnombre_completo_usuario' => 'MAR�A CAMILA OSORIO',
'dscorreo_electronico' => '[email protected]',
'perfil' => '5',
'id' => '35',
'titulo' => '�Hola! Mi nombre es Mar�a Camilo Osorio, soy ',
'imagen' => 'm1.jpg',
'fecha' => '2022-02-24 14:31:45',
),
1 =>
array (
'idusuario_administrador' => '38',
'dsnombre_completo_usuario' => 'LUISA CARRIZOSA',
'dscorreo_electronico' => '[email protected]',
'perfil' => '5',
'id' => '36',
'titulo' => 'prueba 1',
'imagen' => 'm2.jpg',
'fecha' => '2022-02-24 14:31:45',
),
2 =>
array (
'idusuario_administrador' => '39',
'dsnombre_completo_usuario' => 'CARLA PODEST�',
'dscorreo_electronico' => '[email protected]',
'perfil' => '5',
'id' => '37',
'titulo' => 'prueba 2',
'imagen' => 'm3.jpg',
'fecha' => '2022-02-24 14:31:45',
),
3 =>
array (
'idusuario_administrador' => '40',
'dsnombre_completo_usuario' => 'JACKIE ARANGO',
'dscorreo_electronico' => '[email protected]',
'perfil' => '5',
'id' => '38',
'titulo' => 'prueba 3',
'imagen' => 'm4.jpg',
'fecha' => '2022-02-24 14:31:45',
),
4 =>
array (
'idusuario_administrador' => '41',
'dsnombre_completo_usuario' => 'MIGUEL MORENA',
'dscorreo_electronico' => '[email protected]',
'perfil' => '5',
'id' => '39',
'titulo' => 'prueba 4',
'imagen' => 'm1.jpg',
'fecha' => '2022-02-24 14:31:45',
),
5 =>
array (
'idusuario_administrador' => '42',
'dsnombre_completo_usuario' => 'HUMBERTO CADAVID',
'dscorreo_electronico' => '[email protected]',
'perfil' => '5',
'id' => '40',
'titulo' => 'prueba 5',
'imagen' => 'm6.jpg',
'fecha' => '2022-02-24 14:31:45',
),
6 =>
array (
'idusuario_administrador' => '43',
'dsnombre_completo_usuario' => '�LVARO G�MEZ',
'dscorreo_electronico' => '[email protected]',
'perfil' => '5',
'id' => '41',
'titulo' => 'prueba 6',
'imagen' => 'm7.jpg',
'fecha' => '2022-02-24 14:31:45',
),
7 =>
array (
'idusuario_administrador' => '44',
'dsnombre_completo_usuario' => 'ANDR�S VILLEGAS',
'dscorreo_electronico' => '[email protected]',
'perfil' => '5',
'id' => '42',
'titulo' => 'prueba 7',
'imagen' => 'm8.jpg',
'fecha' => '2022-02-24 14:31:45',
),
),
)
You should use JSON encoding, which is the native representation of data in Javascript. Remember to change the type of double quotes to single ones so that the HTML is not broken.
You could generate the data like this:
You can see the result in the following link:
The result would be this:
PS: I have used
array_map()
to convert the array data from Latin1 to UTF-8, but if you are getting that data from a database you should correct it in the connection settings. Also usedhtmlspecialchars()
to send data to the browser.