im a newbie in asp.net and i have a issue. i need to make my div section visible only on some pages. i placed attribute style:(not with " on start of course)
<div ID="id1" class="grid-box width33 grid-h" style="visibility:visible" >
<!-- Other code here //-->
</div>
and i need to make in code behind some kind of if statement that's going to check if my section picker picked that div section, and if it is picked it's going to be printed on page, else it's going to render something else.
on my page_load method i have a code such as:
if (this.CurrentContent.CentralSection.HasValue)
{
this.ucCentralSection.CentralSectionId = this.CurrentContent.CentralSection.Value;
}
else
{
this.ucCentralSection.Visible=false;
}
but it's not working properly...
Add a runat attribute to your div. Use FindControl method in your code-behind to locate the div in question and toggle the visible property there.
Use like this
<div ID="id1" class="grid-box width33 grid-h" style="visibility:visible"
runat="server" >
<!-- Other code here //-->
</div>
And in your cs page
var div = (HtmlGenericControl)Page.FindControl("id1");
div.Visibility=true;
Other wise you can use Panel server control.
Related
I have a dynamically named DIV in a GridView which contains a user control with a dynamically assigned Parent_ID. The javascript is used to show or hide the DIV. I'll show you two examples of different rows without the ASP code.
Row 1 showing for Order # 123456:
<a href="<%#"javascript:collapseExpand('Order_Notes_Panel123456');" %>" >+</a>
<div id='Order_Notes_Panel123456' style="display:none;">
<uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='123456'/>
</div>
Row 2 showing for Order # 678901:
<a href="<%#"javascript:collapseExpand('Order_Notes_Panel678901');" %>" >+</a>
<div id='Order_Notes_Panel678901' style="display:none;">
<uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='678901'/>
</div>
The good news is that the user control binds and works perfectly. The javascript shows (sets the style to "display:block;") and hides (style set to "display:none;") the appropriate DIV each time the '+' is clicked.
Here is my problem: there is a 'Reply' link in the user control that, when clicked, does a post-back and puts the control into Edit mode. When I employ this user control on another page without a containing DIV, you won't notice a thing. However, when the 'Reply' does its post-back, the containing DIV reverts back to style="display:none;".
Can you provide a recommendation how to set the parent DIV's style to "display:block;" while a user is obviously working with it? I would imagine the appropriate code would go in the code behind of the user control when it goes into Edit mode.
Thanks,
Rob
Update: I recognize that there is no runat=server in my DIV. Since I'm trying to establish a dynamic ID for each, I get an error if I try to use the runat. That is probably the reason why I can't reach it from code behind...
I am very happy of myself... (see the YouTube video for this phrase, you'll be glad you did.)
In summary, this is what I added:
1. New Javascript function to add the name of the target DIV to a hidden field (The "collapseExpand" function is in the Site.Master. I couldn't put "load_div_to_hidden" in the Site.Master since "myhiddenField" isn't set up on every page
2. New hidden field to capture the name of the target DIV
3. New Javascript function to run on window.onload, check if we've got a post-back, and then display the value from the hidden field
4. Adding second Javascript call from the href in the link
Below are the new snippets of code:
<script type="text/javascript">
function load_div_to_hidden(obj) {
var hidden = document.getElementById('<%= myhiddenField.ClientID %>');
hidden.value = obj;
}
function windowOnLoad() {
var isPostBack = (('<%= IsPostBack %>').toLowerCase() == 'true') ? true : false;
if (isPostBack == true) {
var hid_field_value = document.getElementById('<%= myhiddenField.ClientID %>').value;
var right_div = document.getElementById(hid_field_value);
right_div.style.display = "block";
}
}
window.onload = windowOnLoad;
</script>
<input type="hidden" id="myhiddenField" runat="server" value="" />
<a href="<%#"javascript:collapseExpand('Order_Notes_Panel123456'); javascript:load_div_to_hidden('Order_Notes_Panel123456');" %>" >+</a>
<div id='Order_Notes_Panel123456' style="display:none;">
<uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='123456'/>
</div>
Works like a charm!
I have the following validation summary control in the markup:
<asp:ValidationSummary ID="vsValErrs" CssClass="errors" HeaderText="<div><%# TranslatedMessage%></div>" runat="server" />
where TranslatedMessage is a property defined in the code behind. The problem is that the validation summary control gets rendered as
<div id="vsValErrs" class="errors" style="color:Red;">
<div>
<!--[CDATA[<%# TranslatedMessage%-->
]]>
</div>
</div>
which causes the content to be rendered incorrectly, probably because the ]]> part is outside the comment block. Why does this happen?
For those who are wondering, the reason for having a div in the HeaderText attribute is because I'm using it to style the header text (using a CSS selector that selects the first div, in the errors class); it's probably not best practice but this is the only way I've come up with.
Have you try by setting headertext property value in pageload event like
protected void Page_Load(..)
{
..
ValidationSummury1.HeaderText="<div>"+TranslatedMessage+"</div>";
}
If translated message is not available then put it into session varible and set it to HeaderText property.
Does anyone know of a native ASP.NET way to insert a <div> into an asp:ValidationSummary?
If you are inserting the div at the top you could use the Headertext attribute of the ValidationSummary like so.
<asp:ValidationSummary ID="ValidationSummary1" runat="server" HeaderText="<div> Stuff inside Div </div>" />
*Note if you are adding the style to the actual summary section you may want to try adding your style to the tag inside the summary.
If your only goal is to start a new block, just use a style:
#myDiv {
display: block;
}
You may need to override the PreRender event to add this
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.validationsummary.onprerender.aspx
I was trying to incorporate a functionality in my ASP.NET such that a DIV tag which contains the Profile Navigation Menu should only be visible if a person is logged in.
I know the condition on how to if the person is logged in or not but wanted to know the method to toggle the div tag on/off based on person's logged in status.
if(loggedin==yes)
{
//?
}
Thanks
You can set the div to runat="server", and then access it as a variable in your code-behind page and set Visible to false.
That is, you'd have something like:
<div id="myDiv" runat="server">
And then in your CS file:
if (!loggedIn)
{
myDiv.Visible = false;
}
If you div is having runat=server attribute. You can take the instance of it as follows:
<div id="myDiv"></div>
HtmlGenericControl div=Page.FindControl("myDiv");
div.Visible=false;
If you make it a server tag by adding the runat="server" then you can use divid.Visable=false to not display it
If I had a div tag inside a repeater, and i want to add a jquery effect to every one of those div tags, how would that be done?
<script type="text/javascript">
$(function() {
//run the currently selected effect
function runEffect() {
//most effect types need no options passed by default
var options = {};
//check if it's scale, transfer, or size - they need options
//if (selectedEffect == 'scale') { options = { percent: 0 }; }
//run the effect
$("#effect").effect('explode', options, 500, callback);
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$("#effect:hidden").removeAttr('style').hide().fadeIn();
}, 1000);
};
//set effect from select menu value
$(document).ready(function() {
$("div.effect").click(function() {
runEffect();
return false;
});
});
});
</script>
<asp:Repeater ID="repItems" runat="server">
<ItemTemplate>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
I tried the above, but only the first div works. What am i doing wrong??
try using a class for those divs like:
<div id="effect" class="effect ui-widget-content ui-corner-all">
and in jquery use ("div.effect") selector.
i "think" that using the same id for multiple things might cause the issue...
The id values on HTML elements are required to be unique across the entire document. You're using the same id value for each item that that repeater displays, in violation of that rule. Now, the web being what it is, your browser doesn't complain about that, but try running your rendered HTML through a validator. jQuery only acts on the first such element, because it expects there to be only one.
If you switch from id to class, you should have much better results.
another idea to consider is to put a div tag with an id AROUND the repeater. the repeater itself looks pretty straightforward and looking at your jquery, it doesn't appear that it matters which of the div tags in the repeater is clicked.
$(document).ready(function() {
$("#base").click(function() {
runEffect();
return false;
});
});
<div id="base">
<asp:Repeater ID="repItems" runat="server">
<ItemTemplate>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
I think what you need to change is in the 'ready' function where you attach the click event - you are using $('div.effect') as the selector, which does not look valid to me. I suggest using $('.ui-widget-content'). This selects based on the class, rather than the id (which should be unique as noted by others).
If you're not wanting to use a class on those divs nested in your repeater, you can use partial ID matching. Even though the repeater will add information to beginning of your ID for each div (to ensure it's unique), the ID will still end in "effect", or whatever name you've used.
You can use this to your advantage. In your jQuery code, where you're operating on the "effect" ID, change your code from this:
$("#effect")
to this:
$("[id$='effect']")
This will select all elements whose ID END in "effect", so when repeater renames the ID of each div to "repItems_ ctl001_ effect" or what have you, jQuery will still find it.
Also do note, toward the end of your jQuery code listed in your question, you're attempting to access a div based on the class "effect", instead of the ID. Just an FYI.