I've written a web page that uses an ASP.NET CustomValidator to validate the input of a text field (client side). The text field uses JQuery UI Autocomplete - and this is where I run into problems.
The validator works just fine. But in the event that the validation fails and the user gets an error message, the user will go back to the text field and enter a new value - choosing from the drop down made by the autocomplete plugin. Now when a new value has been chosen and the user leaves the input field, the validation code doesn't fire again. I suspect that it is because, for some reason, it is not detected that the text was changed, when the value came from the autocomplete helper. Does that make sense?
Does anyone know how I can force the field to validate via the CustomValidator when the user removes focus from the field?
Heres the CustomValidator:
<asp:CustomValidator EnableClientScript="True" runat="server" ControlToValidate="tbInput"
ID="inputCustomValidator" ClientValidationFunction="validateFunction" ErrorMessage="Not valid"
Display="Dynamic" ValidationGroup="ValidationGrp1" />
The javascript that is called is not interesting - since it is not being called. That is what I want to achieve.
I found a way to do this. In javascript I added a blur() function to the element I wanted to validate and made that function trigger Page_ClientValidate('validationGroupName'). A functionality that was new to me.
$('.elementToValidate').blur(function () {
Page_ClientValidate('ValidationGrp1');
});
This might not be what you want to hear, but I would avoid mixing jQuery and ASP.net's Javascript whenever possible - they don't tend to play nicely.
In your case, I'd recommend dumping your ASP.net CustomValidator and switching to jQuery's Validate plugin. That will play much more nicely with jQuery UI.
You can also use autoselect's select: handler to trigger validation.
$(".someClass").autocomplete({
select: function(event, ui)
{
Page_ClientValidate(ui);
}
});
I got this working by setting the onBlur event for my textbox.
<asp:TextBox ID="TextBox1" runat="server" onBlur="Page_ClientValidate('ValidationGrp1');"></asp:TextBox>
(assuming your CustomValidator's ValidationGroup is 'ValidationGrp1')
Related
i want my textbox to fire a textChanged client side (JS) event when a text is changed inside it.
i read many posts about it. most of them are talking about a code-behind event and the ones that talk about the client side tells to add attribute of onchange:
<asp:TextBox runat="server" ID="TextBox1" onchange="javascript: ontextchanged();"></asp:TextBox>
but this event only fires when i lose the focus on the textbox.
what is the solution to this ?
how can i fire a JS function each time a text is changed inside the textbox?
Use onkeyup or onkeydown instead.
This will then run the function when you type or click on the textbox. You can also then detect the keycode of the event, and prevent the function if you dont want it to run for certain keys.
Try this http://www.zurb.com/playground/jquery-text-change-custom-event
I'm looking to create a custom date picker with code examples from several sources.
Is the code to display/hide an ASP.NET control when a user clicks a button usually done with JavaScript or ASP.NET code? By display/hide, I mean within the page not a popup window.
Please provide a simple example. (If ASP.NET, VB example preferred over C#)
The answer is, it depends. Do you want the date picker show/hide to trigger a postback and thus some code on the server, or do you want it to act purely on the client?
If you want it to act purely on the client, then, modify the markup for your button:
<asp:Button runat="server" ID="myButton" OnClientClick="ShowHideCalendar()" Text="myButton" />
<script language="javascript" type="text/javascript">
var calendarVisible = false;
function ShowHideCalendar()
{
if (calendarVisible)
{
// Code to *SHOW* calendar here
// Show the DIV it's contained in, pop the window with it in, etc..
}
else
{
// Code to *HIDE* the calendar here
}
}
</script>
The key bit is the "OnClientClick" property of the asp:Button control.
Its best practice to do such thing asynchronously, rather than having a full postback that refreshs the entire page.
That means that you have two options:
Update an UpdatePanel in which your
control is placed. That gives you
the benefit of only re-rendering the
content in the UpdatePanel.
Use
clientside scripts to toggle the
control. You also need to perform a
callback, that tells your codebehind
that you just toggled the visibility
to asure your code is in the same
state as the webpage displaying it.
I'd prefer using the second one.
I'm using the ASP.NET login control and I'm displaying a jQuery throbber when the submit button is clicked. This works fine, but the throbber is visible if client side validation fails and the button is invisible, so the user cannot re-submit the form. How do I hide the throbber if client side validation fails?
Without knowing much about the detail... why don't you only start the throbber when the client side validation passes? As a user I'd be surprised to see a UI element flash up very temporarily, only to be removed again and replaced by an error message.
It was a little tricky but I got this working. First of all, the Login control must be templated, which I expected, but even so the ClientID of the button is inaccessible so I had to add a class selector to it. I first tried to add the throbber and turn it on if validation succeeded using the lightly/un documented Page_ClientValidate() event but that didn't work because the throbber by default subscribes to the button's click event and turns on before validation occurs.
What did work was sticking to the mini API and adding the throbber to the button if Page_IsValid is true. The button's CausesValidation attribute must be true (the default).
javascript:
$(document).ready(function() {
$('.login').click(function() {
if (Page_IsValid) {
$('.login').throbber({ image: "Images/throbber.gif" });
}
});
});
button markup; the only addition from the Login control template is the CssClass attribute:
<asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="uxLogin" CssClass="login" />
I have some client-side JavaScript that sets form fields. When the page posts back, those fields are reset.
Why is this? Aren't the field values captured and put in the ViewState when the postback occurs?
EDIT: When I break the debugger on Page_Load(), before any code executes after the postback, the form field values are empty.
Are the form elements that are being populated from your client-side javascript set as disabled? If so, ASP.NET will ignore the value.
For example:
<asp:TextBox ID="TextBox1" Enabled="False" Runat="Server" />
<script type="text/javascript">
document.forms[0].elements["TextBox1"].style.disabled = false;
document.forms[0].elements["TextBox1"].value = "Value set from Javascript";
</script>
When this code runs, ASP.NET thinks that the textbox is disabled, and therefore discards its value in the postback, so the value of TextBox1.Text will always be blank. As far as I know, this behavior applies to all form elements. If ASP.NET thinks they are disabled, and they are subsquently enabled and populated client-side, the value won't be available on the postback.
Yes. It sounds like you have something else going wrong (perhaps an OnLoad handler that isn't checking the IsPostback field and therefore overwriting your changed values?).
Check what is being initialized on server side, the most common issue that I have seen is that any server side initialization code doesn't check for IsPackBack like so:
if (!Page.IsPostBack) {
// Do Work
}
The other thing to check is whether you are doing a postback or a callback. If you're doing a callback, the form field values sent back with the callback are the ones the page first sent to the client. For some reason ASP.NET AJAX pickles these values and sends them with every callback, instead of reading the form field afresh.
It's because I had enabled="false" set on the fields. I changed the fields to readonly="true" and the same thing happens.
The solution was to change the fields to readonly at runtime using JS.
I have a buttonfield in a gridview. When the button is clicked the RowCommand function gets called.
I need to pop up an alert box to make the user confirm their choice. I am pretty sure there is an HtmlInputButton involved but I kind of just need the syntax.
After that, how do you know whether they confirmed?
In your aspx, put this on your button :
OnClientClick="javascript:return confirm('are you sure ?')"
You can find the button, via the ItemDataBound event and then add a confirmation box.
button1.Attributes.Add("OnCLick", "javascript: return confirm('Are You Sure You Want to Delete");")
That should get you what you need.
You can also use the ConfirmButtonExtender if you're using the Ajax Control Toolkit
If you're using jQuery (which I'd totally recommend) you should check out jQuery UI and the modal confirmation demo which is very slick.
It should be noted that the above confirmations are purely client-side, so if you need to support clients that have javascript turned off, you will need to handle all of this server-side as well. e.g. the javascript, when OK is clicked, could set a hidden form field that says the equivalent of 'user confirmed' so if you get the delete button pressed without the hidden form field being filled you can determine that you need to show a server-generated confirmation field.
try this
ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "Alert", "alert('" + message+ "')", true);