Question

The Objective:

Change my $.post to an $.ajax in order to syncronize it and display the message until request has finished.

I would like to know exactly how I could do that with an ajax request, my big problem is when I try to replace div content as what I have done it here using $.post

The code:

The view

 function NewVersion() {
     $.ajax({
         url: "/Valoration/NewVersion",
         type: "POST",
         async: false,
         success: function (data, status, xhr) {
             if (data.success) {

                 $.post(data.hvmHeaderPartialView, function (partial) { $('#divHvmHeader').html(partial); });

                 MessageNewVersionSucced();
             }
         },
         error: function (xhr, status, err) {
             alert(err);
         }
     }); 

The controller

public ActionResult HvmHeaderPartialView()
    {
        return PartialView("_HvmHeaderPartialView,", DetailHvmModel);
    }    


private ActionResult NewVersion()
    {

    var result = hvmService.addNewVersion(hvm);
        var HvmHeaderPartialView = Url.Action("HvmHeaderPartialView,");


        return Json(new
        {
            success = result,
            hvmHeaderPartialView= HvmHeaderPartialView,

        });
    }

Answer 1

Do you need to keep it async=false?

You could use $.load() to replace div content instead of using $.post. For example:

$('#divHvmHeader').load('ajax/test.html');

With a callback function:

$('#divHvmHeader').load('/Valoration/NewVersion', function() {
  MessageNewVersionSucced();
});

Note: MessageNewVersionSucced will execute only after the ajax call to ‘/Valoration/NewVersion’ completed.