CODEWITHSUNDEEP
jqueryasp.net-mvc-4unobtrusive-ajax
BKahuna
BKahuna

Reputation: 611

Conflict between unobtrusive-ajax and jQuery

I have an MVC4 project where I've used NuGet to install jQuery 3.1.0 and Microsoft.jQuery.Unobtrusive.Ajax 3.2.3. My bundle is this:

bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
            "~/Scripts/jquery-3.1.0.min.js",
            "~/Scripts/jquery.unobtrusive-ajax.min.js",
            "~/Scripts/jquery.hoverIntent.minified.js",
            "~/Scripts/newScript.js",
            "~/Scripts/nav.js"
            ));

I have a view that contains an Ajax.BeginForm block like this:

@using (Ajax.BeginForm("ValidateBASFID", new AjaxOptions { UpdateTargetId = "ValidateBASFIDError", InsertionMode = InsertionMode.Replace }))
{
    <label class="required">BASF ID</label>@Html.ValidationMessageFor(model => model.BASFID, "", new { @class = "text-danger" })
    @Html.TextBoxFor(model => model.BASFID, new { style = "width: 50px; margin-right:20px; float:left;", @class = "form-control" })
    <input type="submit" value="Validate with BASF ID" class="smallButton" style="float:left;" />
    <div id="ValidateBASFIDError" class="validationError text-danger"></div>
    <div style="clear:both;"></div>
}

This block points at a controller action like this:

public ActionResult ValidateBASFID(string BASFID)
{
    Models.Repositories.SectionRepository _repository = new Models.Repositories.SectionRepository();
    MemberVM Member = _repository.ValidateBASFID(BASFID);

    if (Member != null)
    {
        Member.SaveMemberInfo();

        return RedirectToAction("Sections", new
        {
            SectionSignupMasterID = Member.SectionSignupMasterID,
            VerificationEmail = Member.Email,
            MemberName = Member.FullName
        });
    }
    else
    {
        ViewBag.Message = "Invalid BASF ID";
        return PartialView("_ValidationError");
    }
}

The idea is that I'll use AJAX to post back an ID value and test it. If the ID is valid, I'll redirect to the Sections view. If the ID is not valid, an error message is returned.

What's happening is that a valid ID redirects to the Sections view but the page doesn't come up. The only thing displayed is the year. It just says "2016" at the top left corner of the page. The page is also stuck trying to retrieve an image from a different domain.

If I comment just the unobtrusive-ajax out of the bundle, the view redirection works fine (but I can't get the error message back if the ID is invalid). If I comment just the jQuery out of the bundle, the view redirection works fine (but other client-side code is broken).

Why do these two script libraries not seem to be working well together or what can I do to get more information about what's going on here? Thanks.

Upvotes: 1

Views: 1092

Answers (1)

BKahuna
BKahuna

Reputation: 611

Stephen is right. I played with the code a little and found that the entire Sections view was trying to load into the target of the ajax.beginform. It failed because of some javascript at the bottom of the page but Ajax is not for redirection.

The reason it worked when I commented out the unobtrusive library or jQuery was because I was breaking ajax and it was just making a standard postback.

UPDATE: I found a post here also by Stephen that solved my problem.

Upvotes: 1

Related Questions