What is the best way to show/hide a textbox or an entire div section based on a users selection from a dropdown? I don't believe its possible with server controls, so I would have to use regular client side HTML controls, correct? Thanks for any input. Would jQuery be the best option for this?
Based on the drop down selection, I want to be able to display the following Div, and by default hide the Div. Thoughts?:
<div id="divLimitPrice">Limit Price<br />
<asp:TextBox ID="txtLimitPrice" runat="server" ValidationGroup="ValidationGroupOrder"> </asp:TextBox>
You can do it with server controls the same as simple html controls. You only need to correct set the rendered client IDs of the control. Here is an example: (see the notes on the code for what I do)
function TriggerChange(me)
{
// get the drop down control
var cTheDropDown = jQuery("#<%=ddlControl.ClientID%>");
// find the value of the selected one
var SelValue = jQuery('option:selected', cTheDropDown).attr('value');
// now do what you like with it
if(SelValue == "open")
jQuery("#divLimitPrice").show();
else
jQuery("#divLimitPrice").hide();
}
a shorter version of
function TriggerChange(me)
{
// get the selected value from the drop down list
// and base on it, show or hide your div
if(jQuery("#<%=ddlControl.ClientID%>").val() == "open")
jQuery("#divLimitPrice").show();
else
jQuery("#divLimitPrice").hide();
}
And on control you add the trigger as:
<asp:DropDownList ID="ddlControl" runat="server" onchange="TriggerChange(this);">
Related
i am new to development and started developing a simple asp.net application. I am using bootstrap tabs having some asp labels and textboxes in each. I want focus on first textbox in the tab content when click on that tab. I searched various answers but all are for input fields(exp: input type="text"). can't find any for asp textbox. Any help will be appreciated.
Thanks
ASP.NET TextBoxes are HTML textboxes. By default, the ClientIDMode of controls are Predictable. This means the rendered HTML's id is auto-generated.
// ASP.NET TextBox
<asp:TextBox ID="TextBox1"/>
// Rendered HTML
<input type="text" id="ContentPlaceHolder1_TextBox1_1"/>
What you can do is add ClientIDMode="Static" to the TextBox. This will make the rendered (HTML) id of the input the same as the ID you passed to the TextBox.
// ASP.NET TextBox
<asp:TextBox ID="TextBox1" ClientIDMode="Static"/>
// Rendered HTML
<input type="text" id="TextBox1"/>
You can then target that via JavaScript using the answers you've searched for.
EDIT:
If you don't want to target the TextBoxes via id, you can probably just use CSS classes to tag them like:
<asp:TextBox ID="TextBox1" CssClass="default-focus" />
Then with jQuery:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = event.target.attributes.href.value;
var $textbox = $(target + ' .default-focus');
$textbox.focus();
});
There is another way to achieve this though its longer but worked for me.
In this solution we can search which navbar tab we are currently in and then set focus to this tabs contents first text box by using its id.
code:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e)
{
var target = e.target.attributes.href.value;
if (target == "#tab1")
{
$("#<%=txttab1.ClientID%>").focus();
}
else
{
if (target == "#tab2")
{
$("#<%=txttab2.ClientID%>").focus();
}
else
{
if (target == "#tab3")
{
$("#<%=txttab3.ClientID%>").focus();
}
}
}
}
I am using RadListView control with some check boxes and text boxes in the item template. I am wondering if it is possible to access the check boxes and text boxes using javascript? I can set up the RadListView as an object in javascript but I am not sure how to access controls in the various templates.
<telerik:RadCodeBlock ID="CodeBlock1" runat="server">
<script type="text/javascript">
var listView = null;
function GetPatternList() {
listView = $find("<%=Me.rlvShiftPatterns.ClientID %>");
}
</script>
</telerik:RadCodeBlock>
I want to get the value from a check box and then set a value in the text box depending on if the check box is checked or not.
I'm trying to use JavaScript to change properties or attributes of an ASP.NET ListBox's options, but the only changes that the server sees on postback (asp:Button click) are the selected state of the options. I'm ultimately trying to convey that the SS code should ignore certain selected options, and I was hoping I could use something simple like noting its hidden state, setting the option's disabled property, or adding an attribute. The control, and some failed JS lines:
<asp:ListBox ID="lstFacilities" runat="server" SelectionMode="Multiple" Height="200" />
//lbxFacs returned by document.getElementById
lbxFacs.options[f].style.display = 'none';
lbxFacs.options[f].disabled = true;
lbxFacs.options[f].setAttribute('disabled', 'disabled');
I hide them from view after selecting a filter from another control, and that works from the UI standpoint, but the server seems to have no way of knowing they're hidden. I try to disable them, but the Enabled property is always true. Adding attributes is useless too; the Attributes collection is always empty. Server-side snippet:
bool allSelected = lstFacilities.Items[0].Selected; //"All Facilities", only want visible options
foreach (ListItem option in lstFacilities.Items)
{
var optAtts = option.Attributes; //Always empty
if ((allSelected || option.Selected) && option.Value != "All" && option.Enabled)
selectedFacsIDs += "," + facID; //Always gets here when only "All" selected and some options invisible
}
I can't even get changes to the options' text or values to come in SS. I've also tried the jQuery equivalents. Is there any way to rectify this, or will I have to invoke my proven backup plan of having the JS set the value of a hidden input for the server to read which options are valid? Thanks...
I'm using some javascript to disable the checkboxes in a checkboxlist like so:
var objItem = document.getElementById("<%= resCBL.ClientID %>");
var checkBoxes = objItem.getElementsByTagName("input");
if (form1.secTB.value == 0) {
checkBoxes[0].disabled = true;
This code works fine, but when the page renders in IE, the text attribute for the checkbox is rendered as a label, and so only the checkbox seems to grey out, instead of the checkbox AND the text.
If I simply set
Enabled = false
in the .aspx codebehind, it greys out everything, but makes it impossible (with my current method) to re-enable the CB and un-grey the label.
Could anyone tell me how to work around this and help me understand why it's doing this?
Add the disabled attribute to the InputAttributes of the CheckBox instead:
CheckBox1.InputAttributes.Add("disabled", "disabled");
http://geekswithblogs.net/jonasb/archive/2006/07/27/86498.aspx
The problem is that an <asp:checkbox /> control gets rendered out like this:
<span><input type='checkbox'></span>
The real problem comes when you have a checkbox like this: <asp:CheckBox Enabled="false"/>.
This gets rendered out like this:
<span disabled='disabled'><input type='checkbox' disabled='disabled'></span>
If you look at the HTML output from a checkbox control you'll see there is an associated <label for="checkbox_client_id">Text</label> - this is why setting the checkbox as disabled doesn't grey-out the text.
When viewing the page from IE, ASP.NET wraps the <input> and associated <label> with <span disabled="disabled">. IE will disable all elements inside the span, which is why it disabled the checkbox and label.
However, since a span is not a form element, most other browsers follow the W3C rules and ignore the "disabled" attribute it. Disabling a span around the checkbox will only work in IE.
The easiest solution I can think of is to replicate this behavior manually. Wrap the checkbox with a span then, when enabling/disabling the checkbox use CSS to style the span and get the desired effect to work on all browsers.
var objItem = document.getElementById("<%= resCBL.ClientID %>");
var checkBoxes = objItem.getElementsByTagName("input");
if (form1.secTB.value == 0) {
checkBoxes[0].disabled = true;
checkBoxes[0].parentNode.class = "disabled";
}
P.S. Sorry if I sound snarky - IE always annoys me with it's endless "intricacies"
I have asp:DropDownList control which i want to display data to user who don't want to click on it.
But user only want to make Mouse hover over asp:DropDownList Control.
Is there any possible way to make it without using datalist control or gridview ?
If so let me know it please.
<script>
function Open_ddl(ddl) {
document.getElementById(ddl).size = 5
}
function Close_ddl(ddl) {
document.getElementById(ddl).size = 1
}
</script>
...
<asp:DropDownList ID="ddlPostClaim" runat="server" onmouseover="Open_ddl('ddlPostClaim')" onmouseout="Close_ddl('ddlPostClaim')"></asp:DropDownList>
This does however create a new problem where the mouseover over the menu items will not highlight them, at least for me. Nonetheless, it's a start.