Jquery Ajax & Microsoft JScript runtime error: Syntax error, unrecognized expression: - asp.net-mvc

Question

I am working on the ode-to-food MVC4 demo app on Pluralsite by Scott Allen and have a troublesome error enabling ajax calls. I am thinking this may have something to do with my more recent jquery version but not sure.
When I uncomment following line to activate ajax call I get the Microsoft JScript runtime error, otherwise it works fine:
$('form[data-ucw-ajax="true"]').submit(ajaxFormSubmit);
The error is:
Unhandled exception at line 4411, column 2 in http://localhost:17471/Scripts/jquery-1.9.0.js
0x800a139e - Microsoft JScript runtime error: Syntax error, unrecognized expression:
<div class="wrapper clearfix">
....
</div>
<hr />
My View has this form:
<form method="get" action="#Url.Action("Index")" data-ucw-ajax="true" data-ucw-target="#facilitiesList">
My JQuery code is:
$(function () {
var ajaxFormSubmit = function () {
var $form = $(this);
var options = {
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize()
};
$.ajax(options).done(function (data) {
var $target = $($form.attr('data-ucw-target'));
var $newHtml = $(data);
$target.replaceWith($newHtml);
$newHtml.effect('highlight');
});
return false;
};
$('form[data-ucw-ajax="true"]').submit(ajaxFormSubmit);
});
My Script Load Bundles look like:
bundles.Add(new ScriptBundle("~/bundles/jquery/ucw").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*",
"~/Scripts/jquery-migrate-1.0.0.js",
"~/Scripts/My.js"
));

Answer 1

"This" has scope issues. The "this" that you refer to in ajaxFormSubmit is the context of the ajaxFormSubmit , not the click handler of the link. You need to do something like this:
$form = $('form[data-ucw-ajax="true"]');
or give the form an ID and use:
$form = $('#myForm');
Also, I would move Jquery to another bundle to ensure it is loaded before all the other libraries.

Answer 2

I have similar error with another code from that video course - when returned html from partial View wrapped into JQuery to apply animation later...
function dataReceived(data) {
var $newHtml = $(data); -<<<<same Exception here
$(target).replaceWith(data);
$(data).effect("highlight");
}
Exception: Unhandled exception at line 4421, column 2 in jquery-1.9.1.js
0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression:
<div id="restaurantsList">.....

Answer 3

I started with the code from this changeset, then, via NuGet:
updated jQuery to 1.9.1
updated jQuery UI to 1.10.0
added jQuery migrate 1.1.0 (also added to jQuery bundle)
I don't see any problems in Chrome or IE10 (except for JQMigrate warnings). Other than the small difference in jQuery versions, I can't see anything that would be different. Can you try to bump up your jQuery reference? If the problem still persists, send me the error message again with 1.9.1