Hey I have a Terms and Conditions Text area which has a scroll bar and a normal ASP.NET button below that.
I was wondering how could I disable this button till the user scroll till the end of terms and conditions.
This is something that's best accomplished client-side - are you already using a library such as jQuery or something else?
Setting up the following works a treat:
<asp:TextBox runat="server" id="termsConditions"
TextMode="MultiLine" Rows="10" Columns="50">
Lots of text here[...]
</asp:textbox>
<asp:button runat="server" id="accept" text="Accept" />
<script type="text/javascript">
// Using jQuery, other options are available
// pick up the button, and disable it, keeping the button for later.
// Note the use of the ClientID property of the ASP.NET controls - this allows
// us to cleanly pick up the client side id of the objects.
var button = $("#<%= accept.ClientID %>");
button.attr("disabled", "disabled");
// pick up the textarea.
var terms = $("#<%= termsConditions.ClientID %>");
// bind to the textarea's scroll event
terms.scroll(
function () {
// Compare the scollHeight (the complete height of the textarea), with the
// combination of the current position (scrollTop) and the offsetHeight.
if (terms[0].scrollHeight < (terms[0].offsetHeight + terms[0].scrollTop)) {
// Re-enable the button
button.attr("disabled", null);
}
});
</script>
ours is not to reason why, here's an example
http://www.27seconds.com/kb/article_view.aspx?id=56
Related
Hi,
I want to hide first calendar when a second is open or when the calendar field lost focus. The issue is that if the user doesn't select any date from calendar and go to other control in page the calendar doesn't hide, only when user select any date from calendar the popup hides. This capture show the problem.
I see that in ajaxtoolkit calendarextender sample page the calendar control works fine, when out from one to another calendar prior popup hides but I don't find the sample code of this page. I think this page manage in javascript the event when the focus is lost, but I had found any sample code or project ...
Thank you in advance!
As Yuri mentions, using an ImageButton fixes this... or...
You need to handle the onmouseout event. You can do it this way:
http://forums.asp.net/p/1182269/4708411.aspx/1?Re+Calendarextender+and+Lose+Focus+Or+Mouse+Out
Or you could add some javascript (via jQuery) and inject an onmouseout event:
Adding extra functions to an image's onmouseout attribute
This is also shown in the forums.asp.net link, but basically, on the onmouseout event you can just set the visibility of the calendar extender to hidden or none.
As an option in addition to solutions provided by dash, you may use following decision if you don't want to use ImageButton instead of Image for PopupButton: set OnClientShowing properties on extenders to "hideAnotherOpenedPoups" and add onto a page script below.
// Array of BehaviorIds of each extender for those you use Image as PopupButton
var behaviorIds = ["CalendarExtender1", "CalendarExtender2"];
function hideAnotherOpenedPoups(sender) {
for (var index = 0; index < behaviorIds.length; index++) {
if (behaviorIds[index] !== sender.get_id()) {
var extender = $find(behaviorIds[index]);
if (extender.get_isOpen()) {
extender.hide.call(extender);
}
}
}
}
Try the following line of code to show the calendar on both Textbox and Image click.
<asp:TextBox runat="server" onclick="showCalendar();" onfocusout="showCalendar();" ID="txtDate" />
<asp:ImageButton runat="Server" ID="imgPopup" AlternateText="Click to show calendar" />
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" CssClass="MyCalendar" Format="MMMM d, yyyy" PopupButtonID="imgPopup" />
and add a javascript function like this
<script type="text/javascript">
function showCalendar() {
$( "#<%=imgPopup.ClientID %>" ).trigger( "click" ); //I've used .ClientID here just in case your page is inherited from a Master page
}
</script>
That should display the calendar when you click on the Textbox, and the calendar will be hidden once you click anywhere else on the form
My UserControl has a TextBox, that is subscribed to OnTextChanged event. However, since a lots of business logic and integrations happens on server, I want to disable a form while postback is being performed with some client-side javascript and I'm not sure how to achieve it the right way.
Can I solve this with ClientScriptManager.GetPostBackEventReference?
Edit: as my question seems to be misunderstood:
TextBox is subscribed to event OnTextChanged="tb_TextChanged" which will result on client in onchange=__doPostBack('tb') so I want to inject my javascript disableForm() to onchange DOM event. I know how to implement disableForm(), the question is how to inject my javascript properly?
I would suggest you use the javascript onblur event and check if the field value is changed. If so, you can use jQuery like the below to disable the form elements.
To disable a form element such as a text input or a button (with a made-up id: #elm):
$("#elm").attr("disabled", "disabled");
To enable a disabled form element:
$("#elm").removeAttr("disabled");
You should be able to do this with some simple JavaScript:
<script type="text/javascript">
disableFormFields = function(){
if (document.all || document.getElementById){
for (i = 0; i < document.forms[0].elements.length; i++){
var el = document.forms[0].elements[i];
if (el){
el.disabled = true;
}
}
}
}
</script>
<asp:TextBox ID="TextBox1" runat="server" onchange="disableFormFields();" OnTextChanged="TextBox1_TextChanged" />
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>
I have a ASP.NET page with an asp:button that is not visible. I can't turn it visible with JavaScript because it is not rendered to the page.
What can I do to resolve this?
If you need to manipulate it on the client side, you can't use the Visible property on the server side. Instead, set its CSS display style to "none". For example:
<asp:Label runat="server" id="Label1" style="display: none;" />
Then, you could make it visible on the client side with:
document.getElementById('Label1').style.display = 'inherit';
You could make it hidden again with:
document.getElementById('Label1').style.display = 'none';
Keep in mind that there may be issues with the ClientID being more complex than "Label1" in practice. You'll need to use the ClientID with getElementById, not the server side ID, if they differ.
Try this.
<asp:Button id="myButton" runat="server" style="display:none" Text="Click Me" />
<script type="text/javascript">
function ShowButton() {
var buttonID = '<%= myButton.ClientID %>';
var button = document.getElementById(buttonID);
if(button) { button.style.display = 'inherit'; }
}
</script>
Don't use server-side code to do this because that would require a postback. Instead of using Visibility="false", you can just set a CSS property that hides the button. Then, in javascript, switch that property back whenever you want to show the button again.
The ClientID is used because it can be different from the server ID if the button is inside a Naming Container control. These include Panels of various sorts.
Continuing with what Dave Ward said:
You can't set the Visible property to false because the control will not be rendered.
You should use the Style property to set it's display to none.
Page/Control design
<asp:Label runat="server" ID="Label1" Style="display: none;" />
<asp:Button runat="server" ID="Button1" />
Code behind
Somewhere in the load section:
Label label1 = (Label)FindControl("Label1");
((Label)FindControl("Button1")).OnClientClick = "ToggleVisibility('" + label1.ClientID + "')";
Javascript file
function ToggleVisibility(elementID)
{
var element = document.getElementByID(elementID);
if (element.style.display = 'none')
{
element.style.display = 'inherit';
}
else
{
element.style.display = 'none';
}
}
Of course, if you don't want to toggle but just to show the button/label then adjust the javascript method accordingly.
The important point here is that you need to send the information about the ClientID of the control that you want to manipulate on the client side to the javascript file either setting global variables or through a function parameter as in my example.
You need to be wary of XSS when doing stuff like this:
document.getElementById('<%= Label1.ClientID %>').style.display
The chances are that no-one will be able to tamper with the ClientID of Label1 in this instance, but just to be on the safe side you might want pass it's value through one of the AntiXss library's methods:
document.getElementById('<%= AntiXss.JavaScriptEncode(Label1.ClientID) %>').style.display
This is the easiest way I found:
BtnUpload.Style.Add("display", "none");
FileUploader.Style.Add("display", "none");
BtnAccept.Style.Add("display", "inherit");
BtnClear.Style.Add("display", "inherit");
I have the opposite in the Else, so it handles displaying them as well. This can go in the Page's Load or in a method to refresh the controls on the page.
If you wait until the page is loaded, and then set the button's display to none, that should work. Then you can make it visible at a later point.
Make sure the Visible property is set to true or the control won't render to the page. Then you can use script to manipulate it.