Duplicates values in select (jQuery & ajax)

[fcsd]

Good afternoon everyone,

I have an entry point in which I obtain related records from a module using beans.

<?php 


$ofertas = BeanFactory::getBean('of12_Ofertadeactividades', '14d11a02-8b64-d1a1-e81f-63d3f107b9c7');


$ofertas->load_relationship('of12_ofertadeactividades_ado_adolescente_completo_1');

$related = $ofertas->of12_ofertadeactividades_ado_adolescente_completo_1->getBeans();

$opciones = array();

foreach ($related as $clave => $objeto) {

array_push($opciones, $objeto->name);

}

echo json_encode($opciones);



?>

In editviewdefs.php, I added the following JS script to obtain and dynamically fill a dropdown:

$(document).ready(function() {
  $.get("URL/index.php?entryPoint=testBeans", function(data) {

    let opciones = JSON.parse(data);


    let select = $('#test_despl_c');


    for (let i = 0; i < opciones.length; i++) {
      $('<option>').val(opciones[i]).text(opciones[i]).appendTo(select);
    }
  });



});

ca

The problem I have is that the dropdown duplicates the values, as if the JS code is executed twice. I checked the developer tools and it seems that the problem arises because the entry point call is generated twice, and I don’t understand why.

Can anyone guide me a little with this?

Thank you!

[pgr]

I would suspect that document.ready is getting called twice, which I guess can be caused by many different things.

Maybe you can just start your routine by checking (before the GET) if the dropdown is already filled.

[fcsd]

Thank u ! It’s working now.

$(document).ready(function() {


    let select = $('#test_despl_c');
    
    
    
  $.get("URL/index.php?entryPoint=testBeans", function(data) {

        let opciones = JSON.parse(data);
        let cantOpciones = $('#test_despl_c option');


        for (let i = 0; i < opciones.length; i++) {

         if(cantOpciones.length !== opciones.length){          
          $('<option>').val(opciones[i]).text(opciones[i]).appendTo(select);
          cantOpciones = $('#test_despl_c option');
          console.log(cantOpciones.length);
        }
}
    
      
    });


});

[pgr]

Ok, cool!

Just a suggestion - wouldn’t it be better, instead of calling the endpoint again and using this test

if(cantOpciones.length !== opciones.length)

, if you would simply test before calling the endpoint

if(cantOpciones.length) return;

You would avoid the network delay of the second call. And it’s quite unlikely that the contents of the API response would change between the two calls…

[fcsd]

That’s correct and I tried to do it that way, but for some reason, probably my mistake and I can’t find where, it keeps running twice.

Here’s my code:

$(document).ready(function () {
  let select = $("#test_despl_c");
  let cantOpciones = $("#test_despl_c option");
  
  console.log("Before the call is: " + (cantOpciones.length ? "true" : "false"));

  if (cantOpciones.length) {
    return;
  }

  $.get(
    "URL/index.php?entryPoint=testBeans",
    function (data) {
      let opciones = JSON.parse(data);

      for (let i = 0; i < opciones.length; i++) {
        $("<option>").val(opciones[i]).text(opciones[i]).appendTo(select);
        cantOpciones = $("#test_despl_c option");
      }
        console.log("after the call is: " + (cantOpciones.length ? "true" : "false"));
    }
  );
});

And here’s the output:

I hope you can find where the error is. Thank you!

[fcsd]

Well, I make it work:

https://stackoverflow.com/questions/71060672/how-to-prevent-javascript-code-runing-multiple-times-caused-by-caching

$(document).ready(function () {
  if (!window.initializator) {
          window.initializator = true;
      (function(){
    let select = $("#test_despl_c");
   
   let cantOpciones = $("#test_despl_c option");
    
  
  
    console.log("Before the call is: " + (cantOpciones.length ? "true" : "false"));
  
    $.get(
      "URL/index.php?entryPoint=testBeans",
      function (data) {
        let opciones = JSON.parse(data);
  
        for (let i = 0; i < opciones.length; i++) {
          $("<option>").val(opciones[i]).text(opciones[i]).appendTo(select);
          cantOpciones = $("#test_despl_c option");
        }
          console.log("after the call is: " + (cantOpciones.length ? "true" : "false"));
      }
    );
  })();
  } });