Syntax error, unrecognized expression: #/...

[edamron]

I recently started getting these errors when I click on a ui-sref link, EVEN THOUGH it still takes me to the given state / templateUrl. Here's a small snippet from my app.js file:

        .state('prepare', {
            abtract: true,
            url: '/prepare',
            templateUrl: 'prepare/prepare.html',
            controller: 'prepareController'
        })
            .state('prepare.propinss', {
                url: '/propinss',
                templateUrl: 'prepare/question.html'
            })

The abstract state ('prepare') doesn't cause an error to be recorded in the log, but the 'prepare.propinss' state does cause it:

Uncaught Error: Syntax error, unrecognized expression: #/prepare/propinss

BTW, the actual error itself comes from jquery.js:1437 (Sizzle.error = func...).

It seems I can safely ignore this error, but I'd prefer to eliminate it, just in case it does eventually cause me a real issue.

Thanks!

[rickj33]

I had a very similar issue, and traced it to the function StateRefActiveDirective

In my case, it is being caused by this line in the function
$scope.$on('$stateChangeSuccess', update);

When the event occurs and update is called, the variable state is null, since this.$$setStateInfo has not been called, so in the update function when isMatch is executed, the following line
return $state.includes(state.name) && matchesParams();

causes an exception "Cannot read property 'name' of null"

I reverted back to version 0.2.10 from 0.2.11 and I do not get the exception.

Thanks
Rick

function $StateRefActiveDirective($state, $stateParams, $interpolate) {
  return  {
    restrict: "A",
    controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
      var state, params, activeClass;

      // There probably isn't much point in $observing this
      // uiSrefActive and uiSrefActiveEq share the same directive object with some
      // slight difference in logic routing
      activeClass = $interpolate($attrs.uiSrefActiveEq || $attrs.uiSrefActive || '', false)($scope);

      // Allow uiSref to communicate with uiSrefActive[Equals]
      this.$$setStateInfo = function (newState, newParams) {
        state = $state.get(newState, stateContext($element));
        params = newParams;
        update();
      };

      $scope.$on('$stateChangeSuccess', update);

      // Update route state
      function update() {
        if (isMatch()) {
          $element.addClass(activeClass);
        } else {
          $element.removeClass(activeClass);
        }
      }

      function isMatch() {
        if (typeof $attrs.uiSrefActiveEq !== 'undefined') {
          return $state.$current.self === state && matchesParams();
        } else {
         return $state.includes(state.name) && matchesParams();
        }
      }

      function matchesParams() {
        return !params || equalForKeys(params, $stateParams);
      }
    }]
  };
}

[seinavco]

+1

I have the same issue with 'ui-sref'

[kolesnik]

+1

[rahil471]

Any solution on this issue?
I'm facing the same .
I'm using @Version v0.2.13

[skannan74]

i too had the same issue and after few hours stuggle, i found out
i had something like this in the navigation bar. i just removed data-toggle="collapse" and problem solved.

[stwiname]

Removing uses of data-toggle with ui-sref solved the issue for me

[sulmanen]

@stwiname thnx worked beautifully. so fixed by removing data-toggle="tab"

[renesansz]

+1
Having this issue with v0.2.13

@stwiname's fix works, but I don't want to remove the data-toggle="collapse" because I need it.

[rajesh38]

@stwiname, working

[gauravkhullar1690]

worked for me as well thanks

[VegaFromLyra]

I am on v0.2.11 and I was seeing the same error with a ui-sref tag that was used along with data-toggle="tab", though not sure why the data-toggle was added in the first place. Removing it as pointed out in this post helped fix the problem.

[eddiemonge]

https://gist.github.com/eddiemonge/f6a58169c2846731a1eb

[SeregaSh]

Had the same problem. Check here - http://stackoverflow.com/questions/16785264/jquery-syntax-error. No need to delete the data-toggle. The problem is in '/' in hrefs (I had nested states and url for parent state, so I had url "#/parent_state_url/child_state_url" and I was getting the issue because of "/". I deleted url for parent state and it works.). Hope this helped.