ajax helpers in mvc call non-asynchronously

Question

I am developing in asp.net mvc and today I saw some strange thing in using ajax helpers.

If I use Ajax.BeginForm(...) or Ajax.ActionLink(...), they do not call (post to) the actions asynchronously, and they work as they are normal form or normal link, but when I check Request.IsAjaxRequest() in action, it returns true.

For ajax forms, I use

$('#createqfrm').submit(function () {...}

and it works fine, and send the form asynchronously.

Note: I know I have to change .live() to .on() in jquery.unobtrusive-ajax.min since new versions of jquery.

also here are my referenced java libs:

 <script src="@Url.Content("~/Scripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Edited:

Checking Request.IsAjaxRequest() and saw that it returns false.

Action Code Added:

public ActionResult GetStriing()
        {
            if (Request.IsAjaxRequest())
            {
                return Json("ajax called",JsonRequestBehavior.AllowGet);
            }
            else
            {
                return Json("ajax not called", JsonRequestBehavior.AllowGet);
            }

        }

part of html code for form:

<form action="/admin/xxxx/create" data-ajax="true" data-ajax-success="handeCreateQuestionnareSuccess" id="form0" method="post">        <div class="editor-label">
            <label for="Title">title</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="*" id="Title" name="Title" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
        </div>
        <div class="editor-label">
            <label for="Status">Status</label>
        </div>
....

 <script type="text/javascript">

        function handeCreateQuestionnareSuccess(context) {
            debugger;
            if (context) {

                $("#CreateQuestionnarieform").empty().html(context[1]);
                $("#CreateQuestionnarieform").append('<input type=hidden name=questionnarieid value=' + context[2] + '/>');

            } else {

                $("#CreateQuestionnarieform").empty().html(context[1]);

                $("form").removeData("validator");
                $("form").removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse("form");
            }
        }
    </script>

Code that submits form with ajax call:

$('#createqfrm').submit(function () {

                if ($(this).valid()) {
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        success: function (context) {



                        }
                    });
                }
                return false;
            });

not a solution but can notify other users:

The problem is with jquery 1.9.0 and updates that I get from nuget for jquery.validate.min.js and jquery.validate.unobtrusive.min.js I changed back to 1.8.3 and it works fine.....

How do you know they are are working like forms or links? Is the page reloaded? — iappwebdev, Jan 25 '13 at 17:16
no, but in result of action, i return some json , and the page shows raw json — Babak Fakhriloo, Jan 25 '13 at 17:18
Did you check via firebuf if all scripts have been loaded successfully. Maybe there's a typo. — iappwebdev, Jan 25 '13 at 17:33
If this is not the case please post HTML of an ajax form, there should be an attribute `data-ajax` setted to `true`. — iappwebdev, Jan 25 '13 at 17:35
it never reaches to function handeCreateQuestionnareSuccess(context) to update CreateQuestionnarieform...it is below the form. — Babak Fakhriloo, Jan 25 '13 at 17:46
Did you check in firebug for javascript errors? And again: did you check if all javascript files have been loaded? — iappwebdev, Jan 25 '13 at 18:20
simon the problem is with jquery 1.9.0 and updates that I get from nuget for jquery.validate.min.js and jquery.validate.unobtrusive.min.js I changed back to 1.8.3 and it works fine..... — Babak Fakhriloo, Jan 25 '13 at 18:22
So again: do you have javascript errors in firebug console? If there's any error chances are big that it breaks unobtrusive ajax! Do you use jQuerys `.live()` anywhere on your page? — iappwebdev, Jan 25 '13 at 18:25
Check my edited answer, there are known issues with jQuery 1.9 and unobtrusive ajax. — iappwebdev, Jan 25 '13 at 18:42
And looking in my file `jquery.unobtrusive-ajax.min.js` shows me that it uses `.live()` which has been removed in jQuery 1.9! — iappwebdev, Jan 25 '13 at 18:49

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

Well that sounds like UnobtrusiveJavaScriptEnabled is set to false. Have a look in your AppSettings-File. In section <appsettings> there should be:

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

EDIT:

Just found this link after a minute of googling:

http://forums.asp.net/t/1877166.aspx/1?jquery+unobtrusive+ajax+js+error+with+jQuery+1+9+0+updated

Unobtrusive Ajax stopped working after update jQuery to 1.9.0

edited May 23 '17 at 10:24

Community

1
1

answered Jan 25 '13 at 17:27

iappwebdev

5,880
1
30
47

It has been set to true, if it was not, I cound not manually send form asynchronously – Babak Fakhriloo Jan 25 '13 at 17:29
I mean not using ajax.beingform....but using $('#createqfrm').submit(function () {...} – Babak Fakhriloo Jan 25 '13 at 17:36
This are two different things! `Ajax.BeginForm` is a HTML-Helper generatung HTML for the form. `.submit()` is a jQuery command running the submit of a form. Show your form HTML! – iappwebdev Jan 25 '13 at 17:41
I mentioned in my question that I know that .live() issue .... look at 6th paragraph...thanks any way – Babak Fakhriloo Jan 25 '13 at 18:54
Well you only write that you know you have to change it.. did you change it? – iappwebdev Jan 25 '13 at 19:07

ajax helpers in mvc call non-asynchronously

1 Answers1