Client side javaScript to toggle dropdownlists effects reversed on the 2nd postback.

Question

I have some JavaScript to toggle a dropdownlists in a ASP.NET page , which gets called when I click a button. I have like 4-5 dropdownlist/Toggle button pair. Each toggle button toggles the enable/disable property on the associated dropdownlist.

I save the disabled property value of a hidden field to track the disabled state of a button between postbacks, with the following javascript

function disableButton(dropdownID)
{
    var element = document.getElementById(dropdownID); // get the DOM element
    var trackingField = document.getElementById("_tracking" + dropdownID);
    if (element) { 
        trackingField.value = element.disabled; 
//sending the element.disabled instead of "!element.disabled" since we are
//setting dropdownlist.enabled property so is already negated for us
        element.disabled = !element.disabled; // invert the boolean attribute
    }
    return false; // prevent default action
}

HTML

    <input type="hidden" name="_trackingdropdownlist" id="_trackingdropdownlist" value="true" />

Code

 if (Request.Params[_trackingdropdownlist] != null)
            {
              bool val = true;
              bool.TryParse(Request.Params[_trackingdropdownlist], out val);
              dropdownlist.Enabled = val;

            }

So the state of the dropdownlist are maintained on the first postback round trip but after that all the dropdownlist get enabled. What is going wrong here?

*Note: The default enabled property value on these dropdownlist are false.

Answer 1

your hidden elements are not server elements, and their values are being lost across postbacks. when the page reloads, the hidden elements are recreated with the value "true" as you specify. when you check the request value at the second postback, all the hidden elements that haven't been modified between 1st and 2nd postbacks will contain true.

make them server elements so any changes you make are maintained in viewstate.

Answer 2

Also, to help track what is being sent to the server on each of the postbacks, you can use a tool like FiddlerTool to trace the http requests. You'll be able to see if your viewstate and hidden form field state is lost between requests.

Also, looking at the code for the function "disableButton", it really seems like it toggles the button, and not disables it per se (given the element.disabled = !element.disabled). If you really want to disable the button, you should include avoid logic like "A = !A", which would simply toggle between states on every execution of the statement.

So if the wireup is incorrect, then lincolnk's answer will point you in the right direction, otherwise, I suggest you look at how your function is written which would only disable the button on every other postback.