Action Result within a div from ajax call

Question

I need a view to be shown within a div in my DOM..This view is triggered only if a button is pressed. I'm failing to achieve this and I do not understand why. I searched for some other topics and used this as my reference to build my own .

DIV

<div id="ViewDetalhes" class="col-md-10 modal-content" style="margin-left: 2%;">
<a href="#" data-window="#ViewDetalhes-Close" class="bt-fechar"><span class="glyphicon glyphicon-remove"></span></a>
<h4 class="titulo">Histórico do usuário</h4>
<div class="col-md-12">
    <div style="margin: 0;padding: 1% 0;width: 100%;text-align:center;">
        <span class="fa fa-spinner fa-spin fa-3x text-primary" style="color:red;"></span>
    </div>
</div>
<h4 class="titulo">&nbsp;</h4>
<button type="button" class="btn btn-default btn-xs pull-right" data-window="#ViewDetalhes-Close"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Fechar</button>

Button

<td class="text-center"><a id="Historico" href="/Relatorios/GetHistoricoUsuarios/?UsID=@item.UsuarioID" data-window="#ViewDetalhes-Open"  class="bt-acao" title='Histórico'><span class="glyphicon glyphicon-user"></span></a></td>

Jquery and Ajax

$("#Historico,#ViewDetalhes > a.bt-fechar, #ViewDetalhes > button").on(
    "click",
    function () {
        var modo = $(this).data('window').split("-")[1];
        var window = $(this).data('window').split("-")[0];
        function onManutencaoAcao() {};
        $('.w3-modal').css("zIndex", 3);
        Window.Modal(modo, window, onManutencaoAcao);
        return false;           
    }    
);


$("#ViewDetalhes > div").on("click",
    function ExibirHistorico() {
    $.ajax(
        {
            type: 'POST',
            //url: @Url.Action("GetHistoricoUsuarios", "Relatorios"),
            url: '/Relatorios/GetHistoricoUsuarios',
            dataType: 'html',               
            success: function (data) {
                $('#ViewDetalhes').html(data);
               //$('#ViewDetalhes > div').html(data);
            }
        });
    });

Action Result

public ActionResult GetHistoricoUsuarios(int? pagina = 1, string PDF = "N", int EmID = 0, int FiID = 0, int UsID = 0, string Usuario = "", string Telefone = "", string Procedencia = "", string Exclusor = "")
    {

        string Area = Session["Area"].ToString();
        int UserID = Convert.ToInt32(Session["UserID"]);
        int EmpresaID = Convert.ToInt32(Session["EmpresaID"]);
        int FilialID = Convert.ToInt32(Session["FilialID"]);
        int ConsultorID = Convert.ToInt32(Session["ConsultorID"]);
        int referenciaID = PageList.GetReferenciaID(Area, FilialID, EmpresaID, ConsultorID, 0);
        referenciaID = (Area == "CRE") ? ConsultorID : referenciaID;
        referenciaID = (Area == "MAS") ? UserID : referenciaID;

        EmID = (EmID == 0) ? EmpresaID : EmID;
        FiID = (FiID == 0) ? FilialID : FiID;

        ViewBag.EmID = EmID;
        ViewBag.FiID = FiID;
        ViewBag.UsID = UsID;
        ViewBag.Usuario = Usuario;
        ViewBag.Telefone = Telefone;
        ViewBag.Procedencia = Procedencia;
        ViewBag.Exclusor = Exclusor;

        //Definindo a paginação              
        int paginaQdteRegistros = (Session["RegistrosPorPagina"] == null) ? 10 : Convert.ToInt32(Session["RegistrosPorPagina"]);
        int paginaNumeroNavegacao = (pagina ?? 1);

        List<ViewModelHistoricoUsuarios> Relatorio = Relatorios.HistoricoUsuarios(EmID, FiID, UsID, Usuario, Procedencia, Exclusor);
        return View(Relatorio.ToPagedList(paginaNumeroNavegacao, 6));

    }

I'm getting this result, the view should be loaded there instead of this red spin. I feel this is very simple, yet I can't understand.

Open your dev tools console tab and see whether you are getting any errors. Also check whether the network call (ajax call) is made and the response is expected (200OK) — Shyju, Aug 19 '19 at 20:40
As you suggested, I checked the console and I do not have any errors, whereas in the network call I realized that it is not being called. Do you have any clue why? — Rezik, Aug 20 '19 at 11:50
If i pass the URL like this url: @Url.Action("GetHistoricoUsuarios", "Relatorios") it will call the ajax in the network , but it opens the view in a new page. — Rezik, Aug 20 '19 at 12:01

score 0 · Answer 1 · answered Aug 20 '19 at 13:57

I changed my ajax to this and it worked.

$("#Historico").on("click", function () {
    var URLAjax = this.href;
    alert(URLAjax);
    function onManutencaoAcao() {};
    $('.w3-modal').css("zIndex", 3);
    Window.Modal("Open", "#ViewDetalhes", onManutencaoAcao);

    $.ajax( {
        type: 'GET',
        url: URLAjax,              
        dataType: 'html',
        beforeSend: function () {
            var html = '<div style="margin: 0;padding: 1% 0;width: 100%;text-align:center;">' + 
                '<span class="fa fa-spinner fa-spin fa-3x text-primary" style="color:red;"></span>' + 
            '</div>';
            $('#ViewDetalhes > div').html(html);
        },
        success: function (html) {
            $('#ViewDetalhes > div').html(html);
        }
    });
    return false;
});

Action Result within a div from ajax call

1 Answers1