jQuery rereading in Select

Question

jQuery

$("#idRede").on("change", function () {                   

    $.ajax({
        url: "_scripts/_php/_validacoes/buscarDadosRegioes.php",
        type: "POST",
        dataType: "json",
        data: {
              idRede: $("#idRede").val()
        },
        beforeSend: function() {
            $("#imgCarregando").css('display','block');
        },
        success: function (result) {
            $("#imgCarregando").css('display','none');

            if (result == null){
                $("#idRegiao").append("<option value=>Sem Regiões</option>");
            } else {
                result.forEach(function(option){
                    $("#idRegiao").append("<option value=" + option["idRegiao"] + ">" + option["nome"] + "</option>")
                });
            }
        }

    });

});

searchDadosRegioes.php

 <?php

    require_once "../../../config.php";

    $regioes = $regioesDao->pesquisaRegioesParametro("idRede", $_POST["idRede"]);

    $options = null;
    $i = 0;

    if ($regioes != null) {

            foreach ($regioes as $regiao):

                $options[$i]["idRegiao"] = $regiao->getIdRegiao();
                $options[$i]["nome"]     = $regiao->getNome();
                $i++;

            endforeach;

    }

    echo json_encode($options);

?>

When the array $redes returns null, the line echo json_encode($options); returns null.

And, analogously, when the return is a object array, then the php returns a object array. Nothing unusual so far.

The problem is in jQuery that when the result is null (tested with Alert), then jQuery continues to populate the select with the old data of a previous query that brought more result to the line when the result of null.

Where is the error?

Looks like he’s going to keep the appends previous and summing up all.

Answer 1

When you use the append, will always add new results without affecting the previous.

What you need to do is remove the previous ones before adding new results.

$('#idRegiao').find('option').remove();

Complete code:

$("#idRede").on("change", function () {                   
    $.ajax({
        url: "_scripts/_php/_validacoes/buscarDadosRegioes.php",
        type: "POST",
        dataType: "json",
        data: {
              idRede: $("#idRede").val()
        },
        beforeSend: function() {
            $("#imgCarregando").css('display','block');
        },
        success: function (result) {
            $("#imgCarregando").css('display','none');

            $('#idRegiao').find('option').remove();

            if (result == null){
                $("#idRegiao").append("<option value=>Sem Regiões</option>");
            } else {
                result.forEach(function(option){
                    $("#idRegiao").append("<option value=" + option["idRegiao"] + ">" + option["nome"] + "</option>")
                });
            }
        }

    });
});

Answer 2

For your javascript I would suggest something like below, because I saw that you have difficulties to generate html code within javascript.

$("#idRede").on("change", function () {
    $.ajax({
        url: "_scripts/_php/_validacoes/buscarDadosRegioes.php",
        type: "POST",
        dataType: "json",
        data: {
            idRede: $("#idRede").val()
        },
        beforeSend: function () {
            $("#imgCarregando").css('display', 'block');
        },
        success: function (result) {
            $("#imgCarregando").css('display', 'none');
            var option;
            if (result === null) {
                option = document.createElement("option");
                option.textContent = "Sem Regiões";
                $("#idRegiao").append(option);
            } else {
                result.forEach(function (option) {
                    option = document.createElement("option");
                    option.value = option["idRegiao"];
                    option.textContent = option["idRegiao"];
                    $("#idRegiao").append(option);
                    option = null;
                });
            }
        }
    });
});

For PHP there are some syntactic questions that may be getting in your way.

<?php
require_once "../../../config.php";

$regioes = $regioesDao->pesquisaRegioesParametro("idRede", $_POST["idRede"]);

$i = 0;
$options = [];

if ($regioes != null) {
    foreach ($regioes as $regiao) {
        $options[$i]["idRegiao"] = $regiao->getIdRegiao();
        $options[$i]["nome"][$i] = $regiao->getNome();
    }
}

echo json_encode($options);
?>

If you can show how it happens within the Wordpress lookup method, because depending on the fetch mode you are using, foreach can change how to access the return array.

Try this, anything put the error and I ediyo my answer.