jquery hide and confirm window not working in Chrome

Question

jquery hide and confirm window not working in Chrome

729 views Asked by Albert Shin At 23 November 2024 at 19:00

When I use hide and confirm in html. The hide is not working properly in Chrome only. When the confirmation window is shown, the "aa" element is not hidden. IE and FF is working fine.
Any kind of suggestion is appreciated.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<body>
    <a id='aa' href='javascript:hideit();'>try it</a>
    <script type='text/javascript'>
        function hideit() {
            $('#aa').hide();
            if (!confirm('hide?')) {
                $('#aa').show();
                return;
            }
            $('#aa').show();
        }
    </script>
</body>
</html>

Original Q&A

There are 4 answers

**Mukesh Parmar** · Answer 1 · 2016-12-14 04:15:36

Please check following code, it works properly in all browsers :

 <html>
 <head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >
 </script>
 </head>
 <body>
      <a id='aa' href='javascript:hideit();'>try it</a>
      <script type='text/javascript'>
           function hideit() {           
               if (confirm('hide?')) {
                 $('#aa').hide();                
               }
              else
              {
                $('#aa').show();
              }
           }
     </script>
</body>
</html>

Thanks...

**JD Savaj** · Answer 2 · 2021-10-19 05:56:04

Try the below code it's working properly.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<body>
    <a id='aa' href='javascript:hideit();'>try it</a>
    <script type='text/javascript'>
        function hideit() {
            $('#aa').show();
            if (confirm('hide?')) {
                $('#aa').hide();
                return;
            }
            
        }
    </script>
</body>
</html>

**Neeraj** · Answer 3 · 2021-10-19 06:54:01

please check this link Here is the working fiddler link element hide on alert it's not working StackOverflow editor.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <a id='aa' href='javascript:hideit();'>try it</a>
    <script type='text/javascript'>
        function hideit() {
            $('#aa').hide();
            setTimeout(function () {
                if (!confirm('hide?')) {
                    $('#aa').hide();
                    return;
                }
            }, 100);
        }
    </script>
</body>
</html>

**Joseph Ajibodu** · Answer 4 · 2021-10-24 10:41:44

The hide function is actually working normally. The confirm dialog is the cause of the issue.

The issue occurred because after calling the hide function (while the browser is repainting itself to hide the element), the confirm dialog is triggered immediately which stops everything till it gets response. Hence, the hide function didn't run completely until after the confirm dialog.

Solution: The jQuery hide function takes a callback function see doc. So we would call the confirm dialog only after the element is hidden.

.hide( duration [, easing ] [, complete ] ) 
// Default duration = 400, easing = swing

Your can pass a duration of 100 if you want it to hide fast though

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<body>
    <a id='aa' href='javascript:hideit();'>try it</a>
    <script type='text/javascript'>
        function hideit() {
            $('#aa').hide(100, function () {
                if (!confirm('hide?')) {
                    $('#aa').show();
                    return;
                }
                $('#aa').show();
            });
        }
    </script>
</body>
</html>

TechQA.

jquery hide and confirm window not working in Chrome

There are 4 answers

Related Questions in JQUERY

Related Questions in HIDE

Related Questions in CONFIRM

Popular Questions

Popular Tags

Trending Questions