8

A similar question have been asked (and answered), but there were no answer / solution on how to fix it

I'm using jQuery Mobile / Handlebars for my Phonegap project. Up till now everything seemed to work just fine. But suddenly I get this weird line break:

"​                               "

enter image description here

I use the following code to make the list:

    // HTML
    <ul id="guideListView" data-role="listview" ></ul>

    <script id="guideListTemplate" type="text/x-handlebars-template">​
        {{#if this}}
            {{#each this}}
            <li class="guide">
                <a href="{{guideUrl}}{{id}}" data-transition="slide" class="ui-nodisc-icon" >
                    <div class="name">{{name}}</div>
                    <div class="num-stores-container no-bold small">Stores: <span class="num-stores">{{storesCount}}</span></div>
                </a>
            </li>
            {{/each}}
        {{else}}
            <li class="ui-btn">Sorry, no guides for <span class="city"></span></li>
    {{/if}}
    </script>

    // JS
    var template = Handlebars.compile($("#guideListTemplate").html());
    $('#guideListView').append(template(guides));
    $('#guideListView').listview().listview('refresh');

Does anyone know what might be causing this?

updated
I've tried using ("#guideListTemplate").html().trim() and $('#guideListView').html(template(guides));, but that didn't make any difference. Could this be a big in jQuery Mobile?

A bit more debugging and it seems the problem might lie in this:

<script id="guideListTemplate" type="text/x-handlebars-template">​
Steven
  • 19,224
  • 47
  • 152
  • 257
  • possible duplicate of [Why is "​" being injected into my HTML?](http://stackoverflow.com/questions/18478847/why-is-8203-being-injected-into-my-html) – Brewal Feb 26 '15 at 09:32
  • Um... ok, but how do I fix it? – Steven Feb 26 '15 at 09:35
  • It could be either in the html or in one of the variables in the `li` element. Check this with another editor to see if it is in the html, or try to output your variables. – Brewal Feb 26 '15 at 09:38
  • I'm using PHP storm and the code I use it what you see above. And it only occures between the UL and the first element. (I'll update my picture) – Steven Feb 26 '15 at 09:41
  • Then maybe it is inserted before some of your `li` (here the first one and one in the middle) because of one of the variables of the li – Brewal Feb 26 '15 at 09:43
  • But closing this question before I find the answer is not good. The other question does not solve the issue. It simply states what's causing it. – Steven Feb 26 '15 at 09:44
  • Right... I retracted. It was a "possible" duplicate. – Brewal Feb 26 '15 at 09:46

3 Answers3

7

Ok, so I found a solution from this thread.

The problem is that when you try to fetch the html of a javascript string, you might get zero width space.

Unicode has the following zero-width characters:

  • U+200B zero width space
  • U+200C zero width non-joiner Unicode code point
  • U+200D zero width joiner Unicode code point
  • U+FEFF zero width no-break space Unicode code point

So to fix my problem by I use regular expression to remove the unicode charecter:

var source = $("#guideListTemplate").html().replace(/[\u200B]/g, '');
Community
  • 1
  • 1
Steven
  • 19,224
  • 47
  • 152
  • 257
5

I just had the same problem and found the solution. The problem stems from the fact we copy-paste snippets from the www into our editor and sometimes it results in a character like space being copied as a numeric entity. The editor parses the entity so everything looks ordinary. The solution is to find a way to highlight numeric entities (if it's not built-in in your editor, look for an extension) and deleting it. Regex/replace is not a solution.

adi518
  • 863
  • 1
  • 11
  • 19
1

The issue for me was that the Handlebar template was saved with filencoding "UTF-8 with BOM". But it need to be saved as "UTF-8 without BOM".

If you are using a Jetbrains IDE like Webstorm just right click the file and click "Remove BOM".

You can read more about the difference between this two here: What's different between UTF-8 and UTF-8 without BOM?

Adam Lindqvist
  • 11
  • 2