I have a label and a div called "menu" that is currently invisible. I want that when the user clicks the label. It will make the div visible. I thought of doing it through javascript, how do I make a control visible through javascript?
First, if you want to access controls on the client-side, they must be rendered as html. When you use Control.Visible it won't be rendered on the client and is only accessible on the serverside. Therefore you have to use CSS to toggle it's visibility on the clientside.
show the div:
document.getElementById('menu').style.display = 'inherit';
You could hide it with:
document.getElementById('menu').style.display = 'none';
You should keep in mind that the id of serverside-controls could change when it's inside of an other NamingContainer than the page(f.e. in a GridView or UserControl). So you should use Control.ClientID to get the correct ID that'll be generated from ASP.Net:
So this is better:
document.getElementById('<%= menu.ClientID %>').style.display = 'none';
In ASP.Net 4.0 it's possible to customize the ClientID. For further informations:
http://www.thereforesystems.com/working-with-client-id-in-asp-net-4/
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx
Related
[enter image description here][1]Help!
I have two svg image buttons on my page. On the page load I am displaying one of the two buttons based on the value in the DB . and I have jquery to hide that button and show another one on button click from UI. I cannot show another button after hide.
both buttons are in a single span class.
The visibility property can't be block. You should use visible instead.
Have a look at the documentation for more about this property.
EDIT
If that can help... Here is an example showing both hidden and visible for the visibility attribute...
// That is executed on load.
$("#btnXX").css("visibility", "visible");
$("#btnYY").css("visibility", "hidden");
// Handler for the toggle button.
$("#toggle").on("click", function(){
$(this).toggleClass("active");
if($(this).hasClass("active")){
$("#btnXX").css("visibility", "hidden");
$("#btnYY").css("visibility", "visible");
}else{
$("#btnXX").css("visibility", "visible");
$("#btnYY").css("visibility", "hidden");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnXX">XX</button><button id="btnYY">YY</button><br>
<br>
<button id="toggle">Toggle it</button>
I figured it out. My back end code was using property btnXX.Visible = false, Changing it to display:none fixed my issue.
If you don't want to render the control at all in certain situations, set Visible="false". Since it keeps the control's HTML out of the page, slightly but if you want to show the control via Ajax/etc, this won't work and display:none css should be used
I am working on an ASP.NET/C# project in which we are placing a user control into an AJAX panel whose visibility is set to false on page load. The visibility of this panel is set to true once the user submits some parameters. However, although the user control and all of the other panel contents are visible once these parameters are set and submitted, the uc's javascript functions do not work.
I attempted to solve this issue by adding Page.Controls.Add(controlID) in Page_Load if it is not a postback. The functionality is all there when I do this, but I know that there is a better way to get the functionality because in this case the control is being added to the page twice.
EDIT: I put the controller in a div outside of the panel and got the control that I wanted out of it. However, if anyone can explain why the javascript of the control wasn't defined or offer a solution that keeps my UC in the panel, I would really appreciate it.
If for asp server control the visible property is set to false, then that control is not even rendered on the page. Since the User Control is inside the ajax server control, the user control is not rendered. Javascript code is executed by the browser hence it must be present on the page to run.
If you can set css property display: none to hide and display: block to show for the ajax server control, then user control and its javascript will be rendered on the page, however hidden from user for css property i set to display: none, so its javascript will be executed.
To set display property of ajax server control, you could use: ajaxControl.Styles.Add("display", "none").
Hope this helps you.
I want to make a label invisible in child page which is defined in master page.
Is there a way to do that?
((Label)Master.FindControl("mylbl")).Visible = false;
put this in page load of the child page , mylbl refers to the ID of the label
it might be Master.Page.FindControl .... now that I think of it, it's been a while , but that's how you do it
You should use javascript. Normally in this situation, you would reference your label using
(assuming your label's ID is my_label_id)
document.GetElementById('<%= my_label_id.ClientId %>')
. . . or if you are using jquery . . .
$('#<%= my_label_id.ClientId %>')
However, AFAIK you cannot use clientid to reference a server-side control located on the master page from a content page. So I would either give the control a unique class name using the asp.net label attribute CssClass="myLabelClass" or retrieve the client Id by building the page, viewing the source, and finding the client ID. Steps for this can be found here:
How to use javascript in content page, asp.net
Once you correctly reference the item, simply change the "display" style attribute to "none" as seen below.
Using jQuery and assuming your CssClass name is myLabelClass:
$('.myLabelClass').css('display','none');
If you wanted this to occur on page load you could do the following:
$(function(){
$('.myLabelClass').css('display','none');
});
I've got a list of checkboxes and an ImageButton with an OnClick event in my page, clicking the ImageButton performs a postback and runs the OnClick event fine
The trouble is that I want to move the div to be the first child of the <form> so that I can make it appear in a modal window - I've done this using the prototype.js code...
document.observe("dom:loaded", function() {
if ($$('.CheckboxListContainer').length>0) {
var modalShadow = document.createElement('div');
modalShadow.setAttribute( "class", 'MyFormModalShadow' );
modalShadow.style.width = document.viewport.getWidth() + 'px';
modalShadow.style.height = document.viewport.getHeight() + 'px';
var modalDiv = document.createElement('div');
modalDiv.setAttribute( "class", 'MyFormModal' );
var checkboxesDiv = $$('.CheckboxListContainer')[0];
checkboxesDiv.remove();
modalDiv.appendChild( checkboxesDiv );
$$('form')[0].insert( {top: modalShadow} );
$$('form')[0].insert( {top: modalDiv} );
Event.observe(window, "resize", function() {
if ($$('.MyFormModalShadow').length>0) {
var modalShadow = $$('.MyFormModalShadow')[0]
modalShadow.style.width = document.viewport.getWidth() + 'px';
modalShadow.style.height = document.viewport.getHeight() + 'px';
}
});
}
});
... which works fine, but the ImageButton is no longer triggering my OnClick event on postback.
Is there a way to move my div around in the DOM and retain its postback abilities?
Quick answer, yes. Long answer below:
If you're talking ASP.NET WebForms, does your form have the runat="server" attribute and an id? If you're using standard HTML, are the method and action attributes set on the form?
When you look at the HTML source in your browser, if the form looks like: <form action="/your_post_back_page.html" method="post">, then that's all good. Inspect the form with FireBug after the modal dialog has been added, see if it is INSIDE the form tags. If so, that's good.
Do your check boxes <input type="checkbox" /> have a name attribute set? Is your image button <input type='submit' /> or is it a <button>?
If these conditions are met, then there is probably a JavaScript event (a function) wired to your button that is returning false and/or swallowing the postback. JavaScript onclick events generally need to return true to submit a form. Is there any output in your browser's error console?
Personally, I find more and more that pure HTML (by way of ASP.NET MVC) beats the pants off old school ASP.NET WebForms, and jQuery has, in my experience, a far nicer feel than prototype. Using jQuery templates to create a modal dialog would be easy. Can you swap libraries?
First of all, i am not very clear why you need to move the element to be the first child of the form to make it modal. You can make any div modal no matter where is the position in the form. The most important think is controlling the absolute positioning properly.
Each postback gets triggered by a __DoPostBack() javascript function, so you should not have any issues with moving the control around, unless you changed the id of the control.
One possible solution to your problem is calling the __DoPostBack() function from your client code in document.ready, and that way you have full control over the form submission.
i have a Ajax Control toolkit water mark extender for a search box which is there in a master page . Based on certain condition ,i would like to change this value from the child page which inherits from this master page .I want to do it in client side with jquery /javascript . Any ideas??
You can create a javascript function that change the watermark, andd just call it from your child page
function setWatermarkText(text)
{
var watermark = $get('<%= WatermarkExtender.ClientID %>');
watermark.set_Text("John Smith");
}