New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dateinput] Replacing built in input type=date results in extra field shown on screen #95

Closed
rroesler opened this Issue Jun 25, 2010 · 12 comments

Comments

Projects
None yet
4 participants
@rroesler

in Chrome, fix ...

    // Replace built-in date input: NOTE: input.attr("type", "text") throws exception by the browser
    if (input.attr("type") == 'date') {
        var tmp = $('<input debug="true"/>');
        $.each("name,readonly,disabled,value,required".split(","), function(i, attr)  {
            tmp.attr(attr, input.attr(attr));       
        });         
        input.replaceWith(tmp);
        input = tmp;
        input.hide();  // fix 
    }
@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jun 29, 2010

Hummmmmm...
Excuse me but where do you put this code ???
And what is this "input" variable ???
Thank's.

ghost commented Jun 29, 2010

Hummmmmm...
Excuse me but where do you put this code ???
And what is this "input" variable ???
Thank's.

@tipiirai

This comment has been minimized.

Show comment
Hide comment
@tipiirai

tipiirai Jul 22, 2010

Contributor

the "native" HTML5 date input is being replaced with a regular input field. we want to avoid the build in calendar to appear. Just using chrome and there is no redundant field.

can I see a page with unexpected behaviour

Contributor

tipiirai commented Jul 22, 2010

the "native" HTML5 date input is being replaced with a regular input field. we want to avoid the build in calendar to appear. Just using chrome and there is no redundant field.

can I see a page with unexpected behaviour

@rroesler

This comment has been minimized.

Show comment
Hide comment
@rroesler

rroesler Aug 5, 2010

tipiirai: I'll simplify my work and post or send a zip. The problem with replacing the supplied input field is that a) the existing field can not just be copied because that would not allow you to replace the type attribute; b) any simple "copy" schema will not know which attributes of the original tag to copy, which in-turn breaks other jquery plugins such as the ztInputHint with depends on the title attribute.

ben-22: The lines I replaced were in function Dateinput(input, conf) around line 200 in my copy. Just search for the comment // Replace built-in

rroesler commented Aug 5, 2010

tipiirai: I'll simplify my work and post or send a zip. The problem with replacing the supplied input field is that a) the existing field can not just be copied because that would not allow you to replace the type attribute; b) any simple "copy" schema will not know which attributes of the original tag to copy, which in-turn breaks other jquery plugins such as the ztInputHint with depends on the title attribute.

ben-22: The lines I replaced were in function Dateinput(input, conf) around line 200 in my copy. Just search for the comment // Replace built-in

@tipiirai

This comment has been minimized.

Show comment
Hide comment
@tipiirai

tipiirai Aug 9, 2010

Contributor

the fact is that the type attribute needs to be changed and since it's not possible I cannot think of other way than copying a field and all the attributes.

or what do you have in mind?

Contributor

tipiirai commented Aug 9, 2010

the fact is that the type attribute needs to be changed and since it's not possible I cannot think of other way than copying a field and all the attributes.

or what do you have in mind?

@tipiirai

This comment has been minimized.

Show comment
Hide comment
@tipiirai

tipiirai Aug 15, 2010

Contributor

This is now fixed. Here is the commit:

http://github.com/jquerytools/jquerytools/commit/488efa04bc808f30ee1efd964e93d9dd9a069570

now every valid input attribute is copied for the cloned field

Contributor

tipiirai commented Aug 15, 2010

This is now fixed. Here is the commit:

http://github.com/jquerytools/jquerytools/commit/488efa04bc808f30ee1efd964e93d9dd9a069570

now every valid input attribute is copied for the cloned field

@MarcusJT

This comment has been minimized.

Show comment
Hide comment
@MarcusJT

MarcusJT Aug 20, 2010

Hmmm, not every valid attribute... what about HTML5 "data-xxx" attributes?

May I suggest that copying all the attributes from one element to another should be broken out into a separate function that can be reused, as this surely won't be the only case where an HTML5 field needs to be replaced by a jQueryTools widget?

Also, I think the approach should be to loop through the existing attributes of the source element and copy them across, except for attributes matching a blacklist (in this case just the "type" attribute should be ignored) rather than the current method of providing a whitelist... this would be more elegant, avoid missing attributes, and generally be more versatile IMHO.

Hmmm, not every valid attribute... what about HTML5 "data-xxx" attributes?

