Javascript: Why sometimes alert() does not work but console.log() does?

Question 1

This is a very common problem, and everyone has faced this problem atleast once. The reason alert() does not work is because previously you have checked "prevent this page from creating additional dialoug" checkbox.

lets take a look at this code.

<script type="text/javascript">

var js_name = ['elem1', 'elem2']

 for (var i = 0; i < js_name.length; i++) {
    alert(js_name[i]);
 };

</script>

There will be two alert boxes if you run the code. If you check the "prevent this page from creating additional dialoug" checkbox and then refresh the page again you won't get alert box ever again.

Solution is you need to close that webpage and reopen again in the browser(don't need to close the entire browser). I am assuming you are using chrome. Internet Explorer or FireFox doesn't have this checkbox feature.

Question 2

If you override alert function so it won't work

alert = function() 
{
 ...
};

alert('hello') // won't show any alert

Question 3

To my knowledge alert() is always shown unless it is repetitive in which case you are asked if you want to continue showing alerts.

I suppose the specifics on how this is handled depends on your browser. Care to share any more details? :)

Question 4

This also happens in ColdFusion. If you use anywhere after the script tag a cflocation tag (instead of location.href) the alert will not show.

Question 5

This can also happen in Firefox if you have Dev Tools open and Responsive Design Mode enabled. It sounds like it's a bug.

Question 6

In Firefox: go to Options -> Content and uncheck "block pop-up windows" check box. Restart browser.

Question 7

Another reason why alert, confirm, and prompt may be ignored by the browser, is if the document is in an iframe that has a sandbox-attribute without allow-modals in its value.

For example, Firefox silently ignores this, however Chromium shows a warning.

Question 8

If you try to execute javascript alert function in a Chrome browser address URL, you will not get the message if the the tab has no page previously loaded. You will get the alert box only if it is not a fresh tab. If there exists a web page that is previously loaded, and then you try to run the javascript in the address bar, you will get the expected result. Hope it clarifies this difficult to detect behavior in Chrome.

Question 9

If you have a location.reload() after the alert() function as shown below, JavaScript somehow skips the alert and reloads the page.

     $.ajax({
            url:'xxx',
            type : 'POST',
            data : datavalues,
            dataType: 'json',
            contentType: 'application/json',
            success: function(response){
                if(response.status == '200')
                    {
                    alert("updated");
                    }
                    
            }
        });
     
     location.reload();

To tackle this situation, I moved the reload function into the if block and this solved the issue.

    $.ajax({
        url:'xxx',
        type : 'POST',
        data : datavalues,
        dataType: 'json',
        contentType: 'application/json',
        success: function(response){
            if(response.status == '200')
            {
                alert("updated");
                location.reload();
            }

        }
    });

Question 10

I have a similar problem here, when I replace the console log with "alert" it is not working but console.log does work.

The not working code is :

request(options, function(error, response, body) { // Requesting API

    var statusCode = response.statusCode;

    if(statusCode === 200){
      alert("Success");
    } else {
      alert(error);
    }

and the working code is:

request(options, function(error, response, body) { // Requesting API

    var statusCode = response.statusCode;

    if(statusCode === 200){
      console.log("Success");
    } else {
      console.log(error);
    }