Re: Paginação e exclusão de registros com ajax e json

[Fagner Valente]

Régis, pelo que entendi você quer uma sugestão de fazer a mesma coisa, que no caso é a vinculação dinâmica do evento click ao link, certo?

Então, uma outra opção é utilizar o método "$('seletor').live('evento',function()); que vincula um evento aos elementos selecionados tanto que ja estão renderizados quanto os que virão a ser adicionados posteriormente.

Também é uma opção deixar a vinculação dentro de sua função populateGrid(data) e efetuar a requisição e a chamar ao carregar a página, concentrando assim os códigos dentro desta função.


Em quarta-feira, 31 de outubro de 2012 16h27min15s UTC-2, Régis Soares escreveu:

Oi,

Tenho uma página web dinâmica que, na primeira requisição, renderiza uma tabela com uma fração de um conjunto de registros, e opções de links para as próximas frações deste conjunto (ex.: páginas: 1 2 3 etc.) e para a exclusão de um registro. A listagem a seguir apresenta um trecho do código renderizado.

[code]

<table id="grid">

    ...

        <td>

            <a data-id="21" href="/Customer/Delete/21" class="deleteLink">Delete</a>

        </td>

    ...

</table>

[/code]

O vínculo ao evento click do link de exclusão de um registro é feito da seguinte forma:

[code]

    $(function () {

        $(".deleteLink").click(deleteRecord);

    });

    function deleteRecord(event) {

        ...

    }

[/code]

Porém, ao navegar para a próxima fração do conjunto de registros, uma requisição ajax que devolve um objeto json, o vínculo do evento click do link de exclusão (acima) é perdido.

Para resolver isso, vinculei o método deleteRecord ao evento click do elemento 'a' que crio dinamicamente com javascript da seguinte forma:

[code]

    function populateGrid(data) {

        var table = $("#grid");

        ...

        $(data).each(function () {

            ...

            td = document.createElement("td");

            ...

            var a = document.createElement("a");

            a.href = "/Customer/Delete/" + this.CustomerID.toString();

            a["class"] = "deleteLink";

            a["data-id"] = this.CustomerID.toString();

            $(a).bind('click', deleteRecord);

            $(a).appendTo(td).html("Delete");

        });

    }

[/code]

Alguém tem uma sugestão mais elegante para essa questão? Seja para melhorar a forma de obter as demais frações dos registros ou não ter de vincular deleteRecord em dois momentos.

A propósito, será que já é possível usar o jquery template em produção de forma segura? Vi que o novo email da Microsoft (outlook.com) usa algo parecido.

Abraços,

Régis