Menu icon Foundation
[Foundation 5.1.0.0] Syntax Error in JS

Just updated to the Foundation 5.1.0.0 via the foundation-rails gem on my Rails 4.0.2 application.

I use Teaspoon to do my JavaScript testing. Ran the rake and received the error message before my application test initiated:

Error: Syntax error, unrecognized expression: [data-'Times New Roman'-abide]
  # jquery.js:1472
  # jquery.js:2086 -- tokenize
  # jquery.js:2474 -- select
  # jquery.js:881 -- Sizzle
  # jquery.js:1410
  # jquery.js:2664
  # jquery.js:2642 -- winnow
  # jquery.js:2708
  # foundation/foundation.js:114
  # foundation/foundation.abide.js:51
  # foundation/foundation.js:334
  # foundation/foundation.js:318
  # foundation/foundation.js:583
  # jquery.js:385
  # jquery.js:138
  # foundation/foundation.js:585
  # application.js:31
  # jquery.turbolinks.js:30
  # jquery.js:4625
  # jquery.js:4293
  # jquery.js:4534
  # jquery.js:5236
  # jquery.js:385
  # jquery.js:138
  # jquery.js:5237
  # jquery.turbolinks.js:36
  # jquery.js:3100
  # jquery.js:3212
  # jquery.js:3424
  # jquery.js:3454 -- completed

            

         

Aside from the message, it seems my tests ran without issue.

Downgraded to Foundation 5.0.3.1 and rerun Teaspoon, which did not output the error message.

I'm not using the expression anyway in my app, so I am assuming from the testing that it is originating somewhere in the Foundation files.

Teaspoon gem version 0.7.9
Phantomjs gem version 1.9.2.1

Foundationteaspoontesting

Just updated to the Foundation 5.1.0.0 via the foundation-rails gem on my Rails 4.0.2 application.

I use Teaspoon to do my JavaScript testing. Ran the rake and received the error message before my application test initiated:

Error: Syntax error, unrecognized expression: [data-'Times New Roman'-abide]
  # jquery.js:1472
  # jquery.js:2086 -- tokenize
  # jquery.js:2474 -- select
  # jquery.js:881 -- Sizzle
  # jquery.js:1410
  # jquery.js:2664
  # jquery.js:2642 -- winnow
  # jquery.js:2708
  # foundation/foundation.js:114
  # foundation/foundation.abide.js:51
  # foundation/foundation.js:334
  # foundation/foundation.js:318
  # foundation/foundation.js:583
  # jquery.js:385
  # jquery.js:138
  # foundation/foundation.js:585
  # application.js:31
  # jquery.turbolinks.js:30
  # jquery.js:4625
  # jquery.js:4293
  # jquery.js:4534
  # jquery.js:5236
  # jquery.js:385
  # jquery.js:138
  # jquery.js:5237
  # jquery.turbolinks.js:36
  # jquery.js:3100
  # jquery.js:3212
  # jquery.js:3424
  # jquery.js:3454 -- completed

            

         

Aside from the message, it seems my tests ran without issue.

Downgraded to Foundation 5.0.3.1 and rerun Teaspoon, which did not output the error message.

I'm not using the expression anyway in my app, so I am assuming from the testing that it is originating somewhere in the Foundation files.

Teaspoon gem version 0.7.9
Phantomjs gem version 1.9.2.1


Renan Aguiar gave the most helpful answer for this post
Renan Aguiar over 5 years ago

I had this problem once when building my custom css using compass (foundation gem). The problem was that I forgot to add the css part which include this:

meta.foundation-data-attribute-namespace {
  font-family: false; }

Don Vanboom almost 6 years ago

Same here after upgrading from 5.0.3.1 to 5.1.1.0....Javascript error that keeps foundation from running.

Yuri Tkachenko almost 6 years ago

The same issue.

Michael Averto almost 6 years ago

Same problem here. Easy fix, head into your _settings.scss file and add:

  $namespace : false;

That's it.

You can see that:

$('.foundation-data-attribute-namespace').css("font-family") 

returns "'Times New Roman'" in the console so namespace is incorrectly set.

Bartek Bulat almost 6 years ago

Hi,

It doesn't work in Opera 12 too (if anyone cares).

If you don't use namespace feature you can override set_namespace method, before foundation initialization, like this:

Foundation.set_namespace = function() {};
$(document).foundation();

Renan Aguiar over 5 years ago

I had this problem once when building my custom css using compass (foundation gem). The problem was that I forgot to add the css part which include this:

