500 (Internal Server Error) JQuery in dropdown

Question

I'm trying to do a dependent dropdown where you select a department and depending on this the following options change and it kind of works. My problem is that when I select the first option the second one does not change. I say it kind of works because it's not until I press the submit button that the second option gets populated with the correct data.

When I use the google dev tools I get the 500 Internal error every time I click the first dropdown. This is my javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#request_department").change(function(){
            var data = {
                option_id: $(this).val()
            };

            $.ajax({
                type: 'POST',
                url: '{{ path("select_options") }}',
                data: data,
                success: function(data) {
                    var $option_selector = $('#request_option');

                    $option_selector.html('<option>Option</option>');

                    for (var i=0, total = data.length; i < total; i++) {
                        $option_selector.append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
                    }
                    $option_selector.html('');
                    $.each(data, function(k, v) {
                        $option_selector.append('<option value="' + v + '">' + k + '</option>');
                    });
                }
            });
        });
    });
</script>

Im following this tutorial.

Answer 1

500 (Internal Server Error) errors are not produced by jQuery, which is on client-side , but by some server-side code (in your example, Symphony , probably...). You'd definitively search for the error there...