Невозможно реализовать запрос PUT с динамически генерируемыми элементами - JavaScript - PullRequest
Новая
       46

Невозможно реализовать запрос PUT с динамически генерируемыми элементами - JavaScript

0 голосов
/ 22 января 2019

Я боролся с этой проблемой в течение многих дней / часов, и я не могу решить ее. Моя последняя попытка состояла в том, чтобы попытаться реализовать метод POST в DOM, но с помощью метода PUT в коде JavaScript, поскольку, как я понимаю, запросы PUT не работают при кодировании в HTML.

Большинство моих элементов (т.е. сохранить, удалить, ввести и т. Д.) Все динамически генерируются в GET-запросе, и некоторые функции работают. Но я просто не могу получить свой код для обновления ресурса, хотя мои FormData записывают его в Developer Tools.

Вот соответствующий код. Учтите, что этот код также заключен в GET с ответом JSON.parse и запросом функции forEach с другими существующими функциями. Основная проблема связана с функциональностью saveUserEdit и реализацией setAttribute с method=POST.

. 
        // Generated save button
        var saveUserBtn = document.createElement('button');
        saveUserBtn.type = 'submit';
        saveUserBtn.innerHTML = "Save";

        // Defining the element that will be created as a list item
        var user_item = document.createElement('form');

        // Creates an ID  and name attribute per list item
        user_item.setAttribute("id", user.name)
        user_item.setAttribute("name", user.barcode);
        user_item.setAttribute("action", users_url + '/' + user.id);
        user_item.setAttribute("method", "POST"); 

        // Displays id, title, ISBN of the users from the database
        user_item.appendChild(userID);
        user_item.appendChild(name);
        user_item.appendChild(barcode);
        user_item.appendChild(memberType);
        user_item.appendChild(saveUserBtn);
        user_item.appendChild(loan);
        user_item.appendChild(deleteUser);

        // Assigns attributes to p items within users items
        userID.setAttribute("id", user.id);
        userID.setAttribute("value", user.id);
        name.setAttribute("id", user.name);
        name.setAttribute("value", user.name);
        barcode.setAttribute("id", user.barcode);
        barcode.setAttribute("value", user.barcode);

        // Adding a generic name to these elements for potential identification and use
        userID.setAttribute("name", "userID");
        name.setAttribute("name", "name");
        barcode.setAttribute("name", "barcode");
        memberType.setAttribute("name", "memberType");
        loan.setAttribute("name", "loan");

        // Converting/communicating dynamically generated Onclick button to saveUserBtn
        saveUserBtn.onclick = function() {
            saveUserEdit();
        }; 

        // Make content user name editable     
        function saveUserEdit() {
            saveUserBtn.addEventListener('click', function(e){
                e.preventDefault();
                name.addEventListener('keypress', (e) => {
                    if (e.keyCode === 13) {
                        xhttp.open("PUT", users_url + '/' + user.id, true); 
                        e.preventDefault();
                        var editName = new FormData();
                        editName.append("name", document.getElementById('name')[0].value);
                        editName.append("barcode", document.getElementById('barcode')[0].value); 
                        xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                        xhttp.send();
                    }
                });     
            })    
        }
        user_list.appendChild(user_item);
...