I have some JS that reads an asp label's text and based on that sets a div visible or not.
function setToLabel() {
text = document.getElementById('add_view');
lbl = document.getElementById('lblAddVisible');
var isHidden = text.innerText == 'true';
text.style.display = isHidden ? 'block' : 'none';
}
$(document).ready
(
function()
{
setToLabel();
}
);
The problem is it only works if I explicitly set the isHidden variable. When I tell it to read the label to get the bool, it does not ever work.
Thanks
That's because when the control is rendered ASP gives the control a distinct ID from the one you've specified. If the script is rendered on the same page as your ASP code you can add this
lbl = document.getElementById('<%= lblAddVisible.ClientID %>');
otherwise you'll have to add a CssClass to the lblAddVisible control and get the element by class name. Also, make sure you are using the correct element that you need to read the innerHTML from.
If you are having nested controls in your aspx page, it might be that you are not using the correct Id. Try this:
text = document.getElementById('<%=add_view.ClientID%>');
function setToLabel() {
text = document.getElementById('add_view');
lbl = document.getElementById('lblAddVisible');
var isHidden = lbl .innerText;
text.style.display = isHidden ? 'block' : 'none';
}
$(document).ready
(
function()
{
setToLabel();
}
);
instead of txt.innerText ,you need to use lbl.innerText as you have to read from label
Related
I have a class derived from WebControls.TableCell.
When the Text property is set, I call a method that dynamically adds asp:Panels and asp:LiteralControls to the Cell. I want to reference these controls in Javascript, so naturally I tried using the ClientId of the panels in my JS functions. However, these controls have no ClientId set (the string is empty). Why is this? How do I force the ClientIds to be set?
As a temporary solution, I set the ClientIDMode to "static" and created the IDs on my own, but this is not satisfactory because it's hard to reference those IDs in JS. Why? If you assign, for example, "12345" to one control, it gets changed on client side to something like "MainContent_123456". This is bad because the "MainContent" part is not fixed; thus I never know for sure what the real Id on the client side will be. Currently, I can get the control with jQuery using $ctrl = $('[id$='12345']');, but this is dirty because it would get any control that has '123456' in its id.
So, back to the original question: how do I get my ClientIds set automatically for my panels in my custom TableCells?
Edit: Code added
protected void Page_Load(object sender, EventArgs e)
{
this.ClientIDMode = System.Web.UI.ClientIDMode.Static;
}
Code in the method that adds the controls to the custom TableCell:
Panel remainingTextPanel = new Panel();
remainingTextPanel.ID = Guid.NewGuid().ToString();
remainingTextPanel.Style["display"] = "none";
LiteralControl remainingText = new LiteralControl(myText.Substring(initialStringLength, myText.Length - initialStringLength));
remainingTextPanel.Controls.Add(remainingText);
this.Controls.Add(remainingTextPanel);
Panel linkBtnPanel = new Panel();
LinkButton lnkBtn = new LinkButton() {Text = "...", OnClientClick = "toggleDynamicText('" + remainingTextPanel.ID + "'); return false;" };
lnkBtn.Font.Bold = true;
linkBtnPanel.Controls.Add(lnkBtn);
this.Controls.Add(linkBtnPanel);
And the JS Code:
function toggleDynamicText(id) {
$ctrl = $('[id$=' + id + ']');
$(document).ready(function () {
$ctrl.toggle(1000);
});
}
Without seeing any code it's difficult to say what's going on but to access your controls using jQuery you can do the following:
$("#<%=myElement.ClientID%>")
This way it doesn't matter what .NET assigns as the ID.
i want a javascript code to hide/display a panel
The panel has a grid if the grid has data...then the panel should be displayed
and if the grid is empty then the panel should be hidden
I tried this code..but it does not work...
<script language="javascript" type = "text/javascript">
var gridview = (document.getElementById("#<%= gridview1.ClientID %>")) ? true : false;
if (gridview) {
document.getElementById("Panel1").style.display = 'inline';
}
else {
document.getElementById("Panel1").style.display = 'none';
}
</script>
Remove the # in document.getElementById("#<%= gridview1.ClientID %>").
in the line -
var gridview = (document.getElementById("#<%= gridview1.ClientID %>")) ? true : false;
instead of using ("#<%= gridview1.ClientID %>") , write the direct id of your grid yourself.like
var gridview = (document.getElementById("gridview1")) ? true : false;
try it.
First of all, I'm not familiar with C#, so I can't speak for the other part of the code. As for the JavaScript, a couple of things you should know:
getElementById does not return a boolean value, it returns an object. So use !! to force convert to boolean
getElementById does not tell you whether or not there is a value in the element. It simply returns the DOM object specified by getElementById. You need to check for innerText (for IE, chrome, safari) or textValue (for firefox, chrome, safari) property. If using jQuery, check for .val() or .text() is empty.
And getElementById just use the name of the element, without the #. jQuery use that.
Hope it helps,
Angela :)
I'm having a DropdownList and when its Selected Value is changed (for ex: 0 ) I need to set the visible property of a Panel to True and the visible property of another Panel to False.
and when another Value is selected I need to do Vice Versa Using JAVASCRIPT.
I'm currently achieving this but the space remains as it is. How can i remove the spaces also.
can anyone help me??
I'm attaching the code also.
function visible(val) {
var ddl = document.getElementById("ddl_IDProof");
var selectedFilterType = drpFilterType.options[ddl.selectedIndex].value;
if (selectedFilterType == "0") {
document.getElementById("pnl1").style.visibility = "visible";
document.getElementById("pnl2").style.visibility = "hidden";
}
else {
document.getElementById("pnl1").style.visibility = "hidden";
document.getElementById("pnl2").style.visibility = "visible";
}
}
Use display instead of visibility.
This will hide the entire element:
// Show pnl1 (maybe you have to use inline or inline-block insdead of block)
document.getElementById("pnl1").style.display = "block";
// Hide pnl2
document.getElementById("pnl2").style.display = "none";
I am using this javascript function to show different popups if location count varies. Here the txthiddenloccount value is null if the txtbox's visibility is false. If the visibility is true, it works fine. What strange is this??? Can someone help me out.
function isPageValid()
{
var validated = Page_ClientValidate('groupProfile');
var loccount = document.getElementById("ctl00_ContentPlaceHolder1_txthiddenloccount").value;
if(validated)
{
if(loccount == '1')
{
var mdlPopup = $find('<%= ModalPopupExtendersavechanges.ClientID %>');
if(mdlPopup)
{
mdlPopup.show();
}
}
else
{
var mdlPopup = $find('<%= ModalPopupExtenderMerchantUpdate.ClientID %>');
if(mdlPopup)
{
mdlPopup.show();
}
}
}
}
if txthiddenloccount is an asp:TextBox that has the Visible property set to false then it does not exist on the page that is readable by javascript. It will be stored in the ViewState.
For something like this you're probably better off using an asp:HiddenField and setting the value, that will create an input type='hidden' that will be accessible through javascript.
Here you are trying to get txthiddenloccount control's value which hasn't rendered on the page because its visibility is false.
so first you have to check if it is null i.e you can write code like this.
var loccount='';
if(document.getElementById("ctl00_ContentPlaceHolder1_txthiddenloccount") != null)
{
loccount = document.getElementById("ctl00_ContentPlaceHolder1_txthiddenloccount").value;
}
If the Visible property of the control is set as false via ASP.NET, it will be part of the control tree but will never actually get rendered to the page. If it doesn't get rendered to the page, JavaScript can't access it.
If you want to hide it using ASP.NET, you could do it this way in C#...
txthiddenloccount.Style.Add("display", "none");
That will not prevent the control from rendering on the page AND it will use CSS to hide it. Alternatively, you could do this, but it might not be what you want, visually...
txthiddenloccount.Style.Add("visibility", "hidden");
Hope that helps.
So I now have the following jquery to hide or show a textbox based on specific values selected in a DropDownList. This works except that I need the first display of the popup to always be hidden. Since no index change was made in the drop down list, the following does not work for that. If I code it as visible="false", then it always stays hidden. How can I resolve this?
<script language="javascript" type="text/javascript">
var _CASE_RESERVE_ACTION = "317";
var _LEGAL_RESERVE_ACTION = "318";
function pageLoad() {
$(".statusActionDDLCssClass").change(function() {
var value = $(this).val();
if (value == _CASE_RESERVE_ACTION || value == _LEGAL_RESERVE_ACTION) {
$(".statusActionAmountCssClass").attr("disabled", false);
$(".statusActionAmountCssClass").show();
}
else {
$(".statusActionAmountCssClass").attr("disabled", true);
$(".statusActionAmountCssClass").hide();
}
});
}
</script>
Thank you,
Jim in Suwanee, GA
If you set
visible=false
.Net will not render it. You can do
style="display:none;"
and .Net will render the tag properly but CSS will hide it from the user.
Add the following to pageLoad function
function pageLoad(sender, args) {
$("input.statusActionAmountCssClass").hide();
.... rest of code .....
}
By the way, I would recommend using the selector $("input.statusActionAmountCssClass") to get a jQuery object containing a reference to your input, otherwise jQuery will search all elements to match the CSS class .statusActionAmountCssClass
EDIT:
Another change that could also be made is to use jQuery's data() to store the two global variables
$.data(window, "_CASE_RESERVE_ACTION","317");
$.data(window, "_LEGAL_RESERVE_ACTION","318");
then when you need them simply cache the value in a local variable inside the function
function someFunctionThatNeedsGlobalVariableValues() {
var caseReserveAction = $.data(window, "_CASE_RESERVE_ACTION");
var legalReserveAction = $.data(window, "_LEGAL_RESERVE_ACTION");
}
this way, the global namespace is not polluted. See this answer for more on data() command