Develop Reference

User text input handling using TextBox

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"

Am I correctly getting the label text?

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

Javascript does not take hidden text box value?

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.

Print content of a JavaScript tabcontrol: Gridviews

I've got a jQuery tabcontrol (4 tabs), which each of them control 1 gridview.
Now I got a button "print". It activates a JavaScript function, which should build a page, containing all gridviews. I got something, but it does not work:
function doPrintPage() {
myWindow = window.open('', '', 'titlebar=yes,menubar=yes,status=yes,scrollbars=yes,width=500,height=600');
myWindow.document.open();
myWindow.document.writeln("<link href='/styles/Layout.css' type='text/css' rel='stylesheet' ></link>");
myWindow.document.write(document.getElementById('tabcontainer').innerHTML);
myWindow.document.close();
myWindow.focus();
myWindow.print();
return true;
}
I thought it may be the getElementByID() and then something like tabcontainer (which contains the tabs) or tabcontent (the content of each tab) or GridView1 or something, but I could be completely wrong. As I ain't got a clue...

Solution:
function doPrintPage()
{
myWindow = window.open('', '', 'titlebar=yes,menubar=yes,status=yes,scrollbars=yes,width=800,height=600');
myWindow.document.open();
myWindow.document.write("</br>");
myWindow.document.write("<h2>Results</h2>");
myWindow.document.write(document.getElementById('tab1').innerHTML);
myWindow.document.write("</br>");
myWindow.document.write("<h2>Tree</h2>");
myWindow.document.write(document.getElementById('tab2').innerHTML);
myWindow.document.write("</br>");
myWindow.document.write("<h2>Open</h2>");
myWindow.document.write(document.getElementById('tab3').innerHTML);
myWindow.document.write("</br>");
myWindow.document.write("<h2>Free</h2>");
myWindow.document.write(document.getElementById('tab4').innerHTML);
myWindow.document.close();
myWindow.focus();
//myWindow.print();
//myWindow.close();
return true;
}
The separate gridviews were embedded in div's ("tab#"), which were embedded in the tabcontainer.
Simple solution...
select the correct div ID...
Apparently I overlooked this one.

How to initialize textbox to hide for first display and still have jquery work

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