0

I have an API that gives me a user list and its edit button being created dynamically. the edit button needs to pass data into PATCH API. the form submits button just refreshes the page. without firing the PATCH API. Below is what I am trying to do:

            function completeUserListRequest(result) {
            console.log(result);
            var givenName;
            var familyName;
            var eMail;
            var status;
            var userSub;
            //console.log(result[0].Attributes[3].Name); // example to get the First Name
            for (var counterx = 0; counterx < result.length; counterx++) {
               //console.log(result[counterx].UserStatus);
                userSub = result[counterx].Username;
                var userStatus = result[counterx].UserStatus;
                if (userStatus === 'CONFIRMED') {
                    status = 'Active';
                } else if (userStatus === 'FORCE_CHANGE_PASSWORD'){
                    status = 'Pending';
                } else {
                    status = 'Deactive';
                }
                for (var countery = 0; countery < result[counterx].Attributes.length; countery++) {
                    var attributeName = result[counterx].Attributes[countery].Name;
                    //console.log(attributeName);
                    if (attributeName === 'given_name') {
                        givenName = result[counterx].Attributes[countery].Value;
                    }
                    if (attributeName === 'family_name') {
                        familyName = result[counterx].Attributes[countery].Value;
                    }
                    if (attributeName === 'email'){
                        eMail = result[counterx].Attributes[countery].Value;
                    }
                }
                console.log(givenName + familyName + eMail + userSub);
                var userTable = document.getElementById('user_table');
                var userList = document.createElement('tr');
                userList.innerHTML = '<td class="text-center">' + givenName + ' ' + familyName + '</td><td class="text-center">' + 
                    eMail + '</td><td class="text-center"><span class="label label-primary">' + status + '</span></td><td class="text-center"><div class="btn-group"><button class="btn-default btn btn-xs"><a data-toggle="modal" href="#addStoreForm">Add Store</a></button><button id="editUserModal" value="' + userSub + '" class="btn-default btn btn-xs"><a data-toggle="modal" href="#editUserForm' + counterx + '">Edit User</a></button></div><div id="editUserForm' + counterx + '" class="modal fade" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><form method="patch" role="form"><div class="form-group"><input id="userGivenName" type="text" placeholder="First Name" class="form-control" value="' + givenName + '"></div><div class="form-group"><input id="userLastName" type="text" placeholder="Last Name" class="form-control" value="' + familyName + '"></div><div class="form-group"><input id="userEmail" type="email" placeholder="E-mail" class="form-control" value="' + eMail + '"><input id="userUUID" type="hidden" value="' + userSub + '"><input id="userActiveStatus" type="hidden" value="' + userStatus + '"></div><br><div><button id="editUserBtn" class="btn btn-sm btn-primary m-t-n-xs" type="submit"><strong>Go!</strong></button></div></form></div></div></div></div></td>';
                    document.getElementById('user_table').appendChild(userList);
            }
        }


        $('#editUserBtn').click(function (event) {
            event.preventDefault();
            var userName = $('#userUUID').val();
            var userGivenNameBoxValue = $('#userGivenName').val();
            var userLastNameBoxValue = $('#userLastName').val();
            var userEmailBoxValue = $('#userEmail').val();
            console.log(userGivenNameBoxValue);
            console.log(userLastNameBoxValue);
            console.log(userEmailBoxValue);
            console.log(userStatusBoxValue);
            console.log(userName);
            //var userStatusValue = $('#userStatus').val();
            //editUser (userName, userGivenNameBoxValue, userLastNameBoxValue, userEmailBoxValue);
            $('#editUserForm').modal('hide');
        });

        function editUser (userName, userGivenNameBoxValue, userLastNameBoxValue, userEmailBoxValue) {
            alert("lets run this");
            console.log(givenNameBoxValue);
            console.log(familyNameBoxValue);
            console.log(emailBoxValue);
            $.ajax({
                method: 'PATCH',
                url: _config.api.invokeUrl + '/admin/user/' + userName,
                headers: {
                    Authorization: authToken
                },
                data: JSON.stringify({
                    given_name: userGivenNameBoxValue,
                    family_name: userLastNameBoxValue,
                    email: userEmailBoxValue
                }),
                contentType: 'application/json',
                success: function(result){
                    completeEditUserRequest(result);
                },
                error: function ajaxError(jqXHR, textStatus, errorThrown) {
                    console.error('Error requestUserList: ', textStatus, ', Details: ', errorThrown);
                    console.error('Response: ', jqXHR);
                    alert('An error occured when requesting your user list:\n' + jqXHR);
                }
            });
        }

        function completeEditUserRequest (result) {
            //console.log(result);
            if (result !== []){
                alert("User Details Changed Successfully!");
            } else {
                alert("Error! Please try again.");
            }
        }

If you see the code you will be able to see clearly that I am creating a table dynamically in which each row has Name, Email, A button to add stores and another one to edit the row/user. the edit button opens a modal form that uses the PATCH API.

Harsh
  • 91
  • 1
  • 9
  • You're repeating ids in your userList – Taplar Oct 30 '18 at 19:30
  • @Taplar so? how is that a problem? – Harsh Oct 31 '18 at 02:22
  • https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page https://dom.spec.whatwg.org/#concept-id Ids by web standards are expected to be unique per page. If you repeat ids you run the risk of logical errors because javascript, and your browser, expect this to be the case. – Taplar Oct 31 '18 at 14:18

0 Answers0