I took the JQuery UI dialog form sample from JQuery UI website.
Since I wanted that, once the dialog is opened and the form is displayed, that pressing the key submits the form, I added the following in the onReady() :
$.extend($.ui.dialog.prototype.options, {
open: function() {
var $this = $(this);
// focus first button and bind enter to it
$this.parent().find('.ui-dialog-buttonpane button:first').focus();
$this.keypress(function(e) {
if( e.keyCode == 13 ) {
$this.parent().find('.ui-dialog-buttonpane button:first').click();
return false;
}
});
}
});
This does perfectly the trick (I mean the click() is triggered when it has to), but the following occurs :
When the form is first submited through a press on the key, the submission is performed once.
If I reopen the dialog, and submit it again with a press on the key, the form is submitted twice.
If I reopen the dialog, and submit it again with a press on the key, the form is submitted three times, and so on...
This can be tested with the following fiddle :
http://jsfiddle.net/fWW2E/
Let me add that doing so by clicking on the dedicated "Submit" button works properly, this fails only when pressing the key is involved.
Any ideas ?
Thank you !
Because since you're assigning this on "open" and your buttons are "closing" the dialog.
When this gets called though:
$('something').dialog('close');
doesn't actually remove the element, it just hides it. So the next time you click to open up a "new" dialog, you're really just showing the first one again. However the "open" event is getting fired again every time it's opened, which is adding a new keypress handler onto it.
Here's the fiddle. I actually write out to the console an array of the current handlers on that element. You'll see everytime you open the dialog that there is another keypress handler.
DEMO
I have complex form and in page a submit button, it has events for both client and server side.
After first time clicking on button, validation class is added and then validation error message is shown,
and then filling to a required field to be validated, and click on button again, page is not post back, even jquery validation engine works well.
In my local computer, page is postback after filled to a required field. I assume, both client side and serverside work.
But not on sever, page is not post back after filled to a required field.
This is my code. I am looking forward your replies and suggestions.
==========================================================================
jQuery(document).ready(function () {
jQuery("#aspnetForm").validationEngine();
//btmContinous
$('#ctl00_PlaceHolderMain_Form1_btmContinous').click(function () {
//Part A
var className = $('#ctl00_PlaceHolderMain_Form1_txtA2').attr('class');
alert(className);
if (!(className == "validate[required] text-input"))
{
alert(className);
$('#ctl00_PlaceHolderMain_Form1_txtA2').addClass("validate[required] text-input");
}
if ( $("#Form1").validationEngine('validate') == true) {
alert("true");
//$('#ctl00_PlaceHolderMain_Form1_txtA2').removeClass("validate[required] text-input");
//should post back here
}
else{alert("false");}
});
It was yesterday i was having the same issue. My validation will not work after postback.
Page contained update panel and all validations on button click inside document.ready.
The validation will not work after postback.
What i did is put the validation i.e
$("#<%= Button1.ClientID %>").click(function() {
//// Validation conditions here
});
inside the Sys.Application.add_load() function and it started working after postback too.
So now code looked like
Sys.Application.add_load(function() {
$("#<%= Button1.ClientID %>").click(function() {
//// Validation conditions here
});
}
More about what happens can be read here
http://www.codeoutlaw.com/2009/11/use-sysapplicationaddload-instead-of.html
Hopefully this helps someone :)
I am having an aspx page in which I am calling a user control. The user control I am using a pop up to display it when a user clicks a asp:linkbutton. In that user control I am having a textbox and I am calling a Jquery Blur to do some validation. While doing so the function is calling [blur] is calling twice. I just called an alert() with the textbox value.So I can see the alert is coming twice .What I need to do to avoid the second time. I need to do it only whenever the user going out of the textbox and that also one time.
$('#<%=txtCategory.ClientID %>').blur(function() {
alert($(this).val());
});
This is called twice.Thanks for ur response.
Try this one.
$("input:text[id$='txtCategory']").blur(function() {
alert($(this).val());
});
are you using live event handler by any chance. if that is the case change it to bind blur.
Also if obj is the jquery object that you are trying to beind the blur event on you can add this code
if (obj .data("events") === null || obj .data("events") === undefined || obj
.data("events").click === undefined)
{
function(){bind blur);
}
I have a webform and i want to detect if F5 button was pressed or if the page was refreshed. I know about postback but it is not what i'm looking for. I have a gridview that loads in a modal popup when a button is clicked and a parameter's value is set for the gridview. When refresh is hit and if the modal popup button was previously clicked the modal popup is visible right after refresh. I want to detect if the page is refreshed to prevent this. any ideas? I thought to try Override but I'm not exactly sure how to use it. I tried Control.ModifierKeys but I don't have access to ModifierKeys.
Pressing F5 or physically clicking the browser refresh behaves similarly to navigating away from the page. This is captured in the event window.onunload. Try the snippet example below:
window.onbeforeunload = function (evt) {
var message = 'Are you sure you want to leave?';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}
This will capture the refresh and allow you to do something or prompt the user.
Reemember that hotkeys are processed in the client side in the browser. The easiest way to implement this is through javascript.
Look at the following link:
http://snippets.dzone.com/posts/show/3552
When an Event is triggered by a user in IE, it is set to the window.event object. The only way to see what triggered the event is by accessing the window.event object (as far as I know)
This causes a problem in ASP.NET validators if an event is triggered programmatically, like when triggering an event through jQuery. In this case, the window.event object stores the last user-triggered event.
When the onchange event is fired programmatically for a text box that has an ASP.NET validator attached to it, the validation breaks because it is looking at the element that fired last event, which is not the element the validator is for.
Does anyone know a way around this? It seems like a problem that is solvable, but from looking online, most people just find ways to ignore the problem instead of solving it.
To explain what I'm doing specifically:
I'm using a jQuery time picker plugin on a text box that also has 2 ASP.NET validators associated with it. When the time is changed, I'm using an update panel to post back to the server to do some things dynamically, so I need the onchange event to fire in order to trigger the postback for that text box.
The jQuery time picker operates by creating a hidden unordered list that is made visible when the text box is clicked. When one of the list items is clicked, the "change" event is fired programmatically for the text box through jQuery's change() method.
Because the trigger for the event was a list item, IE sees the list item as the source of the event, not the text box, like it should.
I'm not too concerned with this ASP.NET validator working as soon as the text box is changed, I just need the "change" event to be processed so my postback event is called for the text box. The problem is that the validator throws an exception in IE which stops any event from being triggered.
Firefox (and I assume other browsers) don't have this issue. Only IE due to the different event model. Has anyone encountered this and seen how to fix it?
I've found this problem reported several other places, but they offer no solutions:
jQuery's forum, with the jQuery UI Datepicker and an ASP.NET Validator
ASP.NET forums, bug with ValidatorOnChange() function
I had the same problem. Solved by using this function:
jQuery.fn.extend({
fire: function(evttype){
el = this.get(0);
if (document.createEvent) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent(evttype, false, false);
el.dispatchEvent(evt);
} else if (document.createEventObject) {
el.fireEvent('on' + evttype);
}
return this;
}
});
So my "onSelect" event handler to datepicker looks like:
if ($.browser.msie) {
datepickerOptions = $.extend(datepickerOptions, {
onSelect: function(){
$(this).fire("change").blur();
}
});
}
I solved the issue with a patch:
window.ValidatorHookupEvent = function(control, eventType, body) {
$(control).bind(eventType.slice(2), new Function("event", body));
};
Update: I've submitted the issue to MS (link).
From what you're describing, this problem is likely a result of the unique event bubbling model that IE uses for JS.
My only real answer is to ditch the ASP.NET validators and use a jQuery form validation plugin instead. Then your textbox can just be a regular ASP Webforms control and when the contents change and a postback occures all is good. In addition you keep more client-side concerns seperated from the server code.
I've never had much luck mixing Webform Client controls (like the Form Validation controls) with external JS libraries like jQuery. I've found the better route is just to go with one or the other, but not to mix and match.
Not the answer you're probably looking for.
If you want to go with a jQuery form validation plugin concider this one jQuery Form Validation
Consider setting the hidden field _EVENTTARGET value before initiating the event with javascript. You'll need to set it to the server side id (replace underscore with $ in the client id) for the server to understand it. I do this on button clicks that I simulate so that the server side can determine which OnClick method to fire when the result gets posted back -- Ajax or not, doesn't really matter.
This is an endemic problem with jQuery datepickers and ASP validation controls.
As you are saying, the wrong element cross-triggers an ASP NET javascript validation routine, and then the M$ code throws an error because the triggering element in the routine is undefined.
I solved this one differently from anyone else I have seen - by deciding that M$ should have written their code more robustly, and hence redeclaring some of the M$ validator code to cope with the undefined element. Everything else I have seen is essentially a workaround on the jQuery side, and cuts possible functionality out (eg. using the click event instead of change).
The bit that fails is
for (i = 0; i < vals.length; i++) {
ValidatorValidate(vals[i], null, event);
}
which throws an error when it tries to get a length for the undefined 'vals'.
I just added
if (vals) {
for (i = 0; i < vals.length; i++) {
ValidatorValidate(vals[i], null, event);
}
}
and she's good to go. Final code, which redeclares the entire offending function, is below. I put it as a script include at the bottom of my master page or page.
Yes, this does break upwards compatibility if M$ decide to change their validator code in the future. But one would hope they'll fix it and then we can get rid of this patch altogether.
// Fix issue with datepicker and ASPNET validators: redeclare MS validator code with fix
function ValidatorOnChange(event) {
if (!event) {
event = window.event;
}
Page_InvalidControlToBeFocused = null;
var targetedControl;
if ((typeof (event.srcElement) != "undefined") && (event.srcElement != null)) {
targetedControl = event.srcElement;
}
else {
targetedControl = event.target;
}
var vals;
if (typeof (targetedControl.Validators) != "undefined") {
vals = targetedControl.Validators;
}
else {
if (targetedControl.tagName.toLowerCase() == "label") {
targetedControl = document.getElementById(targetedControl.htmlFor);
vals = targetedControl.Validators;
}
}
var i;
if (vals) {
for (i = 0; i < vals.length; i++) {
ValidatorValidate(vals[i], null, event);
}
}
ValidatorUpdateIsValid();
}
This is how I solved a simlar issue.
Wrote an onSelect() handler for the datepicker.
link text
In that function, called __doPostBack('textboxcontrolid','').
This triggered a partial postback for the textbox to the server, which called the validators in turn.