Update multiple form divs after jquery / ajax post request

Question

Update multiple form divs after jquery / ajax post request

Navigation

#1 by (1 votes)

0

I have two post requests in the form, one inactive and the other one activates a registration, as they are the same I will only display one to exemplify:

function inativarCadastro(cod) {
    $.ajax({
        url: '@Url.Action("InativarCadastro", "Administradora")',
        data: { codigo: cod },
        cache: false,
        type: "POST",
        dataType: "json",
        success: function (data) {
            $("#administradoras").load(location.href + " #administradoras>");
            $("#mensagens-sistema").load(location.href + " #mensagens-sistema>");
        },
        error: function () {
            alert("@Html.Raw(@ErrorMessages.CadastroFalhaInativar())");
        }
    });
}

The backend does the update in the specific table setting the register as inactive and filling a TempData. This is always being done correctly, no problem about that.

TempData["Alerta"] = "Ativado sucesso" ou "Inativo sucesso".

This TempData brings in addition to the text an html snippet to customize the display of this text:

<div id="msg-alerta" class="alert alert-success alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
  <i class="fa fa-check-circle fa-lg"></i>
  A administradora de código 2 foi inativada com sucesso.
</div>

In the view I have the following div to display this TempData:

<div id="mensagens-sistema">
    @Html.Raw(TempData["Alerta"])
</div>

And I have a table that displays the list of the records and according to the status of it active or inactive, which changes the color of the row.

<b><table id="administradoras" /></b>

Whenever the table is updated without problems at all times, however, the div that displays the tempdata is not always updated as you go by clicking time updates and displays correctly, not time, in some moments instead of updating, it does is disappear with the div of the form.

Note:
No code error or in the browser debugger is displayed. If I put either of the two divs to be updated by itself, it works perfectly, however, if I try to update the two, as in the example I added, it gives this instability.

jquery c# asp.net ajax

asked by anonymous 02.06.2017 / 17:03

1 answer

Get input value on same page with PHP [duplicate] Stylize autocomplete background

score 1 · Accepted Answer

When you load a page through the ajax request and you want to replace different fragments of that page, you can not perform the task with the load () function, for this type of task you use the get () function to capture the response and refresh the fragments:

Instead of using the load () function:

$("#mensagens-sistema").load(location.href + " #mensagens-sistema>");

Use get ():

$.get(location.href).done(function (data) {
    var novoDom = $(data);
    $('#administradoras').replaceWith($('#administradoras', novoDom));
    $('#mensagens-sistema').replaceWith($('#mensagens-sistema', novoDom));
});

It worked 100%.

As I understood the problem that I was having with the load () function in sequence, it seems that it ends up refreshing the page on the first call and when making the second call it goes and refreshes again by undoing the first change.