fetch url

[craftzneko]

I dont seem to be able to get the result back from this request, is this possible?

I am trying to get a button that when pressed shows an animation and sends a GET request to an API with some params

sendApiRequest = () => {
  const theButton = document.querySelector(".button");
  theButton.classList.add("button--loading");

  const userEmail = "test";
  const deviceId = "123";
  const url = `APIADDRESS&UserEmail=${userEmail}&DeviceID=${deviceId}`;

  fetch(url)
    .then((response) => {
      if (response.status === 200) {
        theButton.classList.remove("button--loading");
        theButton.classList.add("button--success");
        setTimeout(() => {
          theButton.classList.remove("button--success");
        }, 2000);
      } else {
        theButton.classList.remove("button--loading");
        theButton.classList.add("button--error");
        setTimeout(() => {
          theButton.classList.remove("button--error");
        }, 2000);
      }
    })
    .catch((error) => {
      console.error(error);
    });
};

SanitiseHTML is off

[craftzneko]

Problem was elsewhere

[mikhail-vl]

@craftzneko Thank you for providing the solution. What was the issue?

Have you looked at the Data Manipulation panel? It may works better than Dynamic Text for your use case.

[mikhail-vl]

@craftzneko Do you mind to share the screenshot? I would like to share it with the community in the upcoming release blog.

[craftzneko]

Thanks I can try that out tomorrow. My issue was my own mistake with my styling which should have changed after a click event. I did log another issue as I couldn't figure out how to take a data field variable

[craftzneko]

I was using this button https://codepen.io/valentingalmand/pen/MYMZZK

Excuse the messy JS code that was me trying some things

JS

sendApiRequest = async () => {

  const Email = replaceVariables("${__user.login}");
  console.log(Email.toUpperCase())
  const DeviceID = replaceVariables("${__data.fields.AzureDeviceID}");
  console.log(DeviceID.toUpperCase())

  const theButton = document.querySelector(".button");
  theButton.classList.add("onclic");

  const url = `https://APIADDRESS&UserEmail=${Email}&DeviceID=${deviceId}`;

  try {
    console.log("Sending API request...");
    const response = await fetch(url);
    console.log("API response received:", response);
    if (response.status === 200) {
      console.log("API request successful!");
      theButton.classList.remove("onclic");
      theButton.classList.add("validate");
      setTimeout(() => {
        console.log("Removing validate class...");
        theButton.classList.remove("validate");
      }, 2000);
    } else {
      theButton.classList.remove("onclic");
      theButton.classList.add("error");
      setTimeout(() => {
        theButton.classList.remove("error");
      }, 2000);
    }
  } catch (error) {
    console.error(error);
  }
};

CSS

@charset "UTF-8";

* {
  font-family: "Roboto", sans-serif;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -65px;
  margin-top: -20px;
  width: 130px;
  height: 40px;
  text-align: center;
}

button {
  outline: none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius: 40px;
  background: #fff;
  border: 2px solid #1ECD97;
  color: #1ECD97;
  letter-spacing: 1px;
  text-shadow: 0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s ease;
}

button:hover {
  color: white;
  background: #1ECD97;
}

button:active {
  letter-spacing: 2px;
}

button:after {
  content: "";
}

.onclic {
  width: 40px;
  border-color: #bbbbbb;
  border-width: 3px;
  font-size: 0;
  border-left-color: #1ECD97;
  -webkit-animation: rotating 2s 0.25s linear infinite;
  animation: rotating 2s 0.25s linear infinite;
}

.onclic:after {
  content: "";
}

.onclic:hover {
  color: #1ECD97;
  background: white;
}

.validate {
  font-size: 13px;
  color: white;
  background: #1ECD97;
}

.validate:after {
  font-family: "FontAwesome";
  content: "";
}

@-webkit-keyframes rotating {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

HTML

<button type="button" class="button" onclick="this.classList.toggle('onclic'); sendApiRequest();">
        <span class="button__text">Trigger Scan</span>
    </button>