CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net
Abrar Ali
Abrar Ali

Reputation: 115

Fade div in and execute server side method

I'm struggling with asp.net today. I have a button. When this button is pressed, it should fade in a div and also execute a server side method (getting data). How could i go about this?

I have the button fade working, but the moment i attach a onclick or onserverclick event, it stops working. I've tried both asp:Button and input.

<input id="btnSelectSupplier" type="button" class="btn btn-primary btn-sm " value="Select Supplier" runat="server" onserverclick="btnSelectSupplier_Click" />

The div to fade in..

<div id="divSelectSupplier" class="ui-widget-content">
        <div class="viewSupplierDetailsHeader">
            <h3>Select Supplier</h3>
            <button type="button" class="btn btn-danger btn-sm pull-right CloseViewSupplierDetails">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Close
            </button>
        </div>
        <div id="" class="text-center" runat="server">
            <h4>Please Wait..</h4>
        </div>
    </div>

The JS side:

$('#btnSelectSupplier').click(function () {
    var thisResource = $(this).position();
    var left = thisResource.left - 350;
    var top = thisResource.top - 50;
    $("#divSelectSupplier").css("left", left).css("top", top).fadeIn(600);
});

And finally, the code behind:

protected void btnSelectSupplier_Click(object sender, EventArgs e)
    {
        divSelectSupplierContainer.InnerHtml = "<h2>Done.</h2>";
    }

Upvotes: 0

Views: 103

Answers (1)

Avinash Jain
Avinash Jain

Reputation: 7616

Instead of using server onclick you should use Jquery post event to post the data to server, and then in callback you can fadeout the div

$('#btnSelectSupplier').click(function () {
    var thisResource = $(this).position();
    var left = thisResource.left - 350;
    var top = thisResource.top - 50;
    $("#divSelectSupplier").css("left", left).css("top", top).fadeIn(600);

    $.post("urlForPost", { //data to post },function(returnData){
       $("#divSelectSupplier").fadeOut(600);
    });
});

Upvotes: 1

Related Questions