CODEWITHSUNDEEP
javascriptasp.netjquery
BigBadDom
BigBadDom

Reputation: 219

Using JQuery to Show/Hide controls depending on Dropdown list selected value

I'm trying to use JQuery to show/hide div tags based on the selected index of a drop down menu, however it isn't working. Any help would be greatly appreciated.

Thanks.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="drop_down_test.WebForm1" %>


<form runat="server" ID="frmReport">
    <asp:DropDownList ID="ddlReports" OnChange="ShowHide()" AutoPostBack="true" runat="server" 
        onselectedindexchanged="ddlReports_SelectedIndexChanged">
        <asp:ListItem Text="Please Select Report" Value="Default" />
        <asp:ListItem Text="Report 1" Value="ReportValue1" />
        <asp:ListItem Text="Report 2" Value="ReportValue2" />
    </asp:DropDownList>
    <br />
    <br />
    <div id="Report1Section">
        <asp:Label ID="lblReport1" Text="This is for Report 1" runat="server" />
    </div>
    <br />
    <div id="Report2Section">
        <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" />
    </div>
</form>

<script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript">
    function ShowHide() {
        var ddlSelectedIndex = ('#<%= ddlReportName.ClientID %>').get(0).selectedIndex;

        switch (ddlSelectedIndex) {
            case 1:
                $('#Report1Section').show('slow');
                $('#Report2Section').hide('fast');
                break;
            case 2:
                $('#Report1Section').hide('fast');
                $('#Report2Section').show('slow');
                break;
        }
    }
</script>

Upvotes: 3

Views: 16162

Answers (3)

immutabl
immutabl

Reputation: 6903

Use classes like @Victor said. ASP.Net versions <4 will mess with IDs.

Take advantage of the fact that multiple classes can be applied to HTML elements. This allows you to group stuff. E.g. all your hideable reportdivs.

  <div id="Report2Section" class="Report2 reportDiv">
      <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" />
  </div>

Then use the names (spaces removed) from the values of the list items to get the id of the div you need to show. You can wire your events up a la JQuery in the page's ready(...) event.

<asp:DropDownList ID="ddlReports OnChange="ShowHide()"runat="server" Autopostback='true'
[Take the autopostback off the dropdownlist like @SeanTaylor said - you want the change to fire your javascript code not the ASP.Net postback-to-server mechanism.]

onselectedindexchanged="ddlReports_SelectedIndexChanged"
[Wire your events up the nu-skool, JQuery way (see below)]
>

<asp:ListItem Text="Report 1" Value="Report1 [remove the space in the Value] />

You can then call slideDown on all the reportdivs as a group, before calling slideUp on the one you need via its ID from the dropdown:

$(document).ready(function(){//there is a more modern way of writing this line.
    $('.ddlReports').change(function(){//JQuery style of wiring events up  
            $('.reportDiv').slideUp();//takes care of whichever one is showing (if any).
            $('#' + $(this).val() + "Section").slideDown();
    });
});

Upvotes: 4

Sean Taylor
Sean Taylor

Reputation: 5028

Withdrawing my previous answer as I didn't read your source code properly.

I've noticed that you have the autopostback="true" set on the dropdown, this will trigger the jquery, but then the page will re-load and the divs visability wont change.

Remove the autopostback and it should work.

The div's ID's are should remain the same as what you have named them, as they don't have runat="server"

Upvotes: 0

Victor
Victor

Reputation: 4721

The ID of your elements are rendered differently than you have declared due to the master page. I would recommend you use a class name for the div to use as selector instead. You could guess and hard code the expected ID o the div, but if your code structure changes, then the generated ID will too.

try this:

<div id="Report1Section" class="Report1">
        <asp:Label ID="lblReport1" Text="This is for Report 1" runat="server" />
    </div>
    <br />
    <div id="Report2Section" class="Report2">
        <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" />
    </div>

and then:

$('.Report1').show('slow');

or you can use server script to get the ID dynamically:

$('<%= Report1Section.ClientID %>').show('slow');

Upvotes: 3

Related Questions