[jQuery] Re: Focus First 'visible' field
Someone found that this method does not handle visibility correctly.
When a visibility:hidden parent with a visibility:show child, the
child would override its parent's property (of course!).
So the script only need to check display:none parent, which would
introduce another filter:
$(":text:visible:enabled").filter(function(){
return $(this).filter(function(){
this.style.display == "none";
}).size()==0;
}).eq(0).focus();
On 4月17日, 下午9時40分, Jacky <[EMAIL PROTECTED]> wrote:
> To work on any type of input should be easy, just replace ':text' with
> input.
>
> I know that IE would give error when you're focusing a 'disappearing' input.
> (parent is hidden, for example). But I do not encounter any error like you
> described. Any sample code for your HTML?
>
> On Tue, Apr 15, 2008 at 9:00 AM, MichaelEvangelista <[EMAIL PROTECTED]>
> wrote:
>
>
>
>
>
> > I've been looking for a solution like this, but that will work with
> > any type of form input.
> > The code I've been using is below (where form-id is the ID of the
> > containing form)
>
> > It works great in Firefox but IE throws the error
> > 'this.parentNode.borderCss.on' is null or not an object
>
> > I tried your example code above, and got the same error
>
> > here is what I was using :
>
> > // --- Put the cursor in the first field on page load
> > var $firstfield = function(){
> > $('#form-id input:eq(0)').focus();
> > }
> > $firstfield();
>
> > Could this have anything to do with my markup? I didnt get that error
> > on your demo, but i did when I applied your code to my form.
>
> > On Apr 13, 7:54 am, Jacky See <[EMAIL PROTECTED]> wrote:
> > > Hi all,
>
> > > For focusing first input text field, the usual solution is $
> > > (':text:visible:enabled:eq(0)').focus(). However, when these fields
> > > are in an ':hidden' parent (not 'visible' by our eyes), it won't work.
>
> > > Currently I tried to solve this by:
>
> > > $(":text:visible:enabled").filter(function(){
> > > return $(this).parents(":hidden").size()==0;
>
> > > }).slice(0,1).focus();
>
> > > I have setup a test page for this:
> >http://www.seezone.net/dev/focusField.html
> > > Try to toggle different parent to and click 'focus'. It should work
> > > correctly.
>
> > > I would like to know if there is any other 'selector-based' way to do
> > > so?
>
> --
> Best Regards,
> Jacky
> 網絡暴民http://jacky.seezone.net
[jQuery] [Validation] Validate differently based on different action
Hi all,
I think this is a rather rare situation but it happens in our apps all
the time.
The layout is like
--- Search Result
[checkbox] status [input text] [input text] [textarea]
[Delete button] [Reject Button] [Update Button]
There are different case of validation:
- when press delete button, validate if checkbox is checked only
- when press reject button, validate if checkbox is checked and status
is not rejected
- when press update button, validate that all fields are filled and
format correct.
For the time being, I use some rude way to do so...
var setting1 = {...};
var setting2 = {...};
var setting3 = {...};
$("#delete").click(function(){
var f = $("#form")[0];
$.removeDate(f, 'validator');
f.validate(setting1).submit();
});
//... similar for the reject and update button
Any better way to do this?
Or I should not use validation plugin under this situation?
[jQuery] Focus First 'visible' field
Hi all,
For focusing first input text field, the usual solution is $
(':text:visible:enabled:eq(0)').focus(). However, when these fields
are in an ':hidden' parent (not 'visible' by our eyes), it won't work.
Currently I tried to solve this by:
$(":text:visible:enabled").filter(function(){
return $(this).parents(":hidden").size()==0;
}).slice(0,1).focus();
I have setup a test page for this: http://www.seezone.net/dev/focusField.html
Try to toggle different parent to and click 'focus'. It should work
correctly.
I would like to know if there is any other 'selector-based' way to do
so?
[jQuery] Re: [Validation]How to make two field check output one message?
I have put up a page to test.
http://www.seezone.net/dev/dateValiation.html
I need to use different method for different group of dates.
In that case, a global dateRange method seems not possible?
On 4月11日, 上午6時03分, Jörn Zaefferer <[EMAIL PROTECTED]> wrote:
> Jacky See schrieb:> Hi,
>
> > Some question on the config of validation plugins.
> > Suppose there are #fromDate and #toDate fields (using ui.datepicker).
> > I have added these custom rules
> > [...]
>
> > It will output two messages of 'Please input correct date range'.
> > How can I make it only ouput single one?
>
> I've implemented a solution, please give the latest revision a
> try:http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js
>
> You need to specify which elements to group using the new groups-option.
>
> A usage example (actually a test, will later add it to docs) is
> here:http://dev.jquery.com/view/trunk/plugins/validate/test/messages.js
>
> The interesting parts:
>
>
>
>
>
>
>
> $.validator.addClassRules({
> requiredDateRange: {required:true, date:true, dateRange:true}});
>
> $.validator.addMethod("dateRange", function() {
> return new Date($("#fromDate").val()) < new
> Date($("#toDate").val());}, "Please specify a correct date range.");
>
> $("#dateRangeForm").validate({
> groups: {
> dateRange: "fromDate toDate"
> },
> errorPlacement: function(error) {
> form.find(".errorContainer").append(error);
> }
>
> });
>
> You'll most likely have to skip or modify the errorPlacement option, but
> the rest should work fine.
>
> Your feedback on it is very welcome.
>
> Jörn
[jQuery] Re: How to get a 'fresh' ui datepicker date?
Turn out that the _getDate() will fall back to today when not found.
So I need to manually parse it and thus calling _setDateFromField
doesn't matter...
$.fn.getInputDate = function(){
var elem = this[0];
if(elem){
var inst = $.datepicker._getInst(elem._calId);
var format = inst? inst._get('dateFormat'):
$.datepicker._defaults.dateFormat; //use default when not found
try{
return
format?$.datepicker.parseDate(format,elem.value):null;
}catch(ex){}
}
return null;
}
On Apr 11, 3:38 pm, Jacky See <[EMAIL PROTECTED]> wrote:
> The above code has some error.
> Here is my final solution: write another plugin to get the date.
>
> HTML:
>
>
> Plan Date: to type="text" id="eventToDate"/>
> Actual Date: to type="text" id="actualToDate"/>
>
>
> JS:
>
> $("#dateRange input").datepickerRange({showOn:'button'});
>
> /* Update datepicker if found and return the date */
> $.fn.getInputDate = function(){
> var elem = this[0];
> if(elem){
> var inst = $.datepicker._getInst(elem._calId);
> if(inst){
> inst._setDateFromField(elem);
> return inst._getDate();
> }
> }
> return null;
>
> }
>
> /*
> Assume from/to date have same ID prefix
> options can provide suffix
> options's beforeShow is overriden
> */
> $.fn.datepickerRange = function(options){
> options = options || {};
> var fromSuffix = options.fromSuffix || "FromDate";
> var toSuffix = options.toSuffix || "ToDate";
> options.beforeShow = function(input){
> var isFrom = (new RegExp(fromSuffix+"$")).test(input.id);
> var prefix = input.id.replace(new
> RegExp("("+fromSuffix+"|"+toSuffix
> +")$"),"");
> return {
> minDate: isFrom? null:
> $("#"+prefix+fromSuffix).getInputDate(),
> maxDate: !isFrom? null:
> $("#"+prefix+toSuffix).getInputDate()
> };
> }
> return this.datepicker(options);
>
> }
>
> On 4月11日, 上午3時14分, Jacky See <[EMAIL PROTECTED]> wrote:
>
> > I have found some wicked way to do it.
>
> > This is the code where I'm writing a plugin to accept date range pair
> > and auto-init them.
>
> > //Assuming from/to date have same prefix id (e.g. #eventFromDate,
> > #eventToDate)
> > $.fn.datepickerPair = function(options){
> > return this.datepicker(
> > $.extend({
> > beforeShow:function(elem){
> > var id = elem.id;
> > var isFrom = /FromDate$/.test(id);
> > var prefix = id.replace(/(FromDate|ToDate)$/,'');
> > var minDate = isFrom?null: $.datepicker._getInst($
> > ("#"+prefix+"FromDate").get(0)._calId)._setDateFromField("#"+prefix
> > +"FromDate");
> > var maxDate = !isFrom?null: $.datepicker._getInst($
> > ("#"+prefix+"ToDate").get(0)._calId)._setDateFromField("#"+prefix
> > +"ToDate");
> > return {minDate:minDate, maxDate:maxDate};
> > },options)
> > );
>
> > }
>
> > Any other 'cleaner' way?
>
> > On 4月11日, 上午1時09分, Jacky See <[EMAIL PROTECTED]> wrote:
>
> > > Dear all,
>
> > > This is about the ui datepicker.
>
> > > I have an input field with a datepicker, using image as trigger.
> > > The field is not read only, user are allowed to input by keyboard.
>
> > > The problem is that when user type some invalid input like '33'
> > > the $('#input').datepicker('getdate'), will still only get the last
> > > selected date.
>
> > > Is that any way to get the 'fresh' date?
> > > Any trigger I can call?
> > > I need it to fill in a date range using 'beforeShow' option.
[jQuery] Re: How to get a 'fresh' ui datepicker date?
The above code has some error.
Here is my final solution: write another plugin to get the date.
HTML:
Plan Date: to
Actual Date: to
JS:
$("#dateRange input").datepickerRange({showOn:'button'});
/* Update datepicker if found and return the date */
$.fn.getInputDate = function(){
var elem = this[0];
if(elem){
var inst = $.datepicker._getInst(elem._calId);
if(inst){
inst._setDateFromField(elem);
return inst._getDate();
}
}
return null;
}
/*
Assume from/to date have same ID prefix
options can provide suffix
options's beforeShow is overriden
*/
$.fn.datepickerRange = function(options){
options = options || {};
var fromSuffix = options.fromSuffix || "FromDate";
var toSuffix = options.toSuffix || "ToDate";
options.beforeShow = function(input){
var isFrom = (new RegExp(fromSuffix+"$")).test(input.id);
var prefix = input.id.replace(new
RegExp("("+fromSuffix+"|"+toSuffix
+")$"),"");
return {
minDate: isFrom? null:
$("#"+prefix+fromSuffix).getInputDate(),
maxDate: !isFrom? null:
$("#"+prefix+toSuffix).getInputDate()
};
}
return this.datepicker(options);
}
On 4月11日, 上午3時14分, Jacky See <[EMAIL PROTECTED]> wrote:
> I have found some wicked way to do it.
>
> This is the code where I'm writing a plugin to accept date range pair
> and auto-init them.
>
> //Assuming from/to date have same prefix id (e.g. #eventFromDate,
> #eventToDate)
> $.fn.datepickerPair = function(options){
> return this.datepicker(
> $.extend({
> beforeShow:function(elem){
> var id = elem.id;
> var isFrom = /FromDate$/.test(id);
> var prefix = id.replace(/(FromDate|ToDate)$/,'');
> var minDate = isFrom?null: $.datepicker._getInst($
> ("#"+prefix+"FromDate").get(0)._calId)._setDateFromField("#"+prefix
> +"FromDate");
> var maxDate = !isFrom?null: $.datepicker._getInst($
> ("#"+prefix+"ToDate").get(0)._calId)._setDateFromField("#"+prefix
> +"ToDate");
> return {minDate:minDate, maxDate:maxDate};
> },options)
> );
>
> }
>
> Any other 'cleaner' way?
>
> On 4月11日, 上午1時09分, Jacky See <[EMAIL PROTECTED]> wrote:
>
> > Dear all,
>
> > This is about the ui datepicker.
>
> > I have an input field with a datepicker, using image as trigger.
> > The field is not read only, user are allowed to input by keyboard.
>
> > The problem is that when user type some invalid input like '33'
> > the $('#input').datepicker('getdate'), will still only get the last
> > selected date.
>
> > Is that any way to get the 'fresh' date?
> > Any trigger I can call?
> > I need it to fill in a date range using 'beforeShow' option.
[jQuery] Re: How to get a 'fresh' ui datepicker date?
I have found some wicked way to do it.
This is the code where I'm writing a plugin to accept date range pair
and auto-init them.
//Assuming from/to date have same prefix id (e.g. #eventFromDate,
#eventToDate)
$.fn.datepickerPair = function(options){
return this.datepicker(
$.extend({
beforeShow:function(elem){
var id = elem.id;
var isFrom = /FromDate$/.test(id);
var prefix = id.replace(/(FromDate|ToDate)$/,'');
var minDate = isFrom?null: $.datepicker._getInst($
("#"+prefix+"FromDate").get(0)._calId)._setDateFromField("#"+prefix
+"FromDate");
var maxDate = !isFrom?null: $.datepicker._getInst($
("#"+prefix+"ToDate").get(0)._calId)._setDateFromField("#"+prefix
+"ToDate");
return {minDate:minDate, maxDate:maxDate};
},options)
);
}
Any other 'cleaner' way?
On 4月11日, 上午1時09分, Jacky See <[EMAIL PROTECTED]> wrote:
> Dear all,
>
> This is about the ui datepicker.
>
> I have an input field with a datepicker, using image as trigger.
> The field is not read only, user are allowed to input by keyboard.
>
> The problem is that when user type some invalid input like '33'
> the $('#input').datepicker('getdate'), will still only get the last
> selected date.
>
> Is that any way to get the 'fresh' date?
> Any trigger I can call?
> I need it to fill in a date range using 'beforeShow' option.
[jQuery] How to get a 'fresh' ui datepicker date?
Dear all,
This is about the ui datepicker.
I have an input field with a datepicker, using image as trigger.
The field is not read only, user are allowed to input by keyboard.
The problem is that when user type some invalid input like '33'
the $('#input').datepicker('getdate'), will still only get the last
selected date.
Is that any way to get the 'fresh' date?
Any trigger I can call?
I need it to fill in a date range using 'beforeShow' option.
[jQuery] [Validation]How to make two field check output one message?
Hi,
Some question on the config of validation plugins.
Suppose there are #fromDate and #toDate fields (using ui.datepicker).
I have added these custom rules
jQuery.validator.addMethod("afterFromDate"
,function(value,
element, targetId){
var fromDate =
$("#"+targetId).datepicker("getDate");
var toDate = $(element).datepicker("getDate");
if(toDate && fromDate && fromDate > toDate){
return false;
}
return true;
}, "Please input correct date range");
jQuery.validator.addMethod("beforeToDate"
,function(value, element,
targetId){
var fromDate = $(element).datepicker("getDate");
var toDate =
$("#"+targetId).datepicker("getDate");
if(toDate && fromDate && fromDate > toDate){
return false;
}
return true;
}, "Please input correct date range");
And config like
$("#form").validate({
rules:{
'fromDate': { beforeToDate:'fromDate' },
'toDate: { afterFromDate:'toDate' },
}
})
It will output two messages of 'Please input correct date range'.
How can I make it only ouput single one?
