Jquery is returning Undefined to one of the generic properties I created

Asked

Viewed 115 times

1

Jquery is returning Undefined to one of the generic properties I created, to use with Bootgrid. I’m trying to load a modal according to the event click one of the buttons on the grid, but the modal opens without content. Jquery recognizes the data-action property="Details", but the data-Row-id="' + Row.id + '" property is returned as Undefined. If anyone can help me I’d appreciate it.

Jquery:

$(document).ready(configurarControles);

function configurarControles() {

        var traducao = {
            infos: "Exibindo {{ctx.start}} a {{ctx.end}} de {{ctx.total}} Projetos",
            loading: "Carregando...",
            noResults: "Nenhum projeto encontrado!",
            refresh: "Atualizar",
            search: "Pesquisa"
        };

        var grid = $("#gridProjetos").bootgrid(
        {
            ajax: true,
            url: "@Url.Action("Listar")",
            labels: traducao,
            searchSettings: {
                characters: 4
            },
            formatters: {
                "acoes": function(column, row) {
                    return '<a href="javascript:void(0)" class="btn btn-info" data-acao="Details" data-row-id="' + row.id + '"><span class="glyphicon glyphicon-list"></span></a> ' +
                        '<a href="javascript:void(0)" class="btn btn-warning" data-acao="Edit" data-row-id="' + row.id + '"><span class="glyphicon glyphicon-edit"></span></a> ' +
                        '<a href="javascript:void(0)" class="btn btn-danger" data-acao="Delete" data-row-id="' + row.id + '"><span class="glyphicon glyphicon-trash"></span></a>';
                }
            }
        });

        grid.on("loaded.rs.jquery.bootgrid", function () {

            grid.find("a.btn").each(function (index, elemento) {

                var botaoDeAcao = $(this);

                var acao = botaoDeAcao.data("acao");
                var idEntidade = botaoDeAcao.data("row-id");

                botaoDeAcao.on("click", function () {

                    alert(acao);
                    alert($(this).data("row-id"));
                    abrirModal(acao, idEntidade);
                });
            });
        });

Controller:

    [HttpPost]
    public JsonResult Listar(string searchPhrase, int current, int rowCount)
    {
        // Pega a chave com o campo a ser ordenado e a ordenação
        string chave = Request.Form.AllKeys.Where(c => c.StartsWith("sort")).First();

        string ordenacao = Request[chave];
        string campo = chave.Replace("sort[", string.Empty).Replace("]", string.Empty);

        // Cria uma lista de simples de projetos, com as propriedades das classes relacionadas, 
        // para evitar problemas com o Bootgrid.
        var projetos = db.Projetos.Select(p => new { ProjetoId = p.ProjetoId, Tema = p.Tema, Resumo = p.Resumo, Autor = p.Autor,
                                                    Telefone = p.Telefone, AreaId = p.AreaId, NomeArea = p.Area.NomeArea,
                                                    SubAreaId = p.SubAreaId, NomeSubArea = p.SubArea.NomeSubArea });

        int total = projetos.Count();

        //Efetua a pesquisa dinâmica em todos os campos da lista, através do parâmetro "searchPhrase", passado pelo Boosgrid.
        if (!string.IsNullOrWhiteSpace(searchPhrase))
        {
            projetos = projetos.Where("NomeArea.Contains(@0) OR NomeSubArea.Contains(@0) OR Tema.Contains(@0)OR Autor.Contains(@0)", searchPhrase);
        }

        // Formatando a string para a expressão lambda
        string campoOrdenacao = string.Format("{0} {1}", campo, ordenacao);

        var projetosPaginados = projetos.OrderBy(campoOrdenacao).Skip((current - 1) * rowCount).Take(rowCount);

        return Json(new
        {
            rows = projetosPaginados.ToList(),
            current = current,
            rowCount = rowCount,
            total = total
        }, JsonRequestBehavior.AllowGet);
    }

1 answer

0

I have a Model that I use here to display alert for the user to confirm, maybe help you... Here would be the button code:

<a class="btn ativa botaoicone2" data-target="#modal" data-toggle="modal" data-content="@item.Descricao" data-id="@item.ChamadaID" data-regresso="@item.Duracao" style="background:url(@Url.Content("~/content/images/Ativar.png")) no-repeat;"></a>

Javascript

<script>
        $(function () {
            $(".ativa").click(function () {
                var id = $(this).attr("data-id");
                var descricao = $(this).attr("data-content");
                $("#mensagem").html("<p>Deseja ativar " + descricao + "?</p>");
                $("#numero").text(id);
            });
            $("#btnDelete").click(function () {
                var id = $("#numero").text();
                var url = '@Url.Action("AtivaAjax", "Chamada")';
                $.post(url, { chamadaId: id },
                function (data) {
                    window.location.href = "@Url.Action("Index", "Chamada")";
                })
                .fail(function () {
                    alert("error")
                });
                //$("#modal").fadeOut("slow", function () {
                // // Animation complete.
                //});
                $('#modal').modal('hide');
            });
        })
    </script>

Modal:

@*PopUp Modal Ativa*@
@*PopUp Modal*@
<div id="modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Ativar Chamada</h4>
            </div>
            <div class="modal-body">
                <div id="mensagem"></div>
                <input type="hidden" id="numero" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                    Cancelar
                </button>
                <button type="button" class="btn btn-primary" id="btnDelete">Ativar</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@*Script*@

Browser other questions tagged

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