0

I have a Django app. On my html page I have a dropdown menu which fills from DB when you click with mouse on it:

    <script>
        $("#div_id_res_person_1").mousedown(function () {
            $("#id_res_person_1").empty();
            $("#id_res_person_1").append("<option>" + '---------' + "</option>")
            var value_1 = $("#id_report_division").val();
            var value_2 = $("#id_report_sector").val();
            var value_3 = $("#id_report_department").val();
            var url = $("#PostForm").attr("data-person-url");
            console.log("a")
            $.ajax({
                url: url,
                data: {
                'divizija': value_1,
                'sektor': value_2,
                'odjel': value_3
                },
                success: function (data) {
                    $("#id_res_person_1").html(data);
                }
            });

        });
    </script>

Console.log is added to track what is going on. When I click on the field in Chrome, dropdown opens and loads with data, first console.log. Then I select what I want. Done. So only 1 console.log in total.

When I click on the field in Firefox, on first press I get console.log, and I get second when I select. How can I prevent second mousedown when selecting data in dropdown in Firefox?

MarkoZg
  • 391
  • 2
  • 10
  • I would recommend you to use Vanilla Javascript instead of Jquery. Check this thread here to get an insight. https://stackoverflow.com/questions/64931940/prevent-event-dblclick-after-handing-mousedown – Oris Sin Mar 09 '22 at 14:25

1 Answers1

0

If it'a dropdown (select tag), you can try onchange event instead of mousedown. May be mousedown work differently in firefox compared to chrome.

You can refer to this link - Link

Ankit Saxena
  • 1,067
  • 1
  • 4
  • 16