May I suggest that copying all the attributes from one element to another should be broken out into a separate function that can be reused, as this surely won't be the only case where an HTML5 field needs to be replaced by a jQueryTools widget?

Also, I think the approach should be to loop through the existing attributes of the source element and copy them across, except for attributes matching a blacklist (in this case just the "type" attribute should be ignored) rather than the current method of providing a whitelist... this would be more elegant, avoid missing attributes, and generally be more versatile IMHO.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Aug 20, 2010

Collaborator

surely this is a better approach. last time I inspected this I could not find a way to loop trough the arguments. the only thing I could use is outerHTML() method but that's only available for IE. do you know anything ? ... well hmm by the time or writing I came up with an idea: get the outerHTML with parent().innerHTML() and parse from there .. yea: i'll do that.

Collaborator

ghost commented Aug 20, 2010

surely this is a better approach. last time I inspected this I could not find a way to loop trough the arguments. the only thing I could use is outerHTML() method but that's only available for IE. do you know anything ? ... well hmm by the time or writing I came up with an idea: get the outerHTML with parent().innerHTML() and parse from there .. yea: i'll do that.

@MarcusJT

This comment has been minimized.

Show comment
Hide comment
@MarcusJT

MarcusJT Aug 20, 2010

See mapAttributes script posted at http://code.google.com/p/jquery-list-attributes/ - just add some code to filter out blacklisted fields specified in a parameter (e.g. "type") from the map, then you can use the map to directly populate the new input element attributes in one go using jQuery's built-in .attr(map) - http://api.jquery.com/attr/#attr2

And please make this a reusable function, it will come in handy elsewhere...

See mapAttributes script posted at http://code.google.com/p/jquery-list-attributes/ - just add some code to filter out blacklisted fields specified in a parameter (e.g. "type") from the map, then you can use the map to directly populate the new input element attributes in one go using jQuery's built-in .attr(map) - http://api.jquery.com/attr/#attr2

And please make this a reusable function, it will come in handy elsewhere...

@MarcusJT

This comment has been minimized.

Show comment
Hide comment
@MarcusJT

MarcusJT Aug 20, 2010

I was thinking, perhaps it could also be achieved by using jQuery's .extend() method to merge the attributes of the source element with attributes of the new target element?

I was thinking, perhaps it could also be achieved by using jQuery's .extend() method to merge the attributes of the source element with attributes of the new target element?

@rroesler

This comment has been minimized.

Show comment
Hide comment
@rroesler

rroesler Aug 20, 2010

Sorry .. been on holidays ...

There is also placeholder attribute, min & max attributes, and perhaps a few of the other HTML5 common attributes.

And for people using XHTML, other non-standard attributes are allowed.

I like idea of using moving the original element into a wrapper and then trying innerHTML , but have not tried this myself.

Sorry .. been on holidays ...

There is also placeholder attribute, min & max attributes, and perhaps a few of the other HTML5 common attributes.

And for people using XHTML, other non-standard attributes are allowed.

I like idea of using moving the original element into a wrapper and then trying innerHTML , but have not tried this myself.

@MarcusJT

This comment has been minimized.

Show comment
Hide comment
@MarcusJT

MarcusJT Aug 20, 2010

I've filed a feature request (for retrieving element attributes) in the Developing jQuery Core forum @ http://forum.jquery.com/topic/retrieving-all-attributes-of-a-given-element-and-their-values

A response has already suggested that mapAttributes script I suggested earlier may contain flaws (in IE - surprise)... so perhaps another route is needed... hopefully productive discussion will take place there which will result in an immediate solution to address the particular case here, as well as adding generic jQuery core support in the long term.

I've filed a feature request (for retrieving element attributes) in the Developing jQuery Core forum @ http://forum.jquery.com/topic/retrieving-all-attributes-of-a-given-element-and-their-values

A response has already suggested that mapAttributes script I suggested earlier may contain flaws (in IE - surprise)... so perhaps another route is needed... hopefully productive discussion will take place there which will result in an immediate solution to address the particular case here, as well as adding generic jQuery core support in the long term.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Aug 22, 2010

Collaborator

great. in the meantime I may attempt to use a custom script for this.

Collaborator

ghost commented Aug 22, 2010

great. in the meantime I may attempt to use a custom script for this.

This issue was closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment