jQuery在.net 2.0中不起作用

Question

I have vs 2005 and .net 2.0 ...my code is as follows:

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Edw.aspx.cs"     Inherits="BenefitsPaymentSystem.Edw" MasterPageFile="~/Main.Master" %>




<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" ID="EDWContent" runat="server">
<asp:Panel ID="pnlSearchEDW" GroupingText="Search Enterprise Dataware House " runat="server" CssClass="panel">

    <asp:RadioButtonList Visible="false" ForeColor="midnightblue" ID="rblEDWSearchOtpions" runat="server" RepeatDirection="Horizontal" CellPadding="5" CellSpacing="10" OnSelectedIndexChanged="rblEDWSearchOtpions_Change" AutoPostBack="true" >
    <asp:ListItem Text="Client Serach" Value="Client"></asp:ListItem>
    <asp:ListItem Text="Program Area Search" Value="Program"></asp:ListItem>
    </asp:RadioButtonList>
   <a id="lnkSearch" href="#" onclick="slidein();return false;">Begin Client Search</a>  
   <br />
   <br />
</asp:Panel>
<br />
<br />

<div id="clientdiv">
<asp:Panel id="pnlClientSearch" runat="server" CssClass="panel" Visible="true" GroupingText="Client Search">
    <table>
        <tr>
            <td class="textCell">Case# and Suffix</td>
            <td class="dataCell">
            <asp:TextBox ID="txtCaseAndSuffix" runat="server"></asp:TextBox>
            </td>
            <td class="textCell">SSN</td>
            <td class="dataCell">
            <asp:TextBox ID="txtSSN" runat="server"></asp:TextBox>
            </td>
        </tr>

        <tr>
            <td class="textCell">CIN</td>
            <td class="dataCell">
            <asp:TextBox ID="txtCIN" runat="server"></asp:TextBox>
            </td>

            <td class="textCell">First/Last Name</td>
            <td class="dataCell">
            <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
            </td>

        </tr>


    </table>
</asp:Panel>
</div>

<asp:Panel ID="pnlProgramAreaSearch" runat="server" CssClass="panel" Visible="false" GroupingText="Program Area Search">
<table>
    <tr>
    <td class="textCell"></td>
    <td class="dataCell">
    <asp:DropDownList ID="dddPrgramSearchList" runat="server" CssClass="ddl" Width="150pt">
        <asp:ListItem Text="PA" Value="PA"></asp:ListItem>
        <asp:ListItem Text="NPA" Value="NPA"></asp:ListItem>
        <asp:ListItem Text="MA" Value="MA"></asp:ListItem>
        <asp:ListItem Text="ALL" Value="ALL"></asp:ListItem>
        </asp:DropDownList>
    </td>
    </tr>

</table>
</asp:Panel>
<script type="text/javascript" language="javascript">

 $(document).ready(function() {
alert('');
});

function slidein()
{
alert('');

    $('#ctl00_ContentPlaceHolder1_pnlClientSearch').fadeIn('slow',3000);
    //$('#clientdiv').fadeIn('slow');
    //retunr false;

}
</script>

The fadeIn is not working...altough the jquery document ready is being callledd.... I dont have any script errors ....I want the panel to slide in...I aslo tried out the slidein as well....

Answer 1

either remove the href="#" attribute from your link, or "return false" at the end of your slidein() function to prevent navigating away from the page.

also check out http://api.jquery.com/event.preventDefault/ to see how to prevent default event behavior the jQuery way.

$(document).ready(function() {
    $('#lnkSearch').click(function(e) {
        e.preventDefault();
        slidein();
    });
});

Answer 2

Not sure without looking at more code, but two things I would try-

First, in a script debugger, verify that the clientID of the panel is indeed ctl00_ContentPlaceHolder1_pnlClientSearch.

Second, also in a script debugger, verify that $('#ctl00_ContentPlaceHolder1_pnlClientSearch) resolves to a jquery object.

Answer 3

Return false in the event handler to keep the link from reloading the page:

<a id="lnkSearch" href="#" onclick="slidein();return false;">

You can also hook up the event handler in the jQuery code instead, and use the preventDefault method:

$(document).ready(function(){
  $('#lnkSearch').click(function(e){
    slidein();
    e.preventDefault();
  });
});