Dom Value After Ajax Call

Question

I have a table where one field is titled a secure password. In this field, there is an input button that calls an AJAX function. The AJAX function on return updates the password in the secured password field. This updates the DOM value for that field.

On this same page I have another function which uses Javascript to parse all the elements in the table into an array. The problem is the Javascript function is writing what was originally in the secure password field rather than what the AJAX function has updated it to.

It seems as though Javascript does not pull the current DOM value but the DOM value when the page was loaded. Is this the default nature of Javascript and if so how can I get around this so I can get the current values for all fields in the table, not just the page load values.

This script is written in PHP/Javascript, thanks in advance for the assistance.

Answer 1

Your Javascript function that parse all elements in the table into an array uses the document.ready function or is loaded only once when the Page is loaded.

In Vanilla JS

document.addEventListener('DOMContentLoaded', (event) => {
   //Where you wrote your function
})

Jquery

$(document).ready(function() {
    // where you have your function if you are using Jquery
});

And AJAX calls do not reload the page. That means your Javascript function does not get executed so it does not update the array with the new data from the calls.

You need your Javascript as a callback function to the success or complete property of the AJAX call.

jQuery.ajax({
    type: 'POST',
    url: ajaxurl,
    success: function() {

        parsingFunction();

    },
    error: function() {
        alert(errorThrown);
    }
});

Answer 2

Did you try using a hidden input field for storing the data instead of updating the text input? Or may be you can try using the data-xxx attributes

bests,