CODEWITHSUNDEEP
c#jqueryasp.net
The Vanilla Thrilla
The Vanilla Thrilla

Reputation: 1995

How can I have a button be disabled with jQuery but also run server code once it's been clicked?

I have a button that will execute a stored procedure. After it's been clicked, I want it disabled so that the user can't click it multiple times. However, once it's been clicked, I also want to run some C# on the server side through an onclick event. As of right now, all my code does is disable the button, but then it won't run the server side stuff. Can this be achieved? Here's my jQuery:

 $("#btnGenerate").click(function () {
        $(this).attr("disabled", true).val("Generating...");
    });

Upvotes: 3

Views: 2789

Answers (5)

Pankaj
Pankaj

Reputation: 10095

Place a Hidden Button in your form.

Mark Up

<asp:Button ID="Button1" 
    style="display:none;position:absolute;left:-1000px;width:0px" 
    runat="server" Text="Click me" OnClick="ClickIt"/>

protected void ClickIt(object sender, EventArgs e)
{

}

Disable your button as you are already doing.

JavaScript

$("#btnGenerate").click(function () {
        $(this).attr("disabled", true).val("Generating...");
    });

Now, perform the click of your hidden button on clicking the original button. Move your code in the Hidden button handler.

JavaScript

$("#btnGenerate").click(function () {
        $(this).attr("disabled", true).val("Generating...");
        document.getElementById('<%= Button1.ClientID').click();
    });

Finally, you can enable your button again in the definition of your Hidden Button. Hope this will help you

Upvotes: 0

SmithMart
SmithMart

Reputation: 2801

if you are going to change anything on the page, like the confirmation text you mentioned, then you can create a div where you want the confirmation to be

<div id="confirmmessage">

</div>

Then set your javascript like so:

<script type="text/javascript">
   function dowork() {
        $("#confirmmessage").load('/home/myfunction');                        
    }       
</script>

then in the home controller:

public ActionResult myfunction()
        {
            //DO Some work here, then return the view below, with a pass or fail maybe? anything
            return PartialView("mymessage");
        }

Last thing to do, create a partial view called "mymessage"

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
 <h3>Work done!</h3>

That will load into your confirmmessage div the work done.. or if you like not done..

you can pass a string to the actionresult, or maybe set some session variables before calling it if you want to hide them

Hope that helps.

Martyn

Upvotes: 0

Sofian Hnaide
Sofian Hnaide

Reputation: 2364

You can make an ajax call to the server just after you hide/disable the button.

You can do something like this: 

$("#btnGenerate").click(function () {  
    $(this).attr("disabled", true).val("Generating...");  
    // an ajax call to the server to call the stored procedure
    $.ajax({
         url: "CallStoredProcedure.aspx",
         context: $("#value"),
         success: function(){
                $(this).val("done!");
           }});  
    }

Upvotes: 1

Evik James
Evik James

Reputation: 10473

Yes, it can be achieved. You do need to send something to the server though. Where's that code? You should probably do this:

$("#btnGenerate").click(function () {

    // UPDATE THE BUTTON  
    $(this).val("Generating...");

    // PERFORM C# SERVER SIDE CODE

    // ON SERVER SIDE CODE SUCCESS, DISABLE THE BUTTON
    $(this).attr("disabled", true);

});

Upvotes: 0

Spencer Ruport
Spencer Ruport

Reputation: 35107

Instead of disabling the button just remove the click event handler.

$(this).unbind();

This will probably be less annoying to the user anyway because then they can still see the button being clicked but don't realize nothing is actually happening.

Then just place whatever AJAX call you need to trigger the server side code right after the unbind() call.

Upvotes: 0

Related Questions