I'm a bit of a newb using jquery and i'm cracking my brain trying to figure this one out.
I have a div that I initially set to display:none but i show and hide the div after a click on a link.
I click the button and displays the div. The problem is that I have a custom control with some buttons that causes a postback. Every time i click the button the div goes back to hiding, which i don't want of course. How can I make the div persist it's
state when a postback occurs.
The key here is to store the state of the panel so that it doesn't get lost in the postback.
Probably what you'll want to do is add an <asp:hiddenfield id="divVisibility" /> to your updatepanel, that stores the visibility value. Also add a runat="server" to your "contactfinderdiv", and remove the style="display:none;"
When the page first loads (If !page.ispostback), set the hiddenfield value to none: divVisibility.value = "none" (I think it's .value, might be .text, been a while) Then outside of the !page.ispostback set the visibility of your div
If (!page.ispostback) {
divVisibility.value = "none";
}
If (divVisibility.value == "none") {
contactfinderdiv.visibile = false;
}
that should do the trick - however you might need to add a bit to your javascript to determine the current state and then swap (i'm not sure if toggle will pick this up correctly)
~P
Marked as answer by gzmbk1 on Feb 19, 2010 07:24 PM
check the correct syntax.
and It's better to place the code in pageLoad()
into above function, as pageLoad() get called
for every partial postback.
-----------------
Happy Coding.
Mark as Answer if it helps.
Thanks for the tip I used the idea you gave and is working now.
I did the following.
I ended up setting the hidden field to a value of 'block' whenever a postback occured.
function pageLoad() {
// sets initial state of the contactfinderdiv
var state = jQuery('#contactfinderhd').val();
if (state == 'block') {
$('#OfficeFormView_contactfinderdiv').css('display', 'block');
$('#contactfinderhd').val('');
} else {
$('#OfficeFormView_contactfinderdiv').css('display', 'none');
}
gzmbk1
Member
18 Points
44 Posts
jquery toggle keep div from disappearing after postback
Feb 18, 2010 04:44 PM|LINK
Hello
I'm a bit of a newb using jquery and i'm cracking my brain trying to figure this one out.
I have a div that I initially set to display:none but i show and hide the div after a click on a link.
I click the button and displays the div. The problem is that I have a custom control with some buttons that causes a postback. Every time i click the button the div goes back to hiding, which i don't want of course. How can I make the div persist it's state when a postback occurs.
The div is inside a updatepanel as well.
here's the javascript:
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">function pageLoad() {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> $('.animatediv').click(function() {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> $('.togglebox').fadeTo('slow', 'toggle');</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> });</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> $('.closeBox').click(function() {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> $('.togglebox').fadeTo('slow', 'hide');</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> });</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">}</div>function pageLoad() {
$('.animatediv').click(function() {
$('.togglebox').fadeTo('slow', 'toggle');
});
}
here's the aspx code.
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<%--some other controls in here--%>
<asp:FormView ID="FormView1" runat="server" DataKeyNames="OfficeID" DataSourceID="officeObjectDataSource"
DefaultMode="Edit" CssClass="FormView">
<EditItemTemplate>
<fieldset>
<legend>Update Office</legend>
<a href="#" class="animatediv"><img src="../images/search.gif" alt="search" style="border: 0; height: 13px; width: 16px;" /></a>
<div id="contactfinderdiv" class="togglebox" style="display: none;">
<uc2:ContactIDFinder ID="ContactIDFinder" runat="server" OnRowSelected="ContactIDFinder_RowSelected" />
</div>
</p>
<p>
<asp:Button ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
CssClass="save" Text="Save" ');" />
</p>
</fieldset>
</EditItemTemplate>
</asp:FormView>
</ContentTemplate>
</asp:UpdatePanel>
Can anyone point me on the right direction?
PNasser
Contributor
2811 Points
531 Posts
Re: jquery toggle keep div from disappearing after postback
Feb 18, 2010 05:49 PM|LINK
The key here is to store the state of the panel so that it doesn't get lost in the postback.
Probably what you'll want to do is add an <asp:hiddenfield id="divVisibility" /> to your updatepanel, that stores the visibility value. Also add a runat="server" to your "contactfinderdiv", and remove the style="display:none;"
When the page first loads (If !page.ispostback), set the hiddenfield value to none: divVisibility.value = "none" (I think it's .value, might be .text, been a while) Then outside of the !page.ispostback set the visibility of your div
If (!page.ispostback) {
divVisibility.value = "none";
}
If (divVisibility.value == "none") {
contactfinderdiv.visibile = false;
}
that should do the trick - however you might need to add a bit to your javascript to determine the current state and then swap (i'm not sure if toggle will pick this up correctly)
~P
PNasser
Contributor
2811 Points
531 Posts
Re: jquery toggle keep div from disappearing after postback
Feb 18, 2010 05:51 PM|LINK
I forgot the add the key piece - the hiddenfield gets displayed as an input type = "hidden", so in your javasript you need
to modify the value of that input box to none or whatever else (none is the only value that matter in the code behind here)
raju dasa
Star
14746 Points
2499 Posts
Re: jquery toggle keep div from disappearing after postback
Feb 19, 2010 07:06 AM|LINK
HI,
u shouldn't add the css at design time. remove the style to div.
<div id="contactfinderdiv" class="togglebox" style="display: none;">
and add the style from javascript to div.
$(document).ready(function(){
$('.togglebox').css('display','none');
});
check the correct syntax.
and It's better to place the code in pageLoad()
into above function, as pageLoad() get called
for every partial postback.
-----------------
Happy Coding.
Mark as Answer if it helps.
rajudasa.blogspot.com || blog@opera
gzmbk1
Member
18 Points
44 Posts
Re: jquery toggle keep div from disappearing after postback
Feb 19, 2010 07:28 PM|LINK
Thanks for the tip I used the idea you gave and is working now.
I did the following.
I ended up setting the hidden field to a value of 'block' whenever a postback occured.
function pageLoad() {
// sets initial state of the contactfinderdiv
var state = jQuery('#contactfinderhd').val();
if (state == 'block') {
$('#OfficeFormView_contactfinderdiv').css('display', 'block');
$('#contactfinderhd').val('');
} else {
$('#OfficeFormView_contactfinderdiv').css('display', 'none');
}
$('.animatediv').click(function() {
$('.togglebox').show('slow');
});
$('.closeBox').click(function() {
$('.togglebox').hide('slow');
});
}
sinfulcoolbe...
Member
4 Points
2 Posts
Re: jquery toggle keep div from disappearing after postback
Apr 21, 2010 09:17 PM|LINK
Thank you for the logic. I have been recking my brain on this one for some time now. I can use the jQuery fileupload plugin with success!