Click here to Skip to main content
15,844,387 members
Home / Discussions / JavaScript
   

JavaScript

 
AnswerRe: dropdown Pin
Richard Deeming4-Dec-23 2:45
mveRichard Deeming4-Dec-23 2:45 
AnswerRe: dropdown Pin
Andre Oosthuizen11-Dec-23 8:27
mveAndre Oosthuizen11-Dec-23 8:27 
Questionjavascript alert() not showing Pin
Ashish Tiwari Aug20233-Dec-23 7:00
Ashish Tiwari Aug20233-Dec-23 7:00 
AnswerRe: javascript alert() not showing Pin
Dave Kreskowiak3-Dec-23 10:07
mveDave Kreskowiak3-Dec-23 10:07 
QuestionInserting HTML from a fetch gives me extra blank rows..? Pin
William Morris 202124-Oct-23 19:58
William Morris 202124-Oct-23 19:58 
AnswerRe: Inserting HTML from a fetch gives me extra blank rows..? Pin
enhzflep28-Oct-23 0:00
enhzflep28-Oct-23 0:00 
AnswerRe: Inserting HTML from a fetch gives me extra blank rows..? Pin
Richard Deeming30-Oct-23 0:16
mveRichard Deeming30-Oct-23 0:16 
GeneralRe: Inserting HTML from a fetch gives me extra blank rows..? Pin
Richard MacCutchan30-Oct-23 1:53
mveRichard MacCutchan30-Oct-23 1:53 
QuestionInserting HTML from a fetch gives me extra blank rows..? Pin
William Morris 202124-Oct-23 9:31
William Morris 202124-Oct-23 9:31 
QuestionMoving a <div> from right edge of screen to left slowly? Pin
Blake McKenna27-Sep-23 18:51
Blake McKenna27-Sep-23 18:51 
AnswerRe: Moving a <div> from right edge of screen to left slowly? Pin
Steve Raw21-Oct-23 18:39
professionalSteve Raw21-Oct-23 18:39 
QuestionJasmine - monitor all calls of a method? Pin
NoMoreStackOverflow22-Sep-23 1:25
NoMoreStackOverflow22-Sep-23 1:25 
AnswerRe: Jasmine - monitor all calls of a method? Pin
jschell23-Sep-23 15:25
jschell23-Sep-23 15:25 
GeneralRe: Jasmine - monitor all calls of a method? Pin
NoMoreStackOverflow23-Sep-23 21:33
NoMoreStackOverflow23-Sep-23 21:33 
AnswerRe: Jasmine - monitor all calls of a method? Pin
jschell25-Sep-23 9:10
jschell25-Sep-23 9:10 
GeneralRe: Jasmine - monitor all calls of a method? Pin
NoMoreStackOverflow25-Sep-23 16:29
NoMoreStackOverflow25-Sep-23 16:29 
QuestionMutation Observer, editing a value Pin
jkirkerx15-Aug-23 12:49
professionaljkirkerx15-Aug-23 12:49 
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 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);<br />
        observer.observe(targetNode, config);

        Perhaps, call this function again here?

    } 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

AnswerRe: Mutation Observer, editing a value Pin
jkirkerx15-Aug-23 13:07
professionaljkirkerx15-Aug-23 13:07 
GeneralRe: Mutation Observer, editing a value Pin
Richard Deeming15-Aug-23 22:36
mveRichard Deeming15-Aug-23 22:36 
GeneralRe: Mutation Observer, editing a value Pin
jkirkerx16-Aug-23 7:33
professionaljkirkerx16-Aug-23 7:33 
AnswerRe: C++ Issue: Forgotten Virtual Destructor - Need Help Resolving! Pin
Richard MacCutchan15-May-23 2:53
mveRichard MacCutchan15-May-23 2:53 
GeneralRe: C++ Issue: Forgotten Virtual Destructor - Need Help Resolving! Pin
Richard Deeming15-May-23 6:25
mveRichard Deeming15-May-23 6:25 
Question[Learning/Beginner] Confused about await, async and fetch. Pin
Maximilien2-May-23 4:09
Maximilien2-May-23 4:09 
AnswerRe: [Learning/Beginner] Confused about await, async and fetch. Pin
Jeremy Falcon2-May-23 6:07
professionalJeremy Falcon2-May-23 6:07 
GeneralRe: [Learning/Beginner] Confused about await, async and fetch. Pin
Maximilien2-May-23 11:27
Maximilien2-May-23 11:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.