meta.foundation-data-attribute-namespace {
  font-family: false; }

Dr. Hoodwink over 5 years ago

None of these solutions/workarounds work for me. I have created a MVC5 project in Visual Studio, installed Nuget package Foundation5.MVC.Sass, clicked to build and...

Unhandled exception at line 4693, column 2 in http://localhost:13060/Scripts/jquery-1.8.2.js

0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: [data-Times New Roman-abide]

What's the right way to fix this?

Patrick Mccaffrey over 5 years ago

I'm having the same problem.

If I override Foundation.set_namespace with an empty function, Orbit does not initialize because it tries to check the length on this.namespace (which is null).

If I use the CSS workaround (font-family:false), all of the scripts initialize, but Orbit still doesn't work. The first slide looks correct, and the timer seems to work, but the slides never actually slide.

Ideas? This is a pretty crippling bug, in my opinion. How do problems like this make it into a release?

Daniel Leiszen over 5 years ago

Go to foundation.js, find set_namespace function. Replace the namespace variable to an empty string.

var namespace = '';

I am brand new to foundation, and I have no idea what it did, but the error disappeared. However, I have no idea how is it possible for a project like this, not to be tested on Visual Studio 2013.

jmarceli over 5 years ago

For me a solution was to move all scripts to the end of the HTML file just before tag.

juraj janak over 5 years ago

still same error with 5.3.1/5.3.3

http://jsfiddle.net/R9T7y/

non of the proposed solution worked

still i get error:
Uncaught Error: Syntax error, unrecognized expression: [data-'Times New Roman'-slider]

i copy/paste example + cdn from documentation and still no success

(and fixed that camelCase "myForm" error ...)

anyone can help with this?

Nestor over 5 years ago

The solution proposed by @jmarceli works very well. Put your script tags at the end of the document.

Peter Acs over 5 years ago

I had the same error as @juraj janak

Uncaught Error: Syntax error, unrecognized expression: [data-'Times New Roman'-slider]

My problem was that i had correct paths for Javascript, but I didn't have correct path for CSS.
When I fixed my path and CSS loaded, i didn't receive that JS error anymore.

ballPointPenguin over 5 years ago

[solved] ?

I put this in my app/assets/javascripts/application.js:

$(function(){
  Foundation.global.namespace = '';
  $(docment).foundation();
});

FWIW I'm using these gems:
rails 4.0.9
foundation-rails 5.4.3.0
teaspoon 0.8.0
guard-teaspoon 0.8.0
jasmine 2.0.2

Larry over 4 years ago

I also have this issue and I have tried all the "solutions" suggested with no success. I am using VS 2013 MVC 5 (latest update). A working site stopped working after updating to 5.5.0.
Today I created a completely new test site with MVC 5 and added the NuGet updates to MVC to bring it current (Update All). I then used NuGet to install Foundation 5.5.0.
I changed nothing in the site other than the updates. It fails with the same error that others have had. I would appreciate a solution to this issue if one exists.

Larry over 4 years ago

Update on this error. I can reproduce this situation.
Windows 8.1 fully patched, Visual Studio 2013 - 4, .NET 4.5.1
Steps to create the Failing Application.
1 Create new project
2 Select MVC
3 Change Authorization to "No Authorization"
4 Name the Application
5 Browse to your Documents/Visual Studio 2013/Projects folder for the application location
6 OK to create the project
7 In Solution Explorer, right-click the project and select Manage NuGet packages
8 Select Update and choose Update All (there will be a number of updates
9 Still in the NuGet Manager select Online and type Zurb in the search box
10 From the list select Foundation 5.5 with sass and Install
11 Right- click the project name, from the context menu select Setup Compass
12 Open the config.rb file
13 Change your settings to match these:
css_dir = "Content"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "Scripts"
14 Open the site.scss file and hit enter after the last line then save to cause it to compile

Repeat the above process except change step 5 to use a fully qualified directory such as:
C:/test/projects
This configuration will work properly.

I suspect that the compass compiler does not understand relative paths requiring hard paths to site assets.
I am having the same issue with projects that live in workspaces managed by TFS/Visual Studio Online.
If someone knows more about the path requirements, I would like to know.

Larry over 4 years ago

Using the method I described previously, I add the project to a TFS collection after getting it built works. Comparing the project files between working and non-working projects I find a considerable difference. So my solution is to build it clean not under source control and not in a relative path. It works fine after the initial setup wherever you move the project then.