Dropdown menu using AJAX

Question

I have installed a dropdown menu (in a php site) that makes use of Ajax functionality to populate the dropdown list. It works ok, except that the list only populates if you tab into the dropdown button. If you click on the button it needs two clicks to populate (this tends to throw people in a major way).

The function is called from a focus event. I have tried click, onclick, load, onload and others, but nothing works.

The form code reads;

echo "<script>

    $(document).ready(function(){

        $('.sel_field').focus(function(){


            $.ajax({
                url: 'GetClient.php',
                type: 'post',
                dataType: 'json',
                success:function(response){

                    var len = response.length;

                    $('#sel_user').empty();
                    for( var i = 0; i<len; i++){
                        var id = response[i]['id'];
                        var name2 = response[i]['username'];
                        var name = response[i]['name'];
                        var mat = response[i]['Matter'];

                        $('#sel_user').append('<option value='+id+'> ClientID: '+id+' -  Name:   '+name+' : '+mat+'</option>');


                    }
                }
            });
        });

    });


</script>";

echo "<tr>";
echo "<td>";
echo "Client ID <span style='font-size:10px'>(Press tab to enter)</span>";
echo "</td>";
echo "<td>";
echo "<select  name='clientID' style='width:460px' class='form-control sel_field' id='sel_user' >
        <option value='0'> - Make A Selection -</option>
    </select>";
echo "</td>";
echo "</tr>";

Answer 1

It's hard to help you without knowing what you're expecting and what you're actually getting. I've made a snippet based on your code, replacing the ajax call with a setTimeout function. It's doing something... how close/far is it to what you're experiencing and what exactly are you expecting?

-- EDIT: maybe the delay for the load is throwing people? I've added a line to change the select text to "loading" while waiting for the ajax to finish what it's doing.

 $(document).ready(function(){ $('.sel_field').focus(function(){ $('#sel_user').html('<option value="0">Loading...</option>'); setTimeout(function(){ var len = 2; $('#sel_user').empty(); for( var i = 0; i<len; i++){ var id = 1; var name2 = 'name2-'+i; var name = 'name-'+i; var mat = 'mat'+i; $('#sel_user').append('<option value='+id+'> ClientID: '+id+' - Name: '+name+' : '+mat+'</option>'); } }, 1000); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td> Client ID <span style='font-size:10px'>(Press tab to enter)</span> </td> <td> <select name='clientID' style='width:460px' class='form-control sel_field' id='sel_user' > <option value='0'> - Make A Selection -</option> </select> </td> </tr>