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

Question

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

Answer 1

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.

Answer 2

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