Ways to create combobox using AJAX to fill

Question

Currently I have a normal HTML combobox:

<select name="nomeCombox1" id="nomeCombox1" class="select"> 
    <option value="0" selected="selected">Selecione box1</option>
    <?php
    $res = odbc_exec($conexao, "Select DISTINCT desc from tab1");
    while ($row = odbc_fetch_array($res)) {
        echo "<option name='nomeCombox1' value='" . $row['desc'] . "'>" . $row['desc'] . "</option>";
    }
    ?>
</select>

This combo is correctly searching the data.

In the next step, I have a JS where I search for what was selected and play in a new combobox:

$("#nomeCombox1").change(function () {
    var idCombox1 = $(this).val();
    $.ajax({
        dataType: 'json',
        url: "js/ajaxBuscar.php",
        data: {idCombox1: idCombox1},
        success: function(data) {
            var q = '<select name="idCombox2" id="idCombox2" class="select"> <option value="0">Escolha</option>';
            for(i=0; i < data.length; i++ ){
                q += '<option value=' + data[i].idCombox2 + '>' + data[i].descricao + '</option>';
            }
            q += '</select>';
            $('#div1').html(q);
        }, error: function(request, status, error) {
            alert(request.responseText);
        }
    });
});

These codes are working all 100%. My main question would be: How can I create this Combobox2 without being via JS? IE without having to play $('#div1').html(q). There is another way?

I am wanting another way because I have a Function in JS where I would have to check this value of this second combobox and fill in an input with the result of another AJAX. When I put the combobox2 right into HTML it works. What I’m thinking is that at the moment the page loads does not exist this second combo and so the JS can not perform correctly.

Answer 1

I’m not sure this is your case, but I’ve had some similar problems in the past.

When DOM is formed if your element has not been loaded Jquery events will not be recognized.

To illustrate let’s see the following code snippet:

$('.classe').click(do());

If any element was added dynamically with class="class" the bind would not work because when the element was added the bind for it was not realized, it was only done for the elements already loaded.

The solution I found to solve this problem was the following:

$(document).on('evento', 'seletor', action());

So each time an event is triggered the elements satisfying the selector are checked regardless of whether it has already been loaded into the DOM initially or not.

For more information: https://api.jquery.com/on/

I hope I’ve helped!