JavaScript runtime error: Syntax error, unrecognized expression 0x800a139e

Question

I'm encountering this strange behavior in my MVC 5 app.

I have a view with a few Ajax.ActionLinks, which load corresponding partial views on click event.

@Ajax.ActionLink("Some text here", "_ActionName", "ControllerName", new { param = Model.Id }, ajaxOptions: new AjaxOptions { UpdateTargetId = "partialViewContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, htmlAttributes: new { @id = "btn" })

This successfully loads partial view returned by _ActionName(int param) in ControllerName.. however, in Chrome's console, it throws an exception Uncaught Error: Syntax error, unrecognized expression: /ControllerName/_ActionName?param=12

So the problem is with /ControllerName/_ActionName?param=12 expression...

IE (All versions) throw the same exception but in an annoying popup instead.

Visual Studio is configured to break on all JavaScript errors, so I guess its expected.. but I don't understand why jQuery is throwing this exception... It doesn't like the expression generated by Razor engine. Some post suggested to downgrade to 1.x jQuery version but that didn't help.

I have other MVC apps with similar approach to loading partial views through Ajax.ActionLinks never encountered this problem before...

Additional Info:

I'm using Visual Studio 2015 Pro

Libraries used in the project :

• jquery-2.2.1
• bootstrap 3.6
• jquery.unobtrusive-ajax

If there's anything else I can provide for better understanding, please let me know. Thanks in Advance!

EDIT:

I tried downgrading to jQuery 1.7.2 and I no longer get the exception. This is because..

from the notes

Prior to 1.9, a string would be considered to be an HTML string if it had HTML tags anywhere within the string. This has the potential to cause inadvertent execution of code and reject valid selector strings. As of 1.9, a string is only considered to be HTML if it starts with a less-than ("<") character. The Migrate plugin can be used to restore the pre-1.9 behavior. If a string is known to be HTML but may start with arbitrary text that is not an HTML tag, pass it to jQuery.parseHTML() which will return an array of DOM nodes representing the markup. A jQuery collection can be created from this, for example: $($.parseHTML(htmlString)). This would be considered best practice when processing HTML templates for example.
Simple uses of literal strings such as $("<p>Testing</p>").appendTo("body") are unaffected by this change.
Bottom line: HTML strings passed to jQuery() that start with something other than a less-than character will be interpreted as a selector. Since the string usually cannot be interpreted as a selector, the most likely result will be an "invalid selector syntax" error thrown by the Sizzle selector engine. Use jQuery.parseHTML() to parse arbitrary HTML.

I'm not sure how can I parse the Ajax.ActionLink href link generated by Razor engine using parseHTML(). Also I'd like to continue using jQuery 2.x as Bootstrap.js 3.6 isn't compatible with jQuery versions below 1.9...

Answer 1

Ended up not using @Ajax.ActionLink. Instead using pure jQuery Ajax call as suggested by @FilixMogilevsky

Now I have

<a href="" data="@Url.Action("_ActionName", "ControllerName", routeValues: new {param = Model.Id})" class="tabLinks">Some text here...</a>
<div id ="divPartialView">
</div>

And in script block I use

$('.tabLinks').on('click', function() {    
    var url = $(this).attr('data');
    $.get(url, function(data) {
        $('#divPartialView').html(data);
    });
});