JavaScript & Ajax without refreshing CRUD

i have a problem about JavaScript. i want to create CRUD without refreshing page. I can create, read and delete item. But when i update item it gives problem. I want a function to work (I send an id to the function as data) when table tr double click is clicked or edit icon is created, Function get data from api by ID and fill the form First time when i submit form it update form correctly. But second time i update another item and submit it. System updates this and previous item this process is repeated for the third time. At this time, the data in every 3 lines changes according to the last data This proses repeating again and again I logged ID with alerts. And i send my kod below. Could somebody help me?

            const options = {
                headers: {'Authorization': "Bearer " + readCookie('AuthToken')}
            };

            let UrlArgs = {
                'action': "read",
                'module': "positions",
                'sector': "hrm"
           };
            alert(ids); //**one ID**
            urlgen(UrlArgs).then(url => { 
                axios.get(url + "/" + ids, options)
                    .then(function (response) {
                        alert(ids); //**one ID**
                        let data = response['data'];
                        $('#PositionEditModal').text("Pozisiya redaktə edilir: " + data['name']);
                          $("#PositionEditForm input[name=name]").val(data['name']);
                        $('#PositionEditForm select[name="permission_level"] option').each(function () {
                            if ($(this).val() == data['permission_level']) {
                                $(this).attr("selected", "selected");
                            }
                        });
                        alert(ids); **//one ID**

                        $('.PositionEditModal').modal('show');
                        $(document).on('click', '#submitUpdate', function () {
                           
                            let id = data['id'];
                            alert(id); //**two ID**
                            // $('#PositionEditForm input, #PositionEditForm select').jqBootstrapValidation({
                            // preventSubmit: true,
                            // submitSuccess: function ($form, event) {
                            //     event.preventDefault();
                            //     $this = $('#submitUpdate');
                            $('#submitUpdate').prop('disabled', true);
                            let form_data = $("#PositionEditForm").serialize();

                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                                }
                            });
                            alert(id);
                            let editUrl = "";

                            editUrl = '{{route("erp.panel.hrm.positions.update", ":id")}}';
                            editUrl = editUrl.replace(':id', id);
                            $.ajax({
                                url: editUrl,
                                method: "POST",
                                data: form_data,
                                cache: false,
                                beforeSend: function () {
                                    $(".beforeSend").hide();
                                    $(".loadingSend").show();
                                },
                                success: function () {
                                    setTimeout(function () {
                                        $('#PositionEditForm').trigger('reset');
                                        $('.PositionEditModal').modal('hide')
                                        errorManagment(null, "Vəzifə uğurla redaktə edildi");
                                    }, 1000);
                                    setTimeout(function () {
                                        datafetch();
                                    }, 1000);
                                },
                                error: function (request) {
                                    $.each(request.responseJSON.errors, function (key, item) {
                                        errorManagment(item)
                                    });
                                },
                                complete: function () {
                                    setTimeout(function () {
                                        $('#submitUpdate').prop("disabled", false);
                                        $(".loadingSend").hide();
                                        $(".beforeSend").show();
                                    }, 800);
                                }
                            });
                            data = "";
                            // },
                        })

                    }).catch(function (error) {

                    httpMessage(error.response.status).then(message => {
                        errorManagment(message);
                    });
                });
            })

        }```

Answer

You’re assigning the click event each time you get a response from Axios. These events are appended in this case to the element with ID submitUpdate. Maybe you need to remove all existing click events for that element with the “unbind” or “off” function in jquery before assigning a new on-click event to the same element.

  • unbind is deprecated in the current version of jquery, use off instead