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 >
      <div >
          <div >
    

            <option  id="hijo" value="<?= $direccion['first_name'] ?>&nbsp;<?= $direccion['last_name'] ?>" href="javascript:;" 
                onclick="realizaProceso($(this).val());return false;">
                <h4 >
                    <strong><?= $direccion['first_name'] ?>&nbsp;<?= $direccion['last_name'] ?>, Zona--><?= $direccion['nombre_zona'] ?></strong>
                </h4>
            </option>
          </div>
          <div >

          </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.

CodePudding user response：

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'] ?>&nbsp;<?= $direccion['last_name'] ?>"

CodePudding user response：

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 >
    <div >
        <div >
            <!--
            
                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 >
                    <strong><?=$direccion['first_name']; ?>&nbsp;<?=$direccion['last_name']; ?>, Zona--><?=$direccion['nombre_zona']; ?></strong>
                </h4>
            </i>
        </div>
        <div >

        </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 >
    <div >
      <div >
        <i data-id='hijo' data-zona='International' data-value='John Smith'>
                <h4 >
                    <strong>John Smith, Zona -->International</strong>
                </h4>
            </i>
      </div>
      <div ></div>
    </div>
  </li>
  <li >
    <div >
      <div >
        <i data-id='hijo' data-zona='Spy' data-value='Mr Bean'>
                <h4 >
                    <strong>Mr Bean, Zona -->Spy</strong>
                </h4>
            </i>
      </div>
      <div ></div>
    </div>
  </li>
  <li >
    <div >
      <div >
        <i data-id='hijo' data-zona='Superhero' data-value='Batman'>
                <h4 >
                    <strong>Batman, Zona -->Superhero</strong>
                </h4>
            </i>
      </div>
      <div ></div>
    </div>
  </li>
</ul>

CodePudding user response：

It seems that you are using a foreach, but you are trying to access the collection '$direccion' instead of the item '$direc'. This might fix your code.