[Rails]jQuery: Syntax error, unrecognized expression

Question

I've a problem with my Rails 3 app: I've a script in my view to display a progress bar for an upload (the upload process works):

<h1>Ajouter des images:</h1>

<%= form_for [:admin, :gallery,  @painting], html: { multipart: true} do |f| %>

  <%= f.hidden_field :gallery_id %>

  <%= f.label :image, "Upload paintings:" %>

  <%= f.file_field :image, multiple: true, name: "painting[image]" %>

<% end %>

<script id="template-upload" type="text/x-tmpl">
  <div class="upload">
    {%=o.name%}
    <div class="progress"><div class="bar" style="width: 0%"></div></div>
  </div>
</script>

But when i try to upload a file, i got this error:

Uncaught Error: Syntax error, unrecognized expression: <div class="upload">
  Argentina.gif
  <div class="progress"><div class="bar" style="width: 0%"></div></div>
</div> 

Coming form the jquery.js file:

Sizzle.error = function( msg ) {
    throw new Error( "Syntax error, unrecognized expression: " + msg );

I really don't know how to fix it, i've already sought a lot ! Thanks for your help !

Answer 1

This is happening because of the identation inside your template tag. Check it out: jquery-htmlstring-versus-jquery-selectorstring

You can avoid it by using $.parseHTML():

data.context = $($.parseHTML(tmpl("template-upload", file))[1])