CODEWITHSUNDEEP
c#jqueryasp.netpanelfadein
BustedSanta
BustedSanta

Reputation: 1388

How to fadein server control using jQuery?

I have two webform panels that I display & hide based on a click event in Code Behind. This is the default state:

pnlStepOne.Visible = true;
pnlStepTwo.Visible = false;

On a button (#btnStepOne) click event, I currently change the visibility of the panels by switching the visibility values:

protected void btnStepOne_Click(object sender, EventArgs e)
{
pnlStepOne.Visible = false;
pnlStepTwo.Visible = true;
}

This part works well. However, I would like to fade in the pnlStepTwo instead of displaying it instantly by changing the visibility settings.

I tried to do this:

$("#btnStepOne").click(function (event) {
    $('#pnlStepTwo').fadeIn(3000);
});

But this doesn't seem to work. I assume it's because the pnlStepTwo is not yet visible.

How can I fade in the #pnlStepTwo instead of displaying it instantly?

EDIT:

Here's my validation code on pnlStepOne:

 $("#<%=btnStepOne.ClientID%>").click(function (event) {

            var fvFname = document.getElementById('fvFname');
            var fvLname = document.getElementById('fvLname');

            ValidatorValidate(fvFname);
            ValidatorValidate(fvLname);

            if (!fvFname.isvalid || !fvLname.isvalid) {
                $("#<%=pnlStepOne.ClientID%>").effect("shake");
            }

            if (fvFname.isvalid && fvLname.isvalid) {

                $('#<%=pnlStepOne.ClientID%>').hide();
                $('#<%=pnlStepTwo.ClientID%>').fadeIn(500);

            }
        });

Upvotes: 2

Views: 857

Answers (2)

SHEKHAR SHETE
SHEKHAR SHETE

Reputation: 6056

The Visibility property of a control wont allow to render in a page. Instead use display:none using javascript.

Hiding Panel using Javascript:

<script type="text/javascript">
function ShowPanelTwo()
{
  $('#<%=pnlStepOne.ClientID%>').css("display","none");
  //$('#<%=pnlStepTwo.ClientID%>').css("display","block");
  $('#<%=pnlStepTwo.ClientID%>').fadeIn(3000);

}

</script>

Calling from Codebehind:

protected void btnStepOne_Click(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "uniquekey", "<script type='text/javascript'>ShowPanelTwo();</script>");
}

Also you can use:

$("#<%=btnStepOne.ClientID%>").click(function (event) {
   $('#<%=btnStepTwo.ClientID%>').fadeIn(3000);
});

Hope this helps!

Upvotes: 2

ElGavilan
ElGavilan

Reputation: 6904

The Visible property in your C# code will prevent the panel from rendering on the HTML page. So you are correct, your JQuery code cannot see it because it is not yet visible.

I would make pnlStepTwo visible and just hide it with style="display:none". You will want to stop your submit button from posting back too, since all it is doing is changing that Visible server side property anyway.

Also, to make sure that your client side javascript can see the right element in the DOM, reference it this way:

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

That will make your application return the HTML id for that element as it is actually rendered. Sometimes the rendering engine will return a variation of the server-side ID property, so your client side ID might actually be something like ContentPlaceHolder1_btnStepTwo.

Upvotes: 1

Related Questions