asked on

Why won't my fadeOut work?

Below is my .css, jQuery, and HTML markup. I'm trying to get the div to fadeIn (and out eventually), but when it gets to the line of code in my jQuery that is supposed to make the div fade in absolutely nothing happens? Why is this and how do I get this to work properly? I need it to fade in for and then fade out.

<style type="text/css">
.divFade {
display: none;
}
</style>

<script type="text/javascript">
$(document).ready(function () {
$(".radioButtonSpace tr td").css("padding", "0 10px 0 0");
$(".lbtnRemove").click(function () {
$(".divFade").fadeIn(4000);
});
});
</script>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<div runat="server" class="divFade">
<p>
<span id="confirmationMessage">Removal complete!</span>
</p>
</div>
.
.
.
<div class="row">
<div class=" col-xs-12 col-sm-offset-4">
<asp:Button ID="lbtnRemove" runat="server" CssClass="btn btn-primary lbtnRemove" Text="Remove" HeaderStyle-CssClass="visible-xs visible-sm visible-md hidden-lg" CommandName="Remove" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>">
</asp:Button>
</div>
</div>
</Content>

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Brant Snow

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Brant Snow

If that doesnt work, which i think it will, i think your jquery is not recognizing the CSSClass attribute

I removed the asp code to get this below

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
   <style type="text/css">
        .divFade {
            display: none;
        }
     </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".radioButtonSpace tr td").css("padding", "0 10px 0 0");
            
			$(".lbtnRemove").click(function () {
				
                $(".divFade").fadeIn(4000);
            });
        });
    </script>
<body>

    <div runat="server" class="divFade">
        <p>
            <span id="confirmationMessage">Removal complete!</span>
        </p>
    </div>
.
.
.
                                                        <div class="row">
                                                            <div class=" col-xs-12 col-sm-offset-4">
                                                                <div class="lbtnRemove">Remove</div>
																
                                                            </div>
                                                        </div>
</Content>

</body>
</html>

Open in new window

This works below so there are a couple different possibilities

1. Your jquery version could be wrong (prob unlikely).
2. There is an error in your javascript somewhere else that is stopping the whole process (maybe) check your console for this to see if you get an error
3. My bet is the event is not happening. If you change

$(".lbtnRemove").click(function () {
                $(".divFade").fadeIn(4000);
            });

Open in new window

to this

$(".lbtnRemove").click(function () {
alert("HIT");                
$(".divFade").fadeIn(4000);
            });

Open in new window

I am guessing you will not get that hit, you should try that, if an alert pops up you know that the event is being triggerred and it is likely a jquery version issue or other javascript error.

It also could be that based upon whatever framework your using it is changing the class / ids around. Wicket in java is notorious for this. You can use the inspector tool in firefox to look at the HTML that is produced by your asp and see if it still has the right class names.

Another easy thing to do would be to forgo the class names or ids on the asp elements and wrap them with raw HTML that you know you can control like the code below. This is probably your best best

JAVASCRIPT

$("#mybutton").click(function () {
				
                $(".divFade").fadeIn(4000);
            });

Open in new window

HTML

<div id="mybutton">
<asp:Button ID="lbtnRemove" runat="server" CssClass="btn btn-primary lbtnRemove" Text="Remove" HeaderStyle-CssClass="visible-xs visible-sm visible-md hidden-lg" CommandName="Remove" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>">
                                                                </asp:Button>
</div>

Open in new window

Tom Beck

Try this:

$("<%= ClientID.lbtnRemove %>").click(function(){ ... });

Open in new window

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michael Sterling

ASKER

I awarded points to everyone, because the ultimate cause of my issue was that the page was doing a post back and wiping out what my jQuery would've / could've been doing. Thank you to everyone.

Julian Hansen

Please refer my last post

I am guessing that the button click is forcing a form submit so that the page is refreshing and cancelling out the jQuery fadein. To fix do this

https://www.experts-exchange.com/questions/28708599/Why-won't-my-fadeOut-work.html?anchorAnswerId=40947667#a40947667

Michael Sterling

ASKER

Julian

I apologise. Is there a way that I can award more points to you? Your response deserves it.

Julian Hansen

No problem,

You can ask to have the question re-opened by clicking the Request Attention link at the bottom of the original question - and ask a Mod to open the question for you.