Webshims placeholder is being hidden when appending dynamic content

Question

I'm trying to put together an email list template Using Handlebars.js with requirejs and Backbone.js, the initial rendering shows up as expected - a single email input with an add icon to add more.

    var EmailView = bb.View.extend({

    tagName:   'ul',
    className: 'emailList',

    events: {
        "click .addEmail"     : "addEmail",
        "click .deleteEmail"  : "deleteEmail"
    },

    initialize : function () {
        this.template = hb.compile(hbTemplate);
    },

    render : function () {                        
        this.$el.htmlPolyfill(this.template(this.model.toJSON()));
        this.updateIcons();
        return this;
    },
    ...

The addEmail handler (I've tried appendPolyfill(), appendPolyFillTo, and the current updatePolyFill(). All produce the same results. The new line item is added, but all placeholders disappear (this is true for controls outside of $el, it appears to be the whole page.)

    addEmail : function(e) {
        this.$el.append( this.template({}) );
        this.$el.updatePolyfill();
        this.updateIcons();
    }

What I want is for existing controls to maintain their placeholder text and the new one added showing the placeholder text as well. What am I missing?

If it helps, template looks like this ...

<li>
    <span class="requiredPrompt">*</span>
    <img class="icon" alt="" src="/images/emailIcon.png"  />

    <input type="email" class="emailAddress" value="" placeholder="Email Address" maxlength="50" required/>

    <a class="deleteEmail" href="javascript:void(0)">
        <img class="icon" alt="" src="/images/delFile.png" />
    </a>

    <a class="addEmail" href="javascript:void(0)"> 
        <img class="icon enabled"  alt="" src="/images/addFile.png" />
        <img class="icon disabled" alt="" src="/images/addFile-disabled.png" />
    </a>
</li>

[jsFiddle Example](http://jsfiddle.net/ttubbs/D3wYT/) - Showing placeholder prompts are hidden (IE9), when adding dyanmic content or even just showing an alert. It looks to me this has something to do with polyfiller.js adding in a 'beforeunload' event, at least I can see in the debugger that polyfiller is calling 'triggerDomUpdate' related to isReady('WINDOWLOAD', true). I don't fully follow that that is all about though. — Tony T Tubbs, May 10 '13 at 13:12
Was able to force the behavior I want by adding my own 'beforeunload' handler to blur() then clear '.user-error' class markers. I have updated the jsFiddle example with the 'fix'. Shouldn't it work like this be default? — Tony T Tubbs, May 10 '13 at 13:47
I'm the developer of webshims and this simply looks like a weird bug to me. I will look into it and fix it soon. So don't bother yourself anymore with this :-D — alexander farkas, May 10 '13 at 15:38
Just fixed your bug. In case you do not add a preventDefault, you will see a small flash. This is due to the fact, that IE says, that page might be unloaded. So best is to keep the preventDefault — alexander farkas, May 11 '13 at 16:31

score 0 · Accepted Answer · answered May 10 '13 at 15:52

0

As a quick fix you can simply return false or preventDefault() on your click handler. Here is a modfied jsfidlle.

jQuery('.addEmail').click(function () {
    jQuery('.emailList').appendPolyfill(emailItem);
    return false;
});

Webshims thinks the page unloaded and clears all placeholders.

answered May 10 '13 at 15:52

alexander farkas

13,754
4
40
41

Tried returning false, which worked in the handler I did so in, but in my larger app, there are so many places I'd have to update it was best to downlad a new build. All working as expected now. Thank a bunch! – Tony T Tubbs May 14 '13 at 01:09

Webshims placeholder is being hidden when appending dynamic content

1 Answers1