CODEWITHSUNDEEP
jqueryasp.net
Simon Dugré
Simon Dugré

Reputation: 18916

Disabled controls are losing viewstate; Any alternatives?

I get into a weird scenario where I got 2 asp panels with input and select controls and where each panels have their own save buttons.

When I modify something in panel 1, I make sure users save this information before continuing by disabling any other controls within panel 2 using jquery.

It looks like $(".otherspanelclass *").attr("disabled", "disabled")

This work pretty well; all controls are disabled.

BUT, my problem is when user save and comeback from postbacks, viewstate informations from disabled controls are lost. Disabling is really the cause because if I bypass my jquery function, viewtate do his job.

What can I do?

I tried readonly but it's not quite good for user as controls look normal but are not "clickable" and it seems to work for some control but not for other (works for input type="text" but not for select)

Upvotes: 0

Views: 219

Answers (2)

Sean Wessell
Sean Wessell

Reputation: 3510

I would switch disabled fields to readonly.

A readonly fields are not editable, but they do get sent back to the server when the form submits. Read only fields do have a tabstop associated with them unlike disabled fields, this can be fixed with some simple jQuery. 

$(document).ready(function () {
    $('input[readonly]').attr('tabindex', '-1');
});

The browser also displays read only fields like a normal input however this can be changed with css. (This is the part that can be a pain as each browser renders disabled inputs differently colors/borders ect...Below is chrome)

input[readonly] {
    background-color: rgb(235, 235, 228);
    color: rgb(84,84,84);
    border:1px solid grey;
}

Disabled fields are not editable and do not get sent back the the server on submit.

Example here:

http://jsfiddle.net/SeanWessell/zhj365gn/1/

Upvotes: 1

suff trek
suff trek

Reputation: 39777

Instead of disabling the controls - do use read-only as you said, but in addition apply "disabled" style of your own via CSS. In addition to prevent user interaciton with "disabled" controls you can add .focus(function(){this.blur()} or something similar. Combination of these approaches will simulate "disabled" behaviour while keeping the viewstate.

Upvotes: 0

Related Questions