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>
LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Have you tried it without the runat="server" in the div?

Any errors in the console like "$ is undefined"?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Brant SnowCommented:
Change
 $(".lbtnRemove").click(function () {
                $(".divFade").fadeIn(4000);
            });

Open in new window


to

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

Open in new window

Brant SnowCommented:
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

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Tom BeckCommented:
Try this:
$("<%= ClientID.lbtnRemove %>").click(function(){ ... });

Open in new window

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

Open in new window

Is mostly right for accessing by ID in .Net controls - except you forgot the '#' at the front
$("#<%= ClientID.lbtnRemove %>").click(function(){ ... });

Open in new window

However, that is running around the problem - accessing by class should work as well.
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
<script type="text/javascript">
$(document).ready(function () {
  $(".radioButtonSpace tr td").css("padding", "0 10px 0 0");

  // ADD EVENT PARAMETER TO click(e)
  $(".lbtnRemove").click(function (e) {

    // PREVENT DEFAULT BEHAVIOUR OF BUTTON CLICK
    e.preventDefault();
    $(".divFade").fadeIn(4000);
  });
});
</script>

Open in new window

Michael SterlingWeb Applications DeveloperAuthor Commented:
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 HansenCommented:
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

http://www.experts-exchange.com/questions/28708599/Why-won't-my-fadeOut-work.html#a40947667
Michael SterlingWeb Applications DeveloperAuthor Commented:
Julian

     I apologise. Is there a way that I can award more points to you? Your response deserves it.
Julian HansenCommented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.