CODEWITHSUNDEEP
c#ajaxasp.net-mvc-3jquery
Jean-François Côté
Jean-François Côté

Reputation: 4350

New version of jQuery loads another page instead of replacing div

I don't know what I did wrong, but by updating to a newer version of jQuery, my ajax page doesn't work anymore.

I was using 1.8.3 from google CDN and now I'm trying to use 1.9.1. I have also updated jQuery UI to the 1.9.2 also from the google CDN. Finally, I have taken the latest "jquery.unobtrusive-ajax.min.js" for my page.

Everything works fine on my website, except the page where I use ajax call to replace div on my page. This page was working perfectly but now when the user click submit, it just load into another page.

Here is a jsfiddle that simplify my page a lot. I don't know how to call a "fake controller" in jsfiddle that could return simple html so modify it if you want. By clicking the button, it's supposed to replace the div with the same GUID. The Ajax call has been generated with the Ajax object from MVC 3. Like this:

 using (Ajax.BeginForm("AddSubtitle", "Recipe",
                    new AjaxOptions 
                    { 
                        UpdateTargetId = superGuid,
                        HttpMethod = "POST",
                        InsertionMode = InsertionMode.Replace,
                        OnSuccess = "done"
                    }))
                {
                    <input type="hidden" name="IDRecipe" value="@Model.IDRecipe" />
                    <a name="SubtitleSection" ></a>
                    <input class="field required span6 text-box single-line" name="Name" />
                    <input type="submit" class="btn btn-success" value="Ajouter une catégorie d'ingrédient" />
                }

My controller seems to work very well since in the new page that opens the content is perfect. Here it is so that you have all the piece of the puzzle.

[HttpPost]
[Authorize]
public PartialViewResult AddSubtitle(Subtitle sub)
{
    Recipe realRecipe = db.Recipes.Find(sub.IDRecipe);

    if ((Guid)Membership.GetUser().ProviderUserKey == realRecipe.IDUser || User.IsInRole("Admin"))
    {
        sub.Order = realRecipe.Subtitles.Count + 1;
        if (sub.Name != null && sub.Name != "")
        {
            realRecipe.Subtitles.Add(sub);
            db.SaveChanges();
        }
        else
            ModelState.AddModelError("", "Le nom de la catégorie ne peut pas être vide!");

        return PartialView("_SubtitleList", Utils.GetListIngredientAndSubtitle(realRecipe.IDRecipe, realRecipe.Subtitles));
    }
    else
        return PartialView("_SubtitleList", null);
}

Anybody can help me with this?

Upvotes: 2

Views: 445

Answers (1)

Damyan Petev
Damyan Petev

Reputation: 1635

Right your page behaves as if there's no ajax because Unobtrusive failed. Make sure you update the version of Microsoft.jQuery.Unobtrusive.Ajax - older versions use the deprecated .live() method as mentioned, but the new one is updated with .on()

Install: 

PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax

Project site. Latest version 2.0.30506.0 works just fine with jQuery 1.9.1 for me. Additional NuGet help from their docs at http://docs.nuget.org/.

Upvotes: 1

Related Questions