what is wrong with my jquery ajax form post?

Question

    $("button[name='advocate-create-button']").on("click", function () {
    $.ajax({            
        url: '/Vendor/AdvocateCreate',
        type: 'post',
        dataType: 'json',
        data: $('form#advocate-create-form').serialize(),
        success: function() {
            $(".modal_overlay").css("opacity", "0");
            $(".modal_container").css("display", "none");
        }    
    }).done(function (data) {
        var $target = $("#advocate-list-view");
        var $newHtml = $(data);
        $target.replaceWith(data);
        $newHtml.effect("highlight");
    });
    return false;
});

Almost got this, just need a slight assist to get it done...I'm trying to post form data to '/Vendor/AdvocateCreate' and once it saves, I want the dialogue to go away and the list behind it to be updated.

The list behind it is the AdvocateList view and pulls its data from AdvocateList method in the same controller

AdvocateCreate method

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult AdvocateCreate(Advocate advocate, int page = 1)
    {
        if (!ModelState.IsValid) return View(advocate);
        db.Advocates.Add(advocate);
        db.SaveChanges();

        var userId = WebSecurity.GetUserId(User.Identity.Name);

        var model = (from a in db.Advocates.ToList()
                     where a.VendorId == userId
                     select a).ToPagedList(page, 15);
        if (Request.IsAjaxRequest()) return PartialView("_AdvocateListPartial", model);
        return View(model);
    }

the form tag is thus: <form class="form" id="advocate-create-form">

The create method does get called, the data does get saved, but the lines under success: do not fire and the data in #advocate-list-view is not updated

thanks

Are you returning json from your service? is it valid json? my guess is no because you're treating it like html. (Hint: remove dataType: "json" if your service is returning html data) — user400654
– user400654, Commented Aug 19, 2013 at 19:20
@KevinB ah...thanks kevin, changed json to html and it works perfectly now +1 +1 — J Benjamin
– J Benjamin, Commented Aug 19, 2013 at 19:27
@JBenjamin Just to expand slightly, your action returns a PartialView, which is (generally) html. If you wanted to return json, you'd return a JsonResult instead. — Jason P
– Jason P, Commented Aug 19, 2013 at 19:28
@KevinB re: newHtml...was trying to get the updated div area to flicker or something...that's not as important but the update is happening so fast that I want to somehow attract user attention to the fact that the list had changed — J Benjamin
– J Benjamin, Commented Aug 19, 2013 at 19:29

user400654 · Accepted Answer · 2013-08-19 19:39:04Z

1

Your service looks like it should be returning html, and you're treating it as-if it should be html, so i'm going to assume it's html. You need to either remove the dataType option, or set it to html. Since html is not valid json, jQuery is triggering the error handler rather than success.

$("button[name='advocate-create-button']").on("click", function () {
    $.ajax({            
        url: '/Vendor/AdvocateCreate',
        type: 'post',
        /*dataType: 'json',*/
        data: $('#advocate-create-form').serialize(),
        success: function() {
            $(".modal_overlay").css("opacity", "0");
            $(".modal_container").css("display", "none");
        }    
    }).done(function (data) {
        var $target = $("#advocate-list-view");
        var $newHtml = $(data); // dunno what is 
        $target.replaceWith(data); // goin on here
        $newHtml.effect("highlight"); // or here
    });
    return false;
});

answered Aug 19, 2013 at 19:39

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

J Benjamin Over a year ago

about the 'dunno what is goin on here' ... I was under the impression that var $target sets where to place the new data, then $target.replaceWith does the placing. (the two $newHtml lines make the newly updated div flash real quick to indicate that part of the screen has changed)

user400654 Over a year ago

Your impression is correct, but $newHtml actually contains a completely different collection of dom elements than the ones you're replacing $target with since you used data in the replaceWith rather than $newHtml

Collectives™ on Stack Overflow

what is wrong with my jquery ajax form post?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related