Javascript async function failing

[wajake41]

Hello forum:
I'm looking for someone smarter than me. This javascript async function is failing with a syntax error I think. I can't find what it is. Maybe someone else can I hope.

async function AJAX(msg) {
var url = "https://dev.orange-traffic-cones.com/mm5/TestProgram.php";
try {
var response = await fetch(url,
{ method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Cache-Control': 'private, no-cache, no-store, must-revalidate'
},
body: msg
}
);
if (response.ok) {
const result = await response.text();
quote_resp(result);
} else {
console.error(`An error occurred, status: ${response.status}`);
}
}

catch (error) {
if (error instanceof TypeError) {
console.error('Network error:', error);
} else {
console.error('Other error:', error);
}
}
}

[alphabet]

It could be a few things.

1. Is msg a JSON object?
2. On line 2 you may want to append a timestamp to prevent browser caching. var url = "https://dev.orange-traffic-cones.com/mm5/BASKquote5.php" + Date.now()"
3. Line 10 - body should to be stingified: body: JSON.stringify(msg)
4. There could be a problem with the php script. What data type is it expecting.
5. Your sending text to a quote_resp function. Should it be a JSON object?
6. Line 15 is calling a quote_resp function. You may want to call the AJAX(msg) and return the result to a thenable function.

let has_quote_response = await AJAX(msg).then( (result) => quote_resp(result));

Use console.log() to log values along the way to see what errors you are getting.

Examples:
console.log('body: msg : ', msg);
console.log('result: , result);

I hope that gives you a few ideas to test.

[wajake41]

Hello forum:
Now that Alphabet has helped me correct my AJAX function, I need someone to show me how to execute it async from the function that calls it.
Happy to pay anyone who can do this.

Larry

[alphabet]

You'll need to add an id attribute to the form tag.

// using querySelectorAll fails silently if no form by #id
const forms = document.querySelectorAll('#form_id');
// forEach doesn't work on old browsers -  use polyfill
forms.forEach(form => form.addEventListener('submit', event => {
event.preventDefault();

// run async code block

event.submit();
})

How did you fix your AJAX function for future reference?

[wajake41]

Still lookin for a solution on how to execute the AJAX function async. The program is called using await fetch but javascript exits the function before the fetch completes. Another developer has assisted me to no avail. The odd thing is that chapgpt gave me an async function pausing javascript. That doesn't work either. Does async really work? Ever seen it actually work?

[alphabet]

I think this async / await is an interesting option for PreAction.

Here are the page life cycles and where the variables live. The async/await 'PreAction' is highlighted in blue. I hope this helps.

1. OCST page is parsed line by line and rendered. Any SMT variable assignments are spawned.
2. User fills out the form
3. OCST form is submitted
4. A listener is bound to the submit event which prevents its default behavior and allows an init function to call your AJAX php endpoint
5. The AJAX fetch awaits for the php endpoint to be returned
6. You need a thenable function which passes the response to your quote_resp function
7. The quote_resp function writes the reponses to the hidden input values which are passed to the OSEL page as global variables
8. After quote_resp returns you submit() the form
9. The miva ORDR or other Action is run
10. POST request is made for g.Screen (typically OSEL)
11. OCST variables are destroyed
12. OSEL environmental variables are spawned
13. OSEL page is parsed lined by line and rendered. Any SMT variable assignments are spawned.
14. You don't need the miva_sleep function as the async / await has already run

[wajake41]

Thank you Alpha: Keeping the life cycles on hard copy for future reference.
Cheers,
Larry