Refresh the placeholders

[TasteGuru]

So, the situation is coming up in IE9:
http://www.flickr.com/photos/8223264@N05/7730467466/in/photostream/lightbox/

Basically, the errors from the form move the fields - errors are Ajax, no page reload - and the placeholder from the moved field stays where it was, but the box moves down, resulting in the situation on the right side of the image. What I'm looking for is a way to force the placeholders to refresh after.
So I tried looking at your sample pages, where the "popup and swap" field seems to accomplish a refresh simply by changing the DOM's placeholder attribute to the new value? Tried that, did not work.

While there are certainly alternative methods I could use to circumvent the problem here, I'm more interested in getting it working, since it I am having a similar problem with a page containing form elements that are appended to a form injected by a 3rd-party JS (for our billing gateway). These fields fail to get their placeholders at all, and I'm hoping that figuring out the refreshing issue might help.

Other potentially useful information:
Using jquery-1.7.1 in general on the site (though I'm using placeholder_polyfill.jquery.min.combo.js)
loading with a customized version of modernizr (my original custom version detected only input-placeholder, I've since added stuff but the problem was present then)
Using rAF.js and the Chrome-style placeholder functionality

Just using the really standard loading as your documentation suggestes:

<script type="text/javascript"> placeHolderConfig = { // css class that is used to style the placeholder className: 'placeholder', // expose the placeholder text to screenreaders or not visibleToScreenreaders : true, // css class is used to visually hide the placeholder visibleToScreenreadersHideClass : 'placeholder-hide-except-screenreader', // css class used to hide the placeholder for all visibleToNoneHideClass : 'placeholder-hide', // either hide the placeholder on focus or on type hideOnFocus : false, // remove this class from a label (to fix hidden labels) removeLabelClass : 'visuallyhidden', // replace the label above with this class hiddenOverrideClass : 'visuallyhidden-with-placeholder', // allow the replace of the removeLabelClass with hiddenOverrideClass or not forceHiddenOverride : true, // apply the polyfill even for browser with native support forceApply : false, // init automatically or not autoInit : true } Modernizr.load({ test: Modernizr.input.placeholder, nope: [ '/css/placeholder_polyfill.min.css', '/js/placeholder_polyfill.jquery.min.combo.js' ], }); </script>

Please let me know what else you need from me.

[scruffian]

I was having this issue. For some reason in IE9 line 103 (text = input.attr('placeholder')) doesn't work with elements that are dynamically injected into the page, so I replaced it with

text = input[0].getAttribute('placeholder')

which seems to work. The other thing you need to do is comment out line 107:

input.attr('placeholder','');

You could leave this in, but then you'd have to be more discriminating in the elements you call .placeHolder() on, and I can't see a reason for having line 107 - maybe I am wrong.

The other thing you will want to do is refer to this issue, which stops the placeholder being created more than once:

#15

Hope this helps...

[ginader]

• good find about the IE9 issue in line 103!
• the reason for line 107 is that some browsers have support for placeholders on input fields but not on textareas which caused the textareas to use the polyfill and the input fields to render natively AND to use the polyfill as well. So i decided to make a clean swipe and ONLY use the polyfill if there isn't full support

[TasteGuru]

Thank you both! with your help, I was able to get placeholders working on the injected form.
However, I also added the line 122 code scruffian suggested in issue #15 (Although I wasn't quite sure where the closing } is supposed to go for the block)

I was, in a sense, able to get it to reload the placeholders when the error label appears. Unfortunately, it seems that I'm double-loading the polyfill (does that make it a poly-polyfill?) because the label disappears when I type but there is an additional, identical label behind.
Assuming I updated the code properly, how would I properly write the call to reload the placeholder?
Thanks again

[ginader]

Alright. I quickly finalized what I was working on anyway. I just pushed Version 2.0.2 which can now rerun.
Here is the demo page showcasing the new functionality:
http://blog.ginader.de/dev/jquery/HTML5-placeholder-polyfill/index-rerun.html
Just update to the newest Version and make sure you rerun the polyfill whenever you add new fields like so:

<script>
(function($) {
    $('#newtestbutton').click(function(){
        $('<br><label class="duplicate">Some Number: <input placeholder="e.g. 42" type="text" name="newtest"></label>').insertAfter('.duplicate:last');
        $('input[placeholder], textarea[placeholder]').placeHolder();
    });
})(jQuery);
</script>

[TasteGuru]

You are a scholar and a gentleman, thank you for all this assistance.
So I set things up the way you suggested, and I even uncommented the line to write "the input element already has a polyfilled placeholder!" out to log to confirm it's getting run, which it is. Depending on where/how I call the function, I'm either getting doubled labels which properly move (but one set doesn't disappear when typing - this even happens before the boxes move) or no effect (i.e. the label stays where the box used to be.) God I hate IE :(

On your test page, it's always being run on a new element, not a moved element. I'm curious if you would maybe try something like
<input placeholder="e.g. some other number" type="text" name="newtest"></label>').insertBefore('.duplicate:last'); or even just top=top+20 or something like that to see if it's working on moved elements for you.

In any event, Thanks for all your help. I'm going to be out of town for the next week so won't be able to try/respond to anything, but please let me know if you have any ideas.
Thanks,
Oren

[scruffian]

Thanks, but when I update to this it breaks in IE9 for me. I haven't got time to look into why at the moment, but if I do, I'll let you know...

[ginader]

I foresee IE testing in my near future :-(
(will keep you updated...)

[TasteGuru]

Yeah, sorry, I know that's not something I wish on anybody. At least it's
not IE7 testing :-)
On Aug 9, 2012 11:26 AM, "Dirk Ginader" [email protected] wrote:

I foresee IE testing in my near future :-(
(will keep you updated...)

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/17#issuecomment-7620794.

[scruffian]

There is another bug here. When you create the placeholders after the fields are injected, the form fields don't focus when the placeholders are clicked on. The problem is line 120:

placeholder.data('input',placeholder);

which should be:

placeholder.data('input',input);

The strange thing is, I am not sure how it works when placeholders are not injected, but it does seem to!

[ginader]

will check.
(on a side note: are you sure you're not testing with a browser that has native support? I keep falling for that...)

[scruffian]

haha, that one almost caught me out too!