JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

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

<button id="postButton">Send POST Request</button>

<script>
document.getElementById('postButton').addEventListener('click', function() {
  const postData = {
    key1: 'value1',
    key2: 'value2',
    // Add more data as needed
  };

  const wixEndpoint = 'https://www.media-junkie.com/_functions/filter';

  fetch(wixEndpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(postData),
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json(); // Assuming the response is JSON
    })
    .then((responseData) => {
      console.log('Response Data:', responseData);
      // Handle the responseData as needed
    })
    .catch((error) => {
      console.error('Error:', error);
      // Display or handle the error appropriately in your iFrame
      const errorElement = document.getElementById('errorDisplay');
      errorElement.innerHTML = 'Error: ' + error.message;
    });
});
</script>

<!-- Add an element to display errors -->
<div id="errorDisplay"></div>

</body>
</html>