[JS / jQuery] div hidden na postback

[PdeBie]

^{Twijfel of dit bij clientside moet of bij programming.}

hoi allen,

ik heb een div welke ik default op display:none zet.
De div wordt zichtbaar na een klik op een label welke div.toggle() doet.

Als ik hierna een postback doe, wordt uiteraard de default styling van die div weer ingeschakeld en is dus hidden. Dit wil ik niet, dus mijn vraag is, hoe kan ik de div na de postback gewoon tonen als deze zichtbaar was.

hier de markup en code:

JavaScript:

$('#extendedsearch').click(function () {
            $('#divExtendedSearch').toggle('fast');
        });

HTML:

<div id="search">
                <asp:TextBox ID="tbSearch" runat="server" />
                <asp:Button ID="btnSearch" runat="server" CssClass="nowidth" Text="Zoeken" OnClick="btnSearch_Click" />
                <asp:Button ID="btnClearSearch" runat="server" CssClass="nowidth" Text="Wissen" OnClick="btnClearSearch_Click" />
                <br />
                <label id="extendedsearch">Uitgebreid zoeken</label>
            
                <div id="divExtendedSearch" class="hidden">
                    <div class="deliverySearch">
                        <label>Bezorgdatum van</label>
                        <asp:TextBox ID="tbSearchDeliveryDateFrom" runat="server" ReadOnly="true" />
                    </div>
                    <br />
                    <div class="deliverySearch">
                        <label>Bezorgdatum tot</label>
                        <asp:TextBox ID="tbSearchDeliveryDateTill" runat="server" ReadOnly="true" />
                    </div>
                </div>
            </div>

de klasse 'hidden' op de div 'divExtendedSearch' is niets anders dan:

Cascading Stylesheet:

.hidden
{
    display:none;
}

[RobIII]

pdebie schreef op donderdag 05 januari 2012 @ 10:47:
Als ik hierna een postback doe, wordt uiteraard de default styling van die div weer ingeschakeld en is dus hidden. Dit wil ik niet, dus mijn vraag is, hoe kan ik de div na de postback gewoon tonen als deze zichtbaar was.

Server-side de class zetten wanneer 't een POST betreft Of denk ik nou zo simpel?

code:

<div id="divExtendedSearch" <% if (POST) %> class="hidden" <% endif %> >

Of aan 't eind van de pagina ofzo ergens:

code:

<%
if (POST)
  echo '<script type="text/javascript"> $("#divExtendedSearch").addClass("hidden");</script>';
%>

En anders gebruik je gewoon AJAX om de POST te doen; hoef je ook niet te postbacken

[ Voor 30% gewijzigd door RobIII op 05-01-2012 10:53 ]

[PdeBie]

Ow, vergeten te vermelden. Het betreft een asp.NET site

als ik de div 'divExtendedSearch' runat="server" maak, dan dien ik de call in het javascript aan te passen.

Dit wordt dan als het goed is:

JavaScript:

$('#extendedsearch').click(function () {
   $("#<%= #divExtendedSearch.ClientID %>").toggle('fast');
});

Echter, krijg ik dan de volgende error:
Preprocessor directives must appear as the first non-whitespace character on a line

--edit--
stom... zie al wat ik fout doe. de regel wordt als volgt:

JavaScript:

$('#extendedsearch').click(function () {
   [s] $("#<%= divExtendedSearch.ClientID %>").toggle('fast');[/s]
});

het hekje '#' voor de naam van de div moest nog weg

problem solved. Thank you.

[ Voor 24% gewijzigd door PdeBie op 05-01-2012 11:01 . Reden: probleem oorzaak gevonden ]

[OkkE]

Side note: Ik vind het altijd netjes om dingen die je met Javascript gaat tonen, ook met Javascript te verbergen.