Hiding a div with JQuery

Question

My div is inside a user control, it shows a "successful" message after a gridview update. I don't want that div to be persistent and want to hide it after a few seconds without refreshing the page. Here is my code:

<div id="MsgInfo" runat="server"  class="divMsg" visible="false" /></div>

In my usercontrol I added the link to the script file:

<script type="text/javascript" src="../HideMsg.js"></script>

The script:

$(function () {
    setTimeout(function () { 
       $("#MsgInfo").fadeOut(1500); 
    }, 
    5000);
});

I don't know what is missing there but the message can't fade out or disappear.

I went through a lot of similar question and solution but still can't hide the div with Jquery.

Still not working, the he div remains persistent and does not fade out. Could this be because the update button is in the edit mode of the formview in my user control? — , Apr 29 '22 at 01:46

score 1 · Answer 1 · answered Apr 28 '22 at 04:55

Check this working example: codepen

Inside update click you need to use setTimeout

$("#showDiv").click(function () {
   $("#MsgInfo").fadeIn(1500);

   setTimeout(function () {
     $("#MsgInfo").fadeOut(1500);
   }, 5000);
});

CSS:

#MsgInfo {
  display: none
}

Karan · Answer 2 · 2022-04-28T04:53:58.213

Use class name instead of id. The reason is you are using asp.net control GridvView with runat server. So it will have updated value for id (try inspecting element on browser and check id). So, instead of using id selector try using class selector. Try like below.

$(function () {
    setTimeout(function () { $(".divMsg").fadeOut(1500); }, 5000);
});

You can also refer this answer here : Getting ID from asp.net runat server in jQuery

score 0 · Answer 3 · answered Apr 28 '22 at 04:57

If #MsgInfo div comes after page load then try to add script inside #MsgInfo div.

 <script>   
 const myTimeout = setTimeout(myMsgInfo, 5000);
    
    function myMsgInfo() {
      var x = document.getElementById("MsgInfo");
      x.style.display = "none";
    }
 </script>

score 0 · Answer 4 · answered Apr 28 '22 at 04:57

0

The problem is in your div closing tag use <div>..</div> not <div/>...</div>

$(function () {
setTimeout(function () { $("#MsgInfo").fadeOut(1500); }, 5000);
});

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

<div id="MsgInfo" runat="server"  class="divMsg" visible="false">It will hide after 5 seconds</div>

answered Apr 28 '22 at 04:57

Mateen

503
2
10

Made the correction to my div tag, but it is not working. Could this be because the update button is in the edit mode of the formview in my user control. The div is outside the formview. – Apr 29 '22 at 01:50
Then please check your JS file it should be at the bottom of your HTML. – Mateen Apr 29 '22 at 05:01

Hiding a div with JQuery

4 Answers4