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.
Related
I have this control:
I'm trying to create a kind of validation, that whenever the user enters text to the TextBox, the "Add" button will be Enabled, and when the text is "" (null), the "Add" button is disabled.
I dont want to use validators.
here's the code:
protected void addNewCategoryTB_TextChanged(object sender, EventArgs e)
{
if (addNewCategoryTB.Text != "")
addNewCategoryBtn.Enabled = true;
else
addNewCategoryBtn.Enabled = false;
}
The problam is, that when the user enter's text, the "Add" button doesn't changes from disabled to enabled (and vice versa)...
any ideas?
Is it Web Forms? In Web Forms the TextChanged event of the TextBox won't fire by default.
In order to fire the event, you have to set the AutoPostBack property of the TextBox to true.
BUT, this would perform a HTTP post, what is kink of ugly, or you can wrap that in an UpdatePanel
A more elegant option, is to do that using jQuery, to do that in jQuery, you'll need some code like:
$(document).ready(function() {
$("#<%= yourTextBox.ClientID %>").change(function() {
var yourButton = $("#<%= yourButton.ClientID %>")
yourButton.attr('disabled','disabled');
yourButton.keyup(function() {
if($(this).val() != '') {
yourButton.removeAttr('disabled');
}
});
});
});
You'll need to accomplish this with Javascript, since ASP.NET is incapable of performing such client-side modifications. Think about it ... every time you pressed a letter inside the text box, it would have to postback and refresh the page in order to determine if the text box was empty or not. This is one way that ASP.NET differs from Winforms/WPF.
TextChanged events will make postback on server every time. You don't need to increase those request for such task.
You can use jquery to achieve this
var myButton = $("#btnSubmit");
var myInput=$("#name");
myButton.prop("disabled", "disabled");
myInput.change(function () {
if(myInput.val().length > 0) {
myButton.prop("disabled", "");
} else {
myButton.prop("disabled", "disabled");
}
});
JS Fiddle Demo
You just need to take care of elements Id when you are using Server Controls. For that Either you can use ClientID or set property ClientIdMode="Static"
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 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
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";
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