Hide and Show div's on Button Click in a UpdatePanel

I am using UpdatePanel ---> LinkButton --> Div --->Table Structure. When I click the Linkbutton the div has to show the table开发者_运维技巧 format first and has to execute the code in its OnClick event, the problem I am facing is I've tried so many jquery functions shown below:

<asp:LinkButton ID="lnkbtnUnitAdd" runat="server" OnClientClick="Toggledivs()"  OnClick="lnkbtnAdd_Click" Text="Add" ></asp:LinkButton>

Even if I used:

$(document).ready(function()
{ 
    $("#lnkbtnUnitAdd").click(function () {
        $("#divUnit").show("slow"); return false;
    });
});

or

function Toggledivs()
{
    $("#lnkbtnUnitAdd").click(function () {
        $("#divUnit").show("slow"); return false;
    });
}

or without using the OnClientClick property in LinkButton

the result is same, as the function is returning false in button Onclient click or document.ready function(), therefore buttons Onclick event is not firing.

And if I comment the return false, the div is not showing up properly.

Please help how to deal as the whole process is running in an updatepanel.

You might have to use Control.ClientID in this case. Try this

$(document).ready(function(){ 
    $("#<%=lnkbtnUnitAdd.ClientID%>").click(function () {
        $("#divUnit").show("slow"); return false;
    });
});

I won't recommend adding the event handler in HTML. But the following code should work. You don't have to assign the click event again.

function Toggledivs()
{
    $("#divUnit").show("slow"); 
    return false;
}

Give

return true;

if you want the onclick function to get executed.

If I have understood what you meant, this should do it: __doPostBack should be called only after the animation is done, you can do it by passing a callback function to jquery's show's, second parameter. UPDATES:

$(document).ready(function()
{ 
    $("#lnkbtnUnitAdd").click(function (e) {
        var btnName = $(this).attr('name');           
        $("#divUnit").show("slow",function(){
           __doPostBack(btnName,''); //now call the actual postback event      
        });

        e.preventDefault(); //prevent default postback behavior
        return false;
    });
});