LaRae White LaRae White - 5 months ago 118
jQuery Question

Request.IsAjaxRequest() always returning false in MVC4, tried all suggestions in SO, etc

Let me start off by explaining all the possible solutions I've tried. I now have

jquery-unobtrusive-ajax.min.js
inside my scripts folder and have added it to a bundle. I've tried referencing it on the view page itself, along with the
_Layout.cshtml
page also, this is how I have the bundle currently:

//BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.10.2.min.js",
"~/Scripts/modernizr-2.6.2.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js"));


This bundle is referenced in the main layout view page that all my other views are derived from:

//_Layout.cshtml (at bottom of view, right before hitting </body></html>)
@Scripts.Render("~/bundles/jquery")


Lastly in web.config, I've added these keys to the app settings:

//Web.config
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>


Now that that has been stated, this is what my Ajax call looks like. I'm trying to return some data from a stand alone page and replace it with what's in the main page, fairly straightforward I would think:

@Ajax.ActionLink("Edit", "Index", "WeeklyTarget",
new {id = item.WeeklyTargetId},
new AjaxOptions {HttpMethod = "GET", UpdateTargetId = "hoursEdit", InsertionMode = InsertionMode.Replace})


When this action link is clicked form the index view this is called from the controller:

public ActionResult Index(int? id, IEnumerable<WeeklyTarget> selection )
{
if (Request.IsAjaxRequest())
{
// return the partial view here
}
}


But as stated in my title,
Request.IsAjaxRequest()
will still always return false. What gives??? Please help... I've exhausted all ideas, tweaks, and work arounds I could possibly think of. I even tried clearing out my caches, cleaning solutions, etc.

Answer

So... the issue was that jquery-unobtrusive-ajax.min.js was referencing the deprecated jQuery method .live(). I was able to see this as an error being thrown in chrome's developer console as I was debugging. This will only happen if you use versions of jQuery past 1.9 (I was using 1.10.2). It was deprecated in 1.7 but removed completely in 1.9.

The solution was to add in another jquery library jquery-migrate-1.2.1.js which can be found here: https://github.com/jquery/jquery-migrate#readme and more specifically (for development, not production purposes) here: http://code.jquery.com/jquery-migrate-1.2.1.js. I saved and included this library in my BundleConfig.cs scripts and the rest began working as intended. I hope this will help others.