Ajax query not showing mysql results in my div - html

Question

I have a list that I show with an ajax call, each element has an onclick that performs a query, the model receives the correct query but when it refreshes the list it remains blank, it is as if the information from the controller did not arrive because I have made a var_dump to the foreach and mark array[0] when the query does get results and the div remains blank
this is my code:
<?php
foreach ($direc as $direccion) :
?>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<option id="hijo" value="<?= $direccion['first_name'] ?> <?= $direccion['last_name'] ?>" href="javascript:;"
onclick="realizaProceso($(this).val());return false;">
<h4 class="mb-0">
<strong><?= $direccion['first_name'] ?> <?= $direccion['last_name'] ?>, Zona--><?= $direccion['nombre_zona'] ?></strong>
</h4>
</option>
</div>
<div class="col-auto">
</div>
<script>
function realizaProceso(padre) {
var parametros = {
"padre": padre
};
$.ajax({
data: parametros, //datos que se envian a traves de ajax
url: "<?php echo base_url() ?>Administracion/paneladminreddos", //archivo que recibe la peticion
type: 'post', //método de envio
beforeSend: function() {
$("#content").html("Procesando, espere por favor...");
},
success: function(response) { //una vez que el archivo recibe el request lo procesa y lo devuelve
$("#content").html(response);
}
});
}
</script>
There is no error message just that the div does not refresh again.

Answer 1

I would rewrite the HTML portion to correct the markup errors previously identified and bind the event handler after the list has been rendered.
<?php
foreach( $direc as $direccion ) {
?>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<!--
Change the `option` to another element such as `i` as used here.
Change the ID to a `data-id` so that duplicate IDs are not observered in the DOM.
Remove inline event handler and assign external event listener later.
Assign `data-set` attributes so that the event listener can obtain required information when the `i` element is clicked.
-->
<i data-id='hijo' data-zona='<?= $direccion['nombre_zona']; ?>' data-value='<?= $direccion['first_name'];?> <?= $direccion['last_name'];?>' >
<h4 class="mb-0">
<strong><?=$direccion['first_name']; ?> <?=$direccion['last_name']; ?>, Zona--><?=$direccion['nombre_zona']; ?></strong>
</h4>
</i>
</div>
<div class="col-auto">
</div>
</div>
</li>
<?php
}//end foreach loop
?>
And the external event listener:
<script>
document.querySelectorAll('i[ data-id="hijo" ]').forEach( i=>i.addEventListener('click',function(e){
e.preventDefault();
e.stopPropagation();
<?php
printf(
'const url="%s/Administracion/paneladminreddos";',
base_url()
);
?>
// Use `this` to access (dataset) properties of the `i` element.
// Construct the payload for the POST request.
let data={
'padre':this.dataset.value,
'zona':this.dataset.zona
};
$.ajax({
data:data,
url:url,
type:'post',
beforeSend:()=>$('#content').html('Procesando, espere por favor...'),
success:(r)=>$('#content').html(r),
error:(e)=>console.log(e)
});
}));
</script>
An example
document.querySelectorAll('[data-id="hijo"]').forEach(n => n.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const url = location.href;
let data = {
'padre': this.dataset.value,
'zona': this.dataset.zona
};
$.ajax({
data: data,
url: url,
type: 'post',
beforeSend: () => $('#content').html('Procesando, espere por favor...'),
success: (r) => $('#content').html(r),
error: (e) => console.log(e.statusText)
});
}));
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<i data-id='hijo' data-zona='International' data-value='John Smith'>
<h4 class="mb-0">
<strong>John Smith, Zona -->International</strong>
</h4>
</i>
</div>
<div class="col-auto"></div>
</div>
</li>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<i data-id='hijo' data-zona='Spy' data-value='Mr Bean'>
<h4 class="mb-0">
<strong>Mr Bean, Zona -->Spy</strong>
</h4>
</i>
</div>
<div class="col-auto"></div>
</div>
</li>
<li class="list-group-item">
<div class="row align-items-center no-gutters">
<div class="col mr-2">
<i data-id='hijo' data-zona='Superhero' data-value='Batman'>
<h4 class="mb-0">
<strong>Batman, Zona -->Superhero</strong>
</h4>
</i>
</div>
<div class="col-auto"></div>
</div>
</li>
</ul>

Answer 2

Foreach function will be loop, repeat tag. So if you set id for that, i think you can set by numerical order or ID of that.
<option id="<?= $direccion['id'] ?>" value="<?= $direccion['first_name'] ?> <?= $direccion['last_name'] ?>"