What is the preferred method to change the visibility property of a .NET Ajax Control Toolkit CascadingDropDown control? I would like to render the control "invisible" when a null value is returned from a query.
It appears that "OnSelectedIndexChanged" event does not fire from the <asp:DropDownList> when using the toolkit extender.
Honestly, I would just target the DropDownList that the CascadingDropDownExtender is attached to with the display:none css style. You could do this in javascript on the page like this:
<script type="text/javascript">
function hideDDL(){
// Get the DropDownList by its ID value
var ddl = document.getElementById("<%= myDropDownList.ClientID %>");
// If there are no items in the drop down, hide it
if (ddl.options.length == 0)
ddl.style.display = "none";
}
</script>
And then, in your DropDownList markup, just add the function above to the client-side onchange event:
<asp:DropDownList runat="server" ID="myDropDownList" onchange="hideDDL();" ... >
...
</asp:DropDownList>
Note: Obviously, you will want logic in the javascript function to indicate whether or not the DropDownList should be hidden (such as checking to see if the control has no elements to select, etc). If you have trouble with that, let me know and I can try and help with that too.
EDIT: I have added a possible example of said logic =)
Related
I like to add a validation on a label based on its visibility, in that a submit button will raise a validation message or error if the label is not visible.
I am used to the validation controls in the Toolbox, which wont allow this functionality!
It seems as though if an asp:Label's visibility is set to false, the asp.net engine will not even put it in the DOM. So you can check in javascript, using the onclick property of the (html) button to check if the label is in the DOM or not, and use asp.net's __doPostBack() javascript function to post back to the server if it is there:
<script type="text/javascript">
function testMe()
{
var lbl = document.getElementById('lblTest');
if(lbl == null)
document.getElementById('msg').innerHTML = "Error";
else
__doPostBack('testButton');
}
</script>
<asp:Label ID="lblTest" runat="server" Visible="false" Text="Hello"></asp:Label>
<button onclick="testMe();">test</button>
To be completely honest, I thought the lbl would be undefined if the label did not exist in the DOM, but Firebug revealed it is actually null. Anyway, a couple things to note is that in order for asp.net to define the __doPostBack() method, I believe you need some control in the form that has autopostback="true", and in the code-behind you can check what caused the postback in the Page_Load method like so:
if(Request.Form["__EVENTTARGET"] == "testButton") {}
I can add an attribute to items in a RadioButtonList item like so:
PaymentMethodDropDownList.Items[0].Attributes.Add("onclick", "javascript:showNoMethods();");
PaymentMethodDropDownList.Items[1].Attributes.Add("onclick", "javascript:showCreditCardMethod();");
PaymentMethodDropDownList.Items[2].Attributes.Add("onclick", "javascript:showSendPaymentMethod();");
However, when I try to add the attributes to a DropDownList control it doesn't seem to work. I would expect it to be similar.
This cannot be done in the same way as a radioButtonList, for a dropdownlist, the correct attribute event name is "onchange" instead of "onclick".
The event should be attached to DropDownList Itself and not the items as follows:
PaymentMethodDropDownList.Attributes.Add("onchange",
"showCreditCardMethod();");
Also, this is a little bit more complicated and requires a custom javascript function to perform a different action depending on the option selected. Here's an example:
PaymentMethodDropDownList.Attributes.Add("onchange",
"handleDropDownEvents(this);");
Custom Javascript function: this assumes that values for the dropdown items are "CreditCard" and "SendPayment".
<script type="text/javascript">
function handleDropDownEvents(e){
if(e.value == "CreditCard"){
showCreditCardMethod();
}
else if(e.value == "SendPayment"){
showSendPaymentMethod();
}
}
</script>
Actualy for a DropDownList in ASP .Net, the property you're looking for is OnSelectedIndexChanged or OnTextChanged . Both does quite the same job.
Hope this help ;)
What is the best way to access an ASP.NET HiddenField control that is embedded in an ASP.NET PlaceHolder control through JavaScript? The Visible attribute is set to false in the initial page load and can changed via an AJAX callback.
Here is my current source code:
<script language="javascript" type="text/javascript">
function AccessMyHiddenField()
{
var HiddenValue = document.getElementById("<%= MyHiddenField.ClientID %>").value;
//do my thing thing.....
}
</script>
<asp:PlaceHolder ID="MyPlaceHolder" runat="server" Visible="false">
<asp:HiddenField ID="MyHiddenField" runat="server" />
</asp:PlaceHolder>
EDIT: How do I set the style for a div tag in the ascx code behind in C#? This is the description from the code behind: CssStyleCollection HtmlControl.Style
UPDATE: I replaced the asp:hiddenfield with an asp:label and I am getting an "undefined" when I display the HiddenValue variable in a alert box. How would I resolve this.
UPDATE 2: I went ahead and refactored the code, I replaced the hidden field control with a text box control and set the style to "display: none;". I also removed the JavaScript function (it was used by a CustomValidator control) and replaced it with a RequiredFieldValidator control.
My understanding is if you set controls.Visible = false during initial page load, it doesn't get rendered in the client response.
My suggestion to solve your problem is
Don't use placeholder, judging from the scenario, you don't really need a placeholder, unless you need to dynamically add controls on the server side. Use div, without runat=server. You can always controls the visiblity of that div using css.
If you need to add controls dynamically later, use placeholder, but don't set visible = false. Placeholder won't have any display anyway, Set the visibility of that placeholder using css. Here's how to do it programmactically :
placeholderId.Attributes["style"] = "display:none";
Anyway, as other have stated, your problems occurs because once you set control.visible = false, it doesn't get rendered in the client response.
If the Visibility is set to false server-side, the placeholder won't be rendered and you won't be able to access anything inside it from JavaScript. Your code should work when the placeholder is visible="true"
Get rid of the placeholder, leave the hidden field empty at first, after the search populate it.
Try this:
function popup(lid)
{
var linkid=lid.id.toString();
var lengthid=linkid.length-25;
var idh=linkid.substring(0,parseInt(lengthid));
var hid=idh+"hiddenfield1";
var gv = document.getElementById("<%=GridViewComplaints.ClientID %>");
var gvRowCount = gv.rows.length;
var rwIndex = 1;
var username=gv.rows[rwIndex].cells[1].childNodes[1].innerHTML;
var prdid=gv.rows[rwIndex].cells[3].childNodes[1].innerHTML;
var msg=document.getElementById(hid.toString()).value;
alert(msg);
document.getElementById('<%= Labelcmpnme.ClientID %>').innerHTML=username;
document.getElementById('<%= Labelprdid.ClientID %>').innerHTML=prdid;
document.getElementById('<%= TextBoxviewmessage.ClientID %>').value=msg;
return false;
}
<ItemTemplate>
<asp:LinkButton ID="LabelComplaintdisplayitem" runat ="server" Text='<%#Eval("ComplaintDisp").ToString().Length>5?Eval("ComplaintDisp").ToString().Substring(0,5)+"....":Eval("ComplaintDisp") %>' CommandName ="viewmessage" CommandArgument ='<%#Eval("username")+";"+Eval("productId")+";"+Eval("ComplaintDisp") %>' class='basic' OnClientClick =" return popup(this)"></asp:LinkButton>
<asp:HiddenField ID="hiddenfield1" runat ="server" Value='<%#Eval("ComplaintDisp")%>'/>
</ItemTemplate>
If the place holder visibility is set to false, it will never be rendered , and the hidden field value will be only stored in the ViewState of the page.
just one question, why are you setting the visibility of the place holder to be false , if its containing a hidden field?
Anyway one possible way to get over this issue, is adding a TextBox or Label object , and set the display CSS style of it to "none" , then in your code copy whatever you are putting in the hidden field into the textbox/lable text property, this way you can easily read the value using javascript , since the textbox/label will be rendered but not visible to others, though this might not be that safe thing to do.
Instead of making ".visible=false", change the style to "display: none;". That will render your control but make it invisible.
Visible doesn't actually make it visible, you can leave it default. Just runat="server" and use its .Value.
Bascially I want to know the best way to hide/show an ASP.NET control from a Javascript function. I figured I would just access the control in Javascript using:
var theControl = document.getElementById("txtEditBox");
Then just set the control's Visible property to true/false. It doesn't seem to be working, I can't seem to figure out how to set "Visible" to true/false. How can I do that? Also, is that the best way to hide/show a ASP.NET control from a Javascript function?
Thanks,
Jeff
The "Visible" property of an ASP.NET control determines whether or not it will be rendered on the client (i.e. sent to the client). If it is false when the page is rendered, it will never arrive at the client.
So, you cannot, technically, set that property of the control.
That said, if the control is rendered on the client because the Visible property is true when the page is rendered, you can then hide it using javascript like this:
var theControl = document.getElementById("txtEditBox");
theControl.style.display = "none";
// to show it again:
theControl.style.display = "";
That assumes that the control's id attribute really is "txtEditBox" on the client and that it is already visible.
Also, is that the best way to hide/show a ASP.NET control from a Javascript function?
There is not necessarily a "best" way, although one better approach is to use CSS class definitions:
.invisible { display: none; }
When you want to hide something, dynamically apply that class to the element; when you want to show it again, remove it. Note, I believe this will only work for elements whose display value starts off as block.
instead of using visible, set its css to display:none
//css:
.invisible { display:none; }
//C#
txtEditBox.CssClass = 'invisible';
txtEditBox.CssClass = ''; // visible again
//javascript
document.getElementById('txtEditBox').className = 'invisible'
document.getElementById('txtEditBox').className = ''
Set the style to "display: none".
var theControl = document.getElementById("<%= txtEditBox.ClientID %>");
theControl.style.display = "none";
You can't hide/ show the ASP.NET version of the control as that only exists in a server context. To use JavaScript you need to play with the controls style/ visibility state.
The only kind-of way to do it would be to wrap the control in an UpdatePanel and have something like this:
<asp:UpdatePanel ID="panel" runat="server">
<ContentTemplate>
<asp:TextBox ID="myTextBox" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsynchronousPostbackTrigger ControlID="button" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="button" runat="server" OnClick="toggle" Text="Click!" />
Then you need this in your code behind:
protected void toggle(object sender, EventArgs e){
myTextBox.Visibility = !myTextBox.Visibility;
}
Now when you click the button an async postback occurs and it will refresh the UpdatePanel.
Note: This is not a good solution, as it'll be a very heavy AJAX request, because you need to submit the ViewState.
Also, it may not be 100% right, I did that from memory.
This should hide the control:
theControl.style.display = 'none';
You can use the display property for this. But as Jason noted, this is a DHTML DOM (client-side) property that is completely independent from the ASP.NET (server-side) Visible property which controls rendering.
theControl.style.display = "none";
Display Property
You want to set the display style property to 'none' (to hide) or null to show.
var theControl = document.getElementById("txtEditBox");
theControl.style.display = 'none';
theControl.style.display = null;
Doing it the jQuery way:
$('#txtEditBox').hide();
$('#txtEditBox').show();
Or if you don't want to use css:
<asp:TextBox ID="txtBox" runat="server" style="display:none;">
I think the best solution is to put your ASP control inside a div and set the property display to the div element.
<div id="divTest">
<asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
</div>
<script type="text/javascript">
SIN JQuery
document.getElementById('divTest').style.display = "none";
CON JQuery
$('#divTest').hide();
</script>
A TextBox is set to AutoPostback as changing the value should cause a number of (display-only) fields to be recalculated and displayed.
That works fine.
However, when the field is tabbed out of, the focus briefly moves on to the next field, then disappears when the page is redrawn so there is no focus anywhere.
I want the focus to be on the new field, not the textbox I've just changed.
Is there a way to work out which field had the focus and force it to have it again when the page is redrawn?
This is "by design". If you are using ASP.NET 2.0+ you can try calling the Focus method of your TextBox once the postback occurs (preferably in the TextChanged event of the TextBox).
I am not sure if there is any built-in way to track focus but I found this article in CodeProject which should do the trick.
You could also consider refresh display-only fields using AJAX UpdatePanel. This way you won't lose focus from the new field.
Also I have proposed pure server-side solution based on WebControl.Controls.TabIndex analysis, you can use it, if you like.
This is what is happening:
1) TAB on a field - client event
2) Focus on next field - client event
3) Postback - server event
4) Page redrawn - client event new page overrides preious client events
The solution of your problem is to:
a) get the element that has gained focus BEFORE postback
<script>
var idSelected;
$("input").focusin(function () {
idSelected = this.id;
});
</script>
b) store the ClientID (actually in var idSelected) somewhere (i.e. an hidden Textbox, vith ViewState = true) BEFORE postback
** b) get ClientID ** (extract from hidden TextBox and put it in var idSelected) AFTER postback
d) get the element with ClientID and set focus AFTER postback
<script>
$(document).ready(function () {
if (idSelected != null) {
$("#" + idSelected).focus();
idSelected = null;
});
});
</script>
Note: this sample scripts use JQuery.
Remember to put Jquery.js in your solution and a reference in your page
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<asp:ScriptManager runat="server" >
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery.js" ScriptMode="Auto" />
....
Note2: this solution works without AJAX.
Look at this answer: to make Javascript work over Ajax you must use code like this:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function EndRequestHandler(sender, args)
{
MyScript();
}
</script>