CODEWITHSUNDEEP
javascriptjqueryasp.net
user2912928
user2912928

Reputation: 170

Unable to make ASP.NET control button fade out with JQuery

I have a simple enough problem: I have an ASP.NET control button and I want to make it fade out and then call some function (such as an alert) using JQuery. Here is what I have so far:

ASP Code for the Button:

<div id="begin">
        <span id="startButtonSpan">
            <asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/>
        </span>
    </div>

JavaScript:

function startButtonClick()
{
    $("#startButtonSpan > input").fadeOut(500, callAlert());
}

function callAlert()
{
    alert("Made it here...");
}

When I click the button, the alert displays but the page does not even seem to try to perform the fadeOut. When I close the alert, the button is still there, staring at me.

Can anyone see any mistakes or does anyone have any suggestions on how I might be able to achieve the intended goal of fading out my button? Fadeout is really just my way of testing whether I can manipulate ASP controls using jQuery, so more than just the simple fadeOut, this is me trying to learn how to do that.

I tried a slightly more simple jQuery call using the code below, but it does not seem to work either:

ASP Portion:

<div id="begin">
        <span id="startButtonSpan">
            <asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/>
        </span>
    </div>

    <div id="jQueryTest" style="display:none;">
        Block for testing jQuery.
        <h1 id="testMessage">Child element for the ASP div.</h1>
    </div>

Javascript Portion:

function startButtonClick()
{
    $("#jQueryTest").css("display", "block");
    $("#jQueryTest").show();
}

For this example, the text does display, but it immediately disappears again.

Any help or suggestions as to what I might be doing wrong would be greatly appreciated.

Upvotes: 2

Views: 1473

Answers (4)

Jacob T. Nielsen
Jacob T. Nielsen

Reputation: 2978

The first example has 2 problems.

1. You should write

$("#startButton").fadeOut(500, callAlert);

and not

$("#startButton").fadeOut(500, callAlert());


2. For ASP.NET you must set ClientIDMode="Static" ortherwise asp.net will alter your id.

<asp:Button ID="startButton" ClientIDMode="Static" ... OnClientClick="startButtonClick()"/>

Upvotes: 1

Lucian
Lucian

Reputation: 4001

How about the fact that your code is fine (although other answers here should be considered) but your button is making a post back to the server and simply your browser does not have enough time to render the fade effect.

To test this, add a return false; to the OnClientClick property. This will of course cancel your action on the server but you will obtain the fade effect:

 <asp: Button ... OnClientClick="startButtonClick();return false;"></asp:Button>

To work around this and still submit your request, you can try to use the ASP.NET __doPostBack method in JavaScript

ASP.NET:

<asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick(this);return false;"/>

JavaScript:

function startButtonClick(button)
{
    $("#startButtonSpan > input").fadeOut(500, function(){__doPostBack(button.name, "")});
}

The __doPostBack method takes two arguments: the name of the control that is doing the postback and a postback argument that can be use to send more info on the server. In the case of the asp:Button, the name of the button should be sufficient to send the request without a problem.

Using this technique you will fade the button on the client and also trigger the action on the server. I cannot guarantee that this exact code will work (I don't have access to a dev environment right now) but you should get the idea.

Upvotes: 0

Code Maverick
Code Maverick

Reputation: 20415

If I could, I would like to provide another answer for those that use MasterPages and find that you can't always use $("#<%= SomeContentControl.ClientID %>") when working with Content controls.

What I do is set the MasterPage ID in my Init() like this:

protected void Page_Init( object sender, EventArgs e ) 
{
    // this must be done in Page_Init or the controls 
    // will still use "ctl00_xxx", instead of "Mstr_xxx"

    this.ID = "Mstr"; 
}

Then, you can do something like this with your jQuery:

var masterId = "Mstr",
    $startButton = getContentControl("startButton"),
    $message = $("#jQueryTest");

function getContentControl( ctrlId )
{
    return $("#" + masterId + "_" + ctrlId);
}

function hideStartButton()
{
    $startButton
        .stop(true, true)
        .fadeOut("slow", showMessage);
}

function showMessage()
{
    $message
        .stop(true, true)
        .fadeIn("slow");
}

$startButton.on("click",  hideStartButton);

Here is a jsFiddle that has the Mstr_ prefix already inserted as if ASP.NET rendered it.

Upvotes: 0

Venkata Krishna
Venkata Krishna

Reputation: 15112

Use the class as a selector $('.startButton') instead of the ID since ASP.Net controls change their IDs dynamically when rendered by appending its Page & Control information.

$(".startButton").fadeOut(500, callAlert);

Or, if you're adamant about using the ID, here is another way to handling the selector,

$("#<%=startButton.ClientID %>")

Or, as Jacob suggested in his answer, you could ClientIDMode="Static", but this works only if your application is .Net 4.0 or above.

Also, use CssClass instead of class

<asp:Button ID="startButton" Csslass="startButton" runat="server" Text="Click Me!" />

Upvotes: 3

Related Questions