Jquery Ajax & Microsoft JScript runtime error: Syntax error, unrecognized expression:

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"
                        ));

I don't see anything obviously wrong - I'll have to try with the latest jQuery. I don't think this is a scope issue. At least in 1.8.* the this reference is setup to reference to the element where the event is being delivered (the form). — OdeToCode, Feb 06 '13 at 06:52

viperguynaz · Accepted Answer · 2013-02-06T02:53:44.417

0

"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.

edited Feb 06 '13 at 02:53

answered Feb 05 '13 at 02:16

viperguynaz

12,044
4
30
41

If you don't want all the forms in the application to have the same ID, then relying on event handlers to have a this reference pointing to the element where the event is delivered makes the code reusable. Perhaps this changed in the latest version, I'll have to check (but it would badly break backward compatibility, so I couldn't imaging jQuery doing something like that). – OdeToCode Feb 06 '13 at 06:54
Strangely enough viperguynaz's first suggestion appears exactly like my sample. Nonetheless I changed my code to viperguynaz's second option and it all worked fine. I then reverted to the first option and it *now* inexplicably appears also to work. Thanks for reviewing. – ChiliYago Feb 06 '13 at 16:59

score 0 · Answer 2 · edited May 30 '13 at 16:54

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

Vitaliy Markitanov · Answer 3 · 2013-04-15T15:57:59.543

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">.....

Jquery Ajax & Microsoft JScript runtime error: Syntax error, unrecognized expression:

3 Answers3