Jquery autocompletebox doesn't always work

Question

Im having a problem with a jquery autocompletebox in a modal window. Ill try to explain the situation as clear as possible. If you have any questions please let me know.

I have a screen with all fields, its a main record. I also have a collection of subrecords in it. I want the user to add information into the subrecords making use of a modal dialog for the child record. One of the fields in the subrecord is the field "Currency". This field should be a autocompletebox. The problem is quite simpel but after 2 days i still have no idea how to solve it. The first time the user presses the add button the modal window is opened perfectly. The autocompletebox works also like a charm. But when the user saves the first child and wants to add a second by pressing the add button the modal window opens again. But then i get the error "Uncaught TypeError: $(...).autocomplete is not a function" and i cant find out why the first time everything works great but why the second time this error pops up.

The code:

For opening the modal window:

<a href="#theModal" class="nav-link btn btn-info float-right" data- 
remote="/Specification/_AddSpecification" data-toggle="modal" data- 
backdrop="static" data-target="#theModal"> Nieuwe specificatie</a>

For the autocompletebox (i use a class for this)

<script>
        $(document).ready(function () {
            $(document).on('focus',
                '.CurrencySelect',
                function () {
                    $(this).autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                url: "/Currency/searchCurrencies",
                                type: "POST",
                                dataType: "json",
                                data: { searchValue: request.term },
                                success: function (data) {
                                    //alert(JSON.stringify(data));
                                    response($.map(data,
                                        function (item) {
                                            return { label: item.currency.Name, value: item.currency.Id };
                                        }));
                                }
                            });
                        },

                        select: function (event, ui) {
                            //alert(this.id);
                            var idField = this.id.replace('String', '');
                            //alert(idField);
                            $("input[name=" + idField + "]").val(ui.item.value);
                            $("input[name=" + this.id + "]").val(ui.item.label);

                            // retrieve the exchange rate from the selected currency for the specified declarationDate.
                            $.ajax({
                                url: "/Currency/getExchangeRate",
                                type: "POST",
                                dataType: "json",
                                data: {
                                    currencyId: ui.item.value,
                                    date: $("#date").val()
                                },
                                success: function (data) {
                                    //alert(JSON.stringify(data));

                                    // Check if status = success
                                    if (data.status === "success") {

                                        // check if statusmessage = null
                                        if (data.statusmessage == null) {
                                            // Disablen van het veld ExchangeRate.
                                            $("#ExchangeRateReadOnly").attr("disabled", "disabled");

                                            // Vullen van het veld ExchangeRate via een variabele.
                                            var er = data.Value;
                                            $("#ExchangeRateReadOnly").val(er.toString().replace(/\./g, ','));
                                            $("#ExchangeRate").val(er.toString().replace(/\./g, ','));
                                            convertCurrencyToEuro();

                                        } else if (data.statusmessage === "Exchangerate unknown") {
                                            alert(
                                                "Voor de geselecteerde valuta is geen geldige koers bekend. U dient deze zelf op te voeren.");
                                            $('#ExchangeRateReadOnly').prop("disabled", false);
                                            convertCurrencyToEuro();

                                        } else if (data.statusmessage === "No exchangerate needed") {
                                            alert("Er is geen koers nodig voor de geselecteerde valuta.");

                                            $("#ExchangeRateReadOnly").attr("disabled", "disabled");
                                            convertCurrencyToEuro();
                                        } else if (data.statusmessage === "Invalid currency code") {
                                            alert("Er is geen geldige valuta geselecteerd.");
                                            convertCurrencyToEuro();
                                        }
                                    }
                                }
                            });

                            return false;
                        }
                    });
                });
        });
    </script>

I hope that somebody can help me solving this issue.

Please advise,

Kevin

Answer 1

I just solved the issue. How stupid, jquery was loaded twice. Once in the _layout page and once in the page for parent child records itself. After removing it from the parend-child page everything seems to work now like a charm.

Thanks for your help!