Mutation Observer, editing a value

jkirkerx

I wrote a function, where one can update an invoice. So the user clicks edit, the modal pops up, they change the price, and the function calls an API, updates the database, and processes the returned data. Then it calls a function within, that changes the invoice price on the page, and creates a mutation observer to detect the price change, and tallies up the invoice cost, and changes the total at the bottom. The purpose of this mutation observer, is to wait for the DOM to update the cost, and when the DOM signals it's been done, then go back to the DOM and tally up the cost, and change the total cost span element value. Everything works, but it only works if you do this twice. Like if I edit using the modal, submit, the observer doesn't fire. but if I edit the invoice again, then it works. Should I call my function within my function again? Or am I missing something here, and need to redesign the whole thing. I'm reluctant to post any code, because the function is huge, I'll post the basics here. I'd hate to have to split code up here, but might have to. move the mutation observer outside the posted function, to inside the API function call. I want to do this the correct way, so it doesn't come back on me and works every time. Calling function

function callApi() {

Prepare to send data

fetch {
.then(data => {
process data
call the function below
}
}

The function called after fetch, I can target the entire invoice within the DIV, but I targeted the single span element that contains the cost.

export function updateAnyTypeInvoiceInvoiceRecordMutationObservable(classCode, catalogId, invRecordId, jsonData, data) {

   Javascript that changes the invoice values

    const observer = new MutationObserver(mutationsList => {
        for (const mutation of mutationsList) {

            // Text content within one of the observed nodes has changed
            // You can respond to the change here
            console.log('Text content has changed:', mutation.target.textContent);

            Code that adds up all the invoice cost, and changes the total at the bottom

            // get a list of unprocessed mutations
            // should be called before disconnecting,
            // if you care about possibly unhandled recent mutations
            let mutationRecords = observer.takeRecords();
            console.log(mutationRecords);

            // After a

jkirkerx

Strange how when I post something here, it makes me rethink the problem in a different way. I concluded that I need to create the observer first, populate that observer with code to update the totals posted at the bottom, and then run the code to change the invoice. Pretty much backwards in order, but I get it now. At least I think this is correct, and it works so far, but I haven't tested enough to confirm that it doesn't conflict with anything. Makes sense now, setup the mutation observer, program the response when it fires, then run the code to update the invoice.

export function updateAnyTypeInvoiceInvoiceRecordMutationObservable(classCode, catalogId, invRecordId, jsonData, data) {

    const observer = new MutationObserver(mutationsList => {
        for (const mutation of mutationsList) {

            // Text content within one of the observed nodes has changed
            // You can respond to the change here
            console.log('Text content has changed:', mutation.target.textContent);

            Code that adds up all the invoice cost, and changes the total at the bottom

            // get a list of unprocessed mutations
            // should be called before disconnecting,
            // if you care about possibly unhandled recent mutations
            let mutationRecords = observer.takeRecords();
            console.log(mutationRecords);

            // After a reasonable time, disconnect the observer even if the element wasn't found
            observer.disconnect();

        }
    });

    // Specify the options for the observer
    const config = { childList: true, subtree: true, characterData: true };
    const targetNode = document.getElementById('invInvoiceAmount\_' + classCode + '\_' + invRecordId);  
    observer.observe(targetNode, config);

    Javascript that changes the invoice values called last

} catch (error) {
    console.log('updateAnyTypeInvoiceInvoiceRecordMutationObservable Error', error);
    alert('updateAnyTypeInvoiceInvoiceRecordMutationObservable Error: ' + error);
}

}

If it ain't broke don't fix it Discover my world at jkirkerx.com

Richard Deeming

jkirkerx wrote:

I concluded that I need to create the observer first, populate that observer with code to update the totals posted at the bottom, and then run the code to change the invoice.

Correct - the mutation observer can't notify of mutations that occurred before you started observing them. :) That leads to the question of why it seems to work the second time. Since the first observer is only disconnected once a mutation has been observed, it will still be waiting to observe a mutation when the second update is applied.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

jkirkerx

It's my first time working with this, and it took me awhile to figure out how it works. That's for confirming my thought on this!

If it ain't broke don't fix it Discover my world at jkirkerx.com