[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 !

In ruby on rails, the jquery lib is included trough the "gems", so i don't have a direct access to the file. thanks for your answer ! — khcr, Feb 20 '13 at 17:34
No solution ? I get exactly the same error with the other HTML tags ! — khcr, Feb 21 '13 at 15:35
You should provide the related JS codes, your question is at is doesn't help people to help you. You have just posted the error, not the culprit. — Ram, Feb 21 '13 at 15:57
Yes, you can only write JavaScript within script tags not HTML markup. — Ram, Feb 21 '13 at 17:51

score 14 · Accepted Answer · answered Mar 22 '13 at 05:31

14

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])

answered Mar 22 '13 at 05:31

aelesbao

503
4
14

score 0 · Answer 2 · answered Feb 22 '13 at 22:43

0

jquery-file-upload has a compatibility problem in ruby 1.9.x. There was a recent fix https://github.com/blueimp/jQuery-File-Upload/pull/2031

Others were having the same problem (myself included) https://github.com/waynehoover/s3_direct_upload/issues/47.

Try updating your gem with bundle update jquery-fileupload-rails. (I assume you're using that gem.)

answered Feb 22 '13 at 22:43

IAmNaN

10,305
3
53
51

adding trim makes it compatable – Uchenna Jun 01 '13 at 15:56

score 0 · Answer 3 · answered Mar 07 '13 at 08:13

Remove Jquery function $( ) when you use template. This is compatible with Jquery 1.9.1. You should process template like bellow

tmpl("template-upload", {file: file, icon: icon_name[type]})

instead of

$(tmpl("template-upload", {file: file, icon: icon_name[type]}))

score 0 · Answer 4 · answered May 15 '13 at 18:14

0

Using the latest version of jquery, add tril to it should do the trick

$(tmpl("template-upload", {file: file, icon: icon_name[type]}).trim())

answered May 15 '13 at 18:14

Uchenna

4,059
6
40
73

[Rails]jQuery: Syntax error, unrecognized expression

4 Answers4