Develop Reference

Force javascript to run on aspx page load

I have a aspx page with some databound controls. One of them is a checkbox. If this checkbox is checked then it should show a div, else hide it. It works great when I click/unclick the box. BUT, when the page loads initially the div ALWAYS shows up until I check/uncheck the checkbox. How can I fix this so that if the databound checkbox is not checked then when the page loads the div is hidden?
<script type="text/javascript">
function hideDiv(obj) {
if (obj.checked == true) {
document.getElementById("divHome").style.display = 'block';
}
else {
document.getElementById("divHome").style.display = 'none';
}
}
</script>
<asp:CheckBox ID="cbMycb" runat="server" ClientIDMode="Static" onClick="hideDiv(this);"
Checked='<%# Bind("MyField") %>' />
<br />
<div id='divHome'>
STUFF INSIDE THE DIV
</div>

You can either run the hideDiv function when the content is loaded as Amit Joki stated.
window.onload =function(){
hideDiv(document.getElementById('cbMycb'));
But, this solution might present a little issue, you might see the div flickers when the page loads if the div is visible. To solve it just make sure the div is not visible by default by adding some css style...
#divHome{
display: none;
}
Another approach would be using a conditional databinding expression to set the div's visibility...
<div id='divHome' style='<%# "display:" + ((bool)Eval("MyField") ? "block" : "none") %>'>
STUFF INSIDE THE DIV
</div>
Hope it helps

Just call your function once outside.
<script type="text/javascript">
function hideDiv(obj) {
if (obj.checked == true) {
document.getElementById("divHome").style.display = 'block';
}
else {
document.getElementById("divHome").style.display = 'none';
}
}
window.onload =function(){
hideDiv(document.getElementById('cbMycb'));
}
</script>

Text box visible using javascript

I have a hidded textbox and Imagebutton.For avoiding the Postback i am trying to make textbox visible on click of the image button using javascript.But textbox is not showing on click of the image button,Instead image btton is moving.
What could be wrong here in this code.
Appreciate ur help
<asp:TextBox ID="TextBox2" text="From:" style=" visibility: hidden" runat="server" BackColor="#999999" BorderColor="Black" BorderStyle="Double"></asp:TextBox>
<asp:ImageButton ID="ImageButton2" runat="server" BackColor="#99CCFF"
BorderColor="#84C1FF" BorderStyle="Outset" OnClientClick="MJavascriptFunction();return false;" Height="35px"
ImageUrl="search11.png" Width="56px" />
<script type="text/javascript">
function MJavascriptFunction(obj) {
var theControl = document.getElementById("<%=Textbox2.ClientID %>");
theControl.style.display = "block";
}
</script>

Change
theControl.style.display = "block";
To
theControl.style.visibility="visible";
Example
In your Code you set the visiblity option to "hidden", So you need to use the same property in javscript
Alternatively you can change the HTML inline CSS to style="display:none".
Example

Force a postback in Javascript for UpdatePanel?

I have a function to close a modal:
function closeModal(name) {
$(name).modal('hide');
}
But, my page also has an update panel and I need to trigger it.
I tried __doPostBack('UpdatePanel1', '') with no luck.
Thanks
The problem is this:
$(document).ready(function () {
createAutoClosingAlert('.success_alert', 6000);
if(<%# IsAPostBack() %>){
if(window.parent != null){
window.parent.closeEditModal();
window.parent.closeCalendarModal();
window.parent.closeModal('#projectModal');
window.parent.closeModal('#scheduleModal');
}
}
});
I call it from the parent so I cannot get the hidden ID.

One option is to put a hidden button inside your update panel
<div style="display:none">
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
Then call the following in your script
document.getElementById('<%=Button2.ClientID%>').click();
The button click will cause a postback.
You can also look at Page.GetPostBackEventReference

Function to hide multiple divs

I hope, somebody can explain me where I'm wrong with my code...So I have this function:
function divdisplay(element){
if(document.getElementById(element).style.display == 'none'){
document.getElementById(element).style.display = 'block';
for (var i=0; i<NUMBER_OF_DIVS; i++)
document.getElementById(i).style.display = 'none';
} else
document.getElementById(element).style.display = 'none';
The function displays the divs just fine, but the hiding part is the problem. I want to hide several other <divs>. The ids of these other <divs> are simple numbers, which is why I try to address these elements with the variable i. But when I click on <div> #1 while <div> #2 is already visible, only <div> #1 appears and <div> #2 does not disappear.
The <divs> look like this:
<div id="1" style="display:none;">
<a href="javascript:divdisplay(1);">
<img src="..."/>
</a>
</div>
<div id="2" style="display:none;">
<a href="javascript:divdisplay(2);">
<img src="..." />
</a>
</div>
<div id="3" style="display:none;">
...
And they first appear when the corresponding link
<a href="javascript:divdisplay(1);">
<a href="javascript:divdisplay(2);">
<a href=...
is clicked.
The image in each <div> is linked to the function again, so a click on the image inside the <div> hides it again, but a click on another link does not make the visible <div> disappear again. Where did I go wrong?
Thanks in advance anyway.

Why you don't use Jquery? You only have to add a class to each div you want to hide/show
<div class="test">content here</div>
and now you can use show() and hide() from jquery.
$(".test").show(); and $(".test").hide(); will show/hide all div's with the class test.
You also check out show() and hide().
In addition you have chance to add an effect to your show() and hide() function.

This function loops through all your divs and only shows the one you specify in element
function divdisplay(element){
for (var i=0; i<NUMBER_OF_DIVS; i++){
var div = document.getElementById('div'+i);
if(i == element){
div.style.display = 'block';
}else{
div.style.display = 'none';
}
}
}
// As Alnitak suggested, this can be condensed into:
function divdisplay(element){
for (var i=0; i<NUMBER_OF_DIVS; i++){
document.getElementById('div'+i).style.display = (i == element)? 'block' : 'none';
}
}
I prefer not to use jQuery in small functions like this, because it'll save you from loading a library (-1 HTTP request), and the native functionality is simply faster. (Not significant at this amount of code, but still)
Assuming you're not using jQuery already, that is. If you are, this will work:
Assuming you add a class to all elements like this:
<div class="hideMe" id="1" style="display:none;">
<a href="javascript:divdisplay(2);">
<img src="..." />
</a>
</div>
jquery:
function divdisplay(element){
$(".hideMe").hide();
$("#"+element).show();
}

asp hide radiobutton label

I'm having trouble hiding the text on a radio button. Here's asp for the radios...
<asp:RadioButton ID="rdViewPrint" Text="View/Print" runat="server" OnClick="javascript:disableFields();" GroupName="viewSend" Checked="True" style="margin-left:10px;" />
<asp:RadioButton ID="rdEmail" Text="Email" runat="server" OnClick="javascript:emailFields();" GroupName="viewSend" style="margin-left:10px;" />
<asp:RadioButton ID="rdFax" Text="Fax" runat="server" OnClick="javascript:faxFields();" GroupName="viewSend" style="margin-left:10px;" />
on page load, a javascript function runs the function below. The cirles of the radio buttons are hidden, but the text remains.
function noVisit() {
document.getElementById('<%=lblViewSend.ClientID%>').style.display = "none";
document.getElementById('<%=rdViewPrint.ClientID%>').style.display = "none";
document.getElementById('<%=rdEmail.ClientID%>').style.display = "none";
document.getElementById('<%=rdFax.ClientID%>').style.display = "none";
document.getElementById('<%=btnFull.ClientID%>').style.display = "none";
document.getElementById('<%=btnSummary.ClientID%>').style.display = "none";
document.getElementById('<%=btnPrivate.ClientID%>').style.display = "none";
}
Why does the text not get hidden, and how do I make it not visible?
Thanks, Dave K.

An easy fix for this would be to just put the whole thing in a panel and then hide that. Or is there a reason you could not do that?

Check out the HTML generated by ASP.NET on your page. I think you'll find that LABEL tags are emitted for the text of the radio buttons. Your Javascript is not targetting the LABEL's - you're targetting the INPUT's.
Another suggestion - toggle classes to show/hide them. Much easier to keep track of and allows you consolidate other styling goodness with CSS.

Try this code.
rdViewPrint.Visible = false;
rdEmail.Visible = false;
rdFax.Visible = false;