Success or error toast after running function in Javascript

Question

I have two functions which look like this:

function functionOne(par1, par2, par3) {
// this functions patches using an api, re-usable
}

function functionTwo(par2) {
functionOne(par1, par2, par3);
functionOne(par1, par2, par3);
functionOne(par1, par2, par3);
functionOne(par1, par2, par3);
}

This works as intended, but I want to give the user some feedback if he presses the button and functionTwo runs successfully or gives an error.

I found this: https://www.w3schools.com/howto/howto_js_snackbar.asp which is what I want, rather than a pop-up, but is it possible to display this after success or error and if so, how? Thanks!

I'm not sure what you are asking? Are you looking to know whether or not you can integrate it (the answer is yes) or are you looking for guidance on how to set it up ? — Noah Boegli, Apr 08 '20 at 13:10

score 1 · Accepted Answer · answered Apr 08 '20 at 13:21

Take a look at the following snippet:

The HTML and CSS are the code extract from the W3C example. The JS function showToast() is based on their example but takes an optional parameter with a default value and appends that parameter value to the toast.

I have made a mini example of an API (yourApiFuncton()) call to demonstrate the use.

Of course this is only a basic example and you can work from there to get something fancier.

function yourApiFunction(){
  
  //Do your api calls, the "error" variable is only set to demonstrate the use of the success/error message
  let error = false;
  
  if(error){
    showToast("Oh no...");
  }else{
      showToast("Hell yeah");
  }
}

function showToast(content = "Unknown error") { //You can change the default value
  // Get the snackbar DIV
  var x = document.getElementById("snackbar");
  
  //Change the text (not mandatory, but I think you might be willing to do it)
  x.innerHTML = content;

  // Add the "show" class to DIV
  x.className = "show";

  // After 3 seconds, remove the show class from DIV
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

//Simulating a call to your API
yourApiFunction();

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

<!-- The actual snackbar -->
<div id="snackbar">Some text some message..</div>

Thanks! Perhaps a stupid question since I am new to programming, but how does the program know wether there was an error? — narodel, Apr 08 '20 at 13:31
This depends on how your API is built. Generally the API should return a `200` HTTP code on success or another code if any further action is needed (e.g.: error handling). If you need help with [XHR](https://www.w3schools.com/xml/xml_http.asp) and `HTTP` codes I invite you to open another question as the principle of stackoverflow is: one issue = one question ;) Also, if the answer helped you, please [accept and upvote it](https://stackoverflow.com/help/someone-answers) :) Thanks! — Noah Boegli, Apr 08 '20 at 13:36
you literally saved me from getting fired from the job (Thanks Brother)♥ — Chitrang Sharma, Jun 10 '21 at 15:54

score 0 · Answer 2 · answered Jul 07 '20 at 18:21

Try with ToastMaker library.

$('#successbutton').click(() =>
  ToastMaker("Success", 5000, {
    styles: {
      backgroundColor: 'green'
    }
  })
);

$('#failbutton').click(() =>
  ToastMaker("Failure", 5000, {
    styles: {
      backgroundColor: 'red'
    }
  })
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">

<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>


<button id="successbutton"> Success Toast</button>
<button id="failbutton"> Fail Toast</button>

Success or error toast after running function in Javascript

2 Answers2

Check documentation for more examples.