CODEWITHSUNDEEP
javascripthtmljqueryalert
kadina
kadina

Reputation: 5376

Javascript code is getting executed even before user presses ok on alert window

I need to remove video element, Canvas and a button on canvas before displaying an alert window and once user presses ok button on the alert window, I need to display some other elements. Currently I am facing below issues.

  1. alert window is getting displayed before deleting the button. So we just used setTimeout to delete all the elements before displaying alert window to fix this.
  2. The UI code which should be executed after user presses 'ok' button is getting executed after alert window display with out stopping for user click. I thought that the code next to alert() should not be executed until user presses Ok on alert window.

Below is Javascript code.

$("#remoteVideo").remove();
$("#localCanvas").remove();
$(".terminate_session_btn").remove();

// USED setTimeout TO DELAY THE DISPLAY OF ALERT WINDOW. WITHOUT
// setTimeout, ALERT WINDOW IS GETTING DISPLAYED BEFORE DELETING THE BUTTON.
setTimeout(function() {
    displayAndProcessUserTerminateAlertDialog();
}, 200);

function displayAndProcessUserTerminateAlertDialog() {
    socket.close();
    alert("User terminated the video call. Press 'Ok' button to create new session.");

    // BELOW CODE IS GETTING EXECUTED WITHOUT STOPPING FOR USER ACTION ON ALERT WINDOW.
    $(".main_container .item").hide();
    $("#video-session-menu").removeClass("active");
    $("#images-menu").removeClass("active");
    $(".sidebar ul li a").addClass("disabled");
}

Can anyone please help me to understand why code execution is not stopped until user presses OK on alert window and how to fix this issue.

UPDATE:

Interesting thing is if I open developer tools, the issue is not happening. If I don't open developer tools, issue is happening always. I am not sure how to fix this issue.

Upvotes: 0

Views: 371

Answers (2)

Lajos Arpad
Lajos Arpad

Reputation: 76436

Apparently browsers do not have a standard behavior for alert. As a result, you might want to implement your own alert with the behavior you prefer. You can test it here: https://jsfiddle.net/rf0jd7te/1/

HTML

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Alert Window</p>
    <p>
    <input type="button" value="OK">
    </p>
  </div>

</div>

CSS

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

JS

console.log("before alert");
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = modal.getElementsByClassName("close")[0];
// Get the OK element that closes the modal
var OK = modal.querySelector("input[type=button]");
// When the user clicks on <span> (x), close the modal
function close() {
  modal.style.display = "none";
  console.log("after alert");
}
OK.onclick = span.onclick = function() {
  close();
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    close();
  }
}
modal.style.display = "block";

Upvotes: 1

RauboLuk
RauboLuk

Reputation: 431

  1. Alert in JS is only responsible for showing message, try to use window.confirm(message) (check example use case)

Upvotes: 1

Related Questions