Update multiple form files after jquery/ajax post request

Asked

Viewed 286 times

0

I have two requests post in the form, one inactive and another activates a register, as they are equal I will display only 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 table specifies setting the registration as inactive and filling a Tempdata. This is always being performed correctly, there is no problem as to this.

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

This Tempdata brings beyond 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 that Tempdata:

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

And I have a table that displays the list of entries and according to her active or inactive status, which changes the color of the line.

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

Always the table is updated smoothly at all times, however, the div that displays the tempdata, is not always updated, as you click time updates and displays correctly, not time, in some moments instead of updating, it makes disappear with the form div.

Obs:
No code or browser debugger error appears. If you put any of the two Divs to be updated alone, it works perfectly, however, if I try to update both as in the example I added gives this instability.

  • I honestly don’t understand your code. But why don’t you return the message directly via json instead of hosting at tempdata?

  • And I think the reason you don’t see anything is because if you fill in the temp on an ajax call, it won’t update to what was rendered before

1 answer

1


When a page is loaded via ajax request and you want to replace different fragments of the same page, it is not possible to perform the task with the load() function, for this type of task the get() function is used to capture the response and update 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));
});

Worked 100%.

From what I understood of the problem I was having with the load() function in sequence, it seems that it ends up updating the page on the first call and when making the second call it goes and updates again undoing the first change.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.