Why doesn't the function get called?

usernamebeiginerr · Nov 20, 2023

In a lab there is this part where i should call a function deployed in Azure from an HTML page, here's the question:

Create a simple HTML page that will send a POST request to your function deployed in Azure using the Fetch Javascript API and display its result in the page. Pass any parameters needed to your function.

I wrote the code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch Function Example</title>
</head>
<body>

<h1>Fetch Function Example</h1>

<label for="name">Enter Name:</label>
<input type="text" id="name" name="name">
<button onclick="callAzureFunction()">Call Azure Function</button>

<div id="result"></div>

<script>
async function callAzureFunction() {
const functionUrl = 'https://your-function-app-name.azurewebsites.net/api/your-function-name';

const name = document.getElementById('name').value;

const requestBody = {
name: name
};

try {
const response = await fetch(functionUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody),
});

if (response.ok) {
const result = await response.json();
document.getElementById('result').innerText = Function Result: ${JSON.stringify(result)};
} else {
document.getElementById('result').innerText = Error: ${response.status} - ${response.statusText};
}
} catch (error) {
console.error('Error:', error);
document.getElementById('result').innerText = 'An error occurred while calling the function.';
}
}
</script>

</body>
</html>

and i replaced the URL with my function's URL, so when i execute the file it allows me to enter one argument which is the name but then an error "An error occurred while calling the function." shows up when i click on call function button. Can anyone please correct this code and explain to me what was wrong? I appreciate it.

Chaos · Jan 27, 2024

Your code looks mostly correct, but it seems like you have a small syntax error in the line where you update the result element. The line:

JavaScript:

document.getElementById('result').innerText = Function Result: ${JSON.stringify(result)};

should be wrapped in backticks for template literals, like this:

JavaScript:

document.getElementById('result').innerText = `Function Result: ${JSON.stringify(result)}`;

Additionally, it's a good practice to properly handle the case when the response from the server is not in JSON format. You can add a check for the Content-Type header to ensure that it's a JSON response before trying to parse it. Here's the modified code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch Function Example</title>
</head>
<body>

<h1>Fetch Function Example</h1>

<label for="name">Enter Name:</label>
<input type="text" id="name" name="name">
<button onclick="callAzureFunction()">Call Azure Function</button>

<div id="result"></div>

<script>
async function callAzureFunction() {
const functionUrl = 'https://your-function-app-name.azurewebsites.net/api/your-function-name';

const name = document.getElementById('name').value;

const requestBody = {
name: name
};

try {
const response = await fetch(functionUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody),
});

if (response.ok) {
const contentType = response.headers.get('content-type');
if (contentType && contentType.includes('application/json')) {
const result = await response.json();
document.getElementById('result').innerText = `Function Result: ${JSON.stringify(result)}`;
} else {
document.getElementById('result').innerText = 'Error: Response is not in JSON format';
}
} else {
document.getElementById('result').innerText = `Error: ${response.status} - ${response.statusText}`;
}
} catch (error) {
console.error('Error:', error);
document.getElementById('result').innerText = 'An error occurred while calling the function.';
}
}
</script>

</body>
</html>

Make sure to replace 'https://your-function-app-name.azurewebsites.net/api/your-function-name' with the actual URL of your Azure Function. With these changes, your code should work more reliably and provide better error handling.

Issue with passing fetched data to POST form. How can I?	0	Jul 23, 2023
I dont get this. Please help me!!	2	Jan 24, 2023
What is the error in this code , file not fetch and not fetched in the basemap, not vissible in the browser	1	Jul 26, 2023
An unknown bug doesn't allow the quotes app to work. What's the issue?	3	Apr 23, 2023
I'm getting TypeError: response.json is not a function error. Can someone please point me in the right direction.	1	Mar 10, 2021
Request data is empty	0	Nov 29, 2023
All CRUD operations work except POST. Why?	2	May 28, 2023
I need help making a zooming function	11	Dec 14, 2021

Why doesn't the function get called?

usernamebeiginerr

Chaos

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads