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

asp.net-mvcasp.net-mvc-4jquery

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

Best Answer

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

Related Topic