ASP.NET MVC Page not Updated when using AJAX

Question

I have an ASP.NET MVC project where I want to post an article to the database then display a snippet of the article on the page. When a user comments, I also want to display the comment once I have saved to the database. I am using AJAX for this and call OnFailure and OnSuccess methods in both cases.

The OnFailure method only fires up when I save a post and not a comment (this is because the page isn't updated even when I save successfully). The OnSuccess method isn't invoked at all which is because my page isn't updated.

I am using jquery 2.1.4 and have jquery.unobtrusive-ajax script loaded in my project

Here is my code.

//View for creating a post

 @using (Ajax.BeginForm("Create", "Post",
new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "insertnewpostbelow",
    InsertionMode = InsertionMode.InsertAfter,
    OnSuccess = "postingSucceeded()",
    OnFailure = "postingFailed()"
}))
 {
  //View code left out 
 }

//Server side for saving post and updating PartialView

 [HttpPost, ValidateAntiForgeryToken, ValidateInput(false)]
    public async Task<PartialViewResult> Create
        ([Bind(Include = "ID,Title,Message,PostedOn,isAbuse,By")] Post post)
    {
        if (ModelState.IsValid)
        {
            var list = new List<Post>();
            list.Add(post);

            try
            {
                db.Posts.Add(post);
                await db.SaveChangesAsync();

                return PartialView("_Posts", list);
            }
            catch (RetryLimitExceededException)
            {
                ModelState.AddModelError("", "Unable to login, please try again and contact administrator if the problem persists.");

                //If we got this far, model has errors.
                ViewBag.By = new SelectList(db.Members, "ID", "FullNames", post.By);
                return PartialView("_Posts", post);
            }
        }

        //If we got this far, model has errors.
        ViewBag.By = new SelectList(db.Members, "ID", "FullNames", post.By);
        return PartialView("_Posts", post);
    }

//My JavaScript file

    function postingSucceeded() {
    alert("Posting succeeded.");
}

function postingFailed() {
    alert("Posting failured.");
}

//Portion of the View to update

<div id="big-posts">
        <span id="insertnewpostbelow"></span>

        @Html.Partial("_Posts", Model.Posts)
    </div>

What am I missing out, thanks in advance.

Answer 1

You need to put the content of the returned partial view somewhere on the page

<div id="big-posts">
   <span id="insertnewpostbelow"></span>
   <div id="newPost"></div>
</div>

On the call back function try:

function postingSucceeded(data) {
    $("#newPost").html(data);
}

Hope this helps!

Answer 2

This is because you have an Ajax form in _Posts PartialView. After the placement, say, after <span id="insertnewpostbelow"></span> you need to run jquery.unobtrusive-ajax on page again.

Note that the scripts will render on page loads, not after any changes in page (like updates by PartialView).

Solution: call the script again, after the page update :)