One interesting phenomenon I've noted today is that if a checkbox input is not checked, it is not included in the postback variables; no "_xyzcheckbox : off" corresponds with the "_xyzcheckbox: on" alternative (when 'checked').
This leads to an issue of storing check state if the checkbox is hidden on the server and then revealed later; the Checkbox does not know whether or not it is simply hidden (not in the DOM) or if it is being unchecked based on the postback that the browser sends back to the server, as the postback includes no reference to the checkbox if it is unchecked.
I am having an issue where I need to hide a checkbox (using .Visible = false on a parent of the checkbox) and show it depending on the users input, but the state cannot be persisted because of the aforementioned issue.
Has anyone else come across this issue? How have you solved it or gotten around it?
Note: The most obvious answer his hiding the checkbox on the client (setting display: none), this isn't an option though as we're trying to reduce the markup on the page so that postbacks are smaller.
Thanks for the feedback thus far.
Thanks :)
Rather than use .Visible (which removes the checkbox from the emitted markup, and therefore no chance of it being in a POST back), why not apply a CSS class to it?
The CSS could be as follows:
input.hidden {
display: none;
}
In your ASP.NET page simply set the CssClass property:
MyCheckbox.CssClass = "hidden";
And you should be fine.
In the mark-up, you can default selected = "false".
In the code-behind, you can determine the state by mycheckbox.checked, which will either return true or false.
Related
I have a form with a PeoplePicker control on it that I do not want the user to be able to edit.
Normally in situations like these setting the controls Enabled property to false would suffice, however I'm having issues with the value being cleared on postback (the form is very customised with numerous sub-sections that interact with each other).
I've tried the following:
peoplePicker.EnableBrowse = false;
peoplePicker.AllowTypeIn = false;
This solves nearly all my problems, the user cannot enter any values, the value is not cleared on postback, HOWEVER, the user is able to delete the current value.
How can I completely prevent the user from editing the controls value without setting Enabled to false?
Any help is greatly appreciated. Thanks.
EDIT: Forgot to mention this needs to be done server side, there's a lot of logic on the form revolving around the users AD group and their sharepoint permissions so javascript isn't really an option.
SharePoint people picker is basically a div with contenteditable property. If you can inject javascript, here is the solution:
http://www.stuartroberts.net/index.php/2012/03/05/quick-tip-5/
You could prevent users from deleting value by pressing event of Backspace and Delete keys using JavaScript/jQuery solution.
Solution
Along with specifying EnableBrowse and AllowTypeIn properties, add the following script on the page where PeopleEditor control resides:
$("body").on("keydown", "span", function(e) {
if ( (e.keyCode == 8 || e.keyCode == 46) && e.target.id.indexOf("userPicker_upLevelDiv") > -1)
e.preventDefault();
});
This is may be very noobish and a bit embarrassing but I am struggling to figure out how to make checkboxes 'checked' using CSS?
The case is that if a parent has a class setup (for example) I'd like to have all the checkboxes having setup as parent to be checked. I'm guessing this is not doable in pure CSS, correct? I don't mind using JS but am just very curious if I could toggle the state of the checkboxes along with that of their parent (by toggling the class).
Here's a fiddle to play around with.
A checkbox being "checked" is not a style. It's a state. CSS cannot control states. You can fake something by using background images of check marks and lists and what not, but that's not really what you're talking about.
The only way to change the state of a checkbox is serverside in the HTML or with Javascript.
EDIT
Here's a fiddle of that pseduo code. The things is, it's rather pointless.
It means you need to adding a CSS class to an element on the server that you want to jQuery to "check". If you're doing that, you might as well add the actually element attribute while you're at it.
http://jsfiddle.net/HnEgT/
So, it makes me wonder if I'm just miss-understanding what you're talking about. I'm starting to think that there's a client side script changing states and you're looking to monitor for that?
EDIT 2
Upon some reflection of the comments and some quick digging, if you want a JavaScript solution to checking a checkbox if there's some other JavaScript plugin that might change the an attribute value (something that doesn't have an event trigger), the only solution would be to do a simple "timeout" loop that continuously checks a group of elements for a given class and updates them.
All you'd have to do then is set how often you want this timeout to fire. In a sense, it's a form of "long polling" but without actually going out to the server for data updates. It's all client side. Which, I suppose, is what "timeout" is called. =P
Here's a tutorial I found on the subject:
http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
I'll see if I can whip up a jQuery sample.
UPDATE
Here's a jsfiddle of a timeout listener to check for CSS classes being added to a checkbox and setting their state to "checked".
http://jsfiddle.net/HnEgT/5/
I added a second function to randomly add a "checked" class to a checkbox ever couple of seconds.
I hope that helps!
Not possible in pure css.
However, you could have a jQuery event which is attached to all elements of a class, thereby triggering the check or uncheck based on class assignments.
Perhaps like this:
function toggleCheck(className){
$("."+className).each( function() {
$(this).toggleClass("checkedOn");
});
$(".checkedOn").each( function() {
$(this).checked = "checked";
});
}
I have a read-only form filled out automatically from a database. I have several fields with true/false values, and would like them displayed as checkboxes that are either empty or checked. I can databind the checkbox control and disable it, but then it appears grayed out. Is there a simple way to change this so it will show up at a normal, easy-to-read boldness but still be disabled? If not, what's the best way to do this? Should I use an image?
You can go like this as well.
<asp:CheckBox id="checkbox1" Text="Custom" onclick="javascript: return false;" />
Which will render it as
<input type="checkbox"
checked onclick="javascript: return false;">Custom</input>
Interesting question!
There's only one issue I can see with using images instead of normal checkboxes, and that's how the active checkboxes will differ from the disabled (image-based) checkboxes. So, if you go the image route, you will probably want to style all checkboxes. :)
You can effectively disable any checkbox with the following jQuery method (I've only tested in Chrome and IE 9, so far).
$('.readonly:checkbox').click(function(e) {
e.preventDefault();
});
This will "disable" any checkbox with the "readonly" class.
Or, you can use an inline JavaScript function (albiet not recommended, as it adds clutter and confusion):
<input type="checkbox" onclick="event.preventDefault();" />
The reason you would use "preventDefault()" instead of "return false", is because returning false will stop propagation. This means that your click event will not bubble to the parent element. That could potentially cause problems with other code... but it's unlikely.
Also, like Bala R mentioned, you mustn't rely on these restrictions to work. Your server side code should be aware that these values are read only, and refrain from updating them.
Here is jsFiddle example: http://jsfiddle.net/xixionia/3rXCB/
I hope this is helpful! :)
You can do something like this with javascript and use it for the checkbox's onclick handler.
jsFiddle link
function makeMeReadonly(checkbox){
checkbox.checked = !checkbox.checked;
}
and
<asp:CheckBox id="checkbox1" onclick="makeMeReadonly(this)" />
or
<asp:CheckBox id="checkbox1" onclick="this.checked = !this.checked" />
if you want it inline.
but you shouldn't depend on this for security as it will be a regular check box when javascript is not available and/or client code is not that difficult to work around client code restrictions but in your case since you have a readonly view, I wouldn't think you have any logic to save changes.
I just had the same problem and fixed it with an OnClick event on the checkbox. In the event handler the .Checked state is set to the value it is supposed to display.
private void chkBox_CheckStateChanged(object sender, EventArgs e)
{
chkBox.Checked = boolDatabasevalue;
return;
}
Works great, the user can click on the checkbox but the check mark does not change.
The only issue is a slight border shadow indicating the Focus. But the checkmark is, as OP was looking for, of easy-to-read boldness.
NB: this is C#, but in Asp.Net this should work similarly.
I'm using the AutoComplete control from the ASP.NET AJAX Control Toolkit and I'm experiencing an issue where the AutoComplete does not populate when I set the focus to the assigned textbox.
I've tried setting the focus in the Page_Load, Page_PreRender, and Page_Init events and the focus is set properly but the AutoComplete does not work. If I don't set the focus, everything works fine but I'd like to set it so the users don't have that extra click.
Is there a special place I need to set the focus or something else I need to do to make this work? Thanks.
We had exactly the same problem. What we had to do is write a script at the bottom of the page that quickly blurs then refocuses to the textbox. You can have a look at the (terribly hacky) solution here: http://www.drive.com.au
The textbox id is MainSearchBox_SearchTextBox. Have a look at about line 586 & you can see where I'm wiring up all the events (I'm actually using prototype for this bit.
Basically on the focus event of the textbox I set a global var called textBoxHasFocus to true and on the blur event I set it to false. The on the load event of the page I call this script:
if (textBoxHasFocus) {
$get("MainSearchBox_SearchTextBox").blur();
$get("MainSearchBox_SearchTextBox").focus();
}
This resets the textbox. It's really dodgy, but it's the only solution I could find
this is waste , its simple
this is what you need to do
controlId.focus(); in C#
controlID.focus() in VB
place this in page load or button_click section
eg. panel1.focus(); if panel1 has model popup extender attached to it, then we put this code in page load section
How are you setting focus? I haven't tried the specific scenario you've suggested, but here's how I set focus to my controls:
Public Sub SetFocus(ByVal ctrl As Control)
Dim sb As New System.Text.StringBuilder
Dim p As Control
p = ctrl.Parent
While (Not (p.GetType() Is GetType(System.Web.UI.HtmlControls.HtmlForm)))
p = p.Parent
End While
With sb
.Append("<script language='JavaScript'>")
.Append("function SetFocus()")
.Append("{")
.Append("document.")
.Append(p.ClientID)
.Append("['")
.Append(ctrl.UniqueID)
.Append("'].focus();")
.Append("}")
.Append("window.onload = SetFocus;")
.Append("")
.Append("</script")
.Append(">")
End With
ctrl.Page.RegisterClientScriptBlock("SetFocus", sb.ToString())
End Sub
So, I'm not sure what method you're using, but if it's different than mine, give that a shot and see if you still have a problem or not.
What I normally do is register a clientside script to run the below setFocusTimeout method from my codebehind method. When this runs, it waits some small amount of time and then calls the method that actually sets focus (setFocus). It's terribly hackish, but it seems you have to go a route like this to stop AJAX from stealing your focus.
function setFocusTimeout(controlID) {
focusControlID = controlID;
setTimeout("setFocus(focusControlID)", 100);
}
function setFocus() {
document.getElementById(focusControlID).focus();
}
I found the answers from Glenn Slaven and from Kris/Alex to get me closer to a solution to my particular problem with setting focus on an ASP.NET TextBox control that had an AutoCompleteExtender attached. The document.getElementById(focusControlID).focus() kept throwing a javascript error that implied document.getElementById was returning a null object. The focusControlID variable was returning the correct runtime ClientID value for the TextBox control. But for whatever reason, the document.getElementById function didn't like it.
My solution was to throw jQuery into the mix, as I was already using it to paint the background of any control that had focus, plus forcing the Enter key to tab through the form instead of firing a postback.
My setFocus function ended up looking like this:
function setFocus(focusControlID) {
$('#' + focusControlID).blur();
$('#' + focusControlID).focus();
}
This got rid of the javascript runtime error, put focus on the desired TextBox control, and placed the cursor within the control as well. Without first blurring then focusing, the control would be highlighted as if it had focus, but the cursor would not be sitting in the control yet. The user would still have to click inside the control to begin editing, which would be an UX annoyance.
I also had to increase the timeout from 100 to 300. Your mileage my vary...
I agree with everyone that this is a hack. But from the end-user's perspective, they don't see this code. The hack for them is if they have to manually click inside the control instead of just being automatically placed inside the control already and typing the first few letters to trigger the auto lookup functionality. So, hats off to all who provided their hacks.
I hope this is helpful to someone else.
I am building a server control that will search our db and return results. The server control is contains an ASP:Panel. I have set the default button on the panel equal to my button id and have set the form default button equal to my button id.
On the Panel:
MyPanel.DefaultButton = SearchButton.ID
On the Control:
Me.Page.Form.DefaultButton = SearchButton.UniqueID
Works fine in IE & Safari I can type a search term and hit the enter key and it searches fine. If I do it in Firefox I get an alert box saying "Object reference not set to an instance of an a object.
Anyone run across this before?
Is SearchButton a LinkButton? If so, the javascript that is written to the browser doesn't work properly.
Here is a good blog post explaining the issue and how to solve it:
Using Panel.DefaultButton property with LinkButton control in ASP.NET
Ends up this resolved my issue:
SearchButton.UseSubmitBehavior = False
I might be wrong and this might not make a difference but have you tried:
Me.Page.Form.DefaultButton = SearchButton.ID
instead of
Me.Page.Form.DefaultButton = SearchButton.UniqueID