如果在ajax加载的模板中调用，Ajax无法正常工作吗？

Question

I'm using ajax to change the value of an object (status), when the ajax is called, the object is changed but the page is reloaded. here's my template:

    <table id="datatable" class="tabela">
        <thead>
            <tr>
                <th>RA</th>                   
                <th>Ações</th>                 
            </tr>
        </thead>
        <tbody>
            <g:each var="aluno" in="${listaAluno}">
                <tr>
                    <td>${aluno.ra}</td>
                    <td>
                        <g:link action="editar" controller="aluno" params="[id:aluno.id]"> <i class="fa fa-pencil button edit"></i></g:link>&nbsp&nbsp&nbsp                        
                        <g:link onClick="inativar('/aluno/inativar/${aluno.id}', 'divForm', '${aluno.nome}')"> <i class="fa fa-trash button delete"></i></g:link>
                    </td>
                </tr>
            </g:each>
        </tbody>
    </table>
    <script type="text/javascript">
        $(document).ready(function () {
        $('#datatable').dataTable({colReorder: true});
        });
    </script>

the ajax:

function inativar(metodo, div, objeto) {
    var confirmar = confirm("Realmente deseja remover " + objeto + " ?");    
    if (confirmar) {            
        $.ajax({
            url: metodo,
            type: "GET",            
            dataType: 'text',
            success: function (data) {
                $("#" + div).html(data);
            }
        });
    }
}

and the method:

def inativar(){ 
        Aluno aluno = Aluno.get(params.id)
        aluno.status = false
        aluno.save(flush: true)
        def listaAluno = Aluno.findAllByStatus(true)        
        render(template:"list", model:[listaAluno:listaAluno])
    }

what am I missing?

Answer 1

Try below code instead of <g:link onClick="inativar('/aluno/inativar/${aluno.id}', 'divForm', '${aluno.nome}')"> <i class="fa fa-trash button delete"></i></g:link> inline onClick JS function calling as inline onClick calling looks function definition in global scope.

<g:link class="inativar"><i class="fa fa-trash button delete"></i></g:link>

JS Code:

<script type="text/javascript">
        var alunoId='${aluno.id}';
        var metodo='/aluno/inativar/'+alunoId;
        var divId='divForm';
        var alunoNome='${aluno.nome}';

        $(document).ready(function () {
            $('#datatable').dataTable({colReorder: true});
            //Call inativar on click
            $('.inativar').click(function(){
               inativar(metodo,divId,alunoNome);

            });
        });

        function inativar(metodo, div, objeto) {
            var confirmar = confirm("Realmente deseja remover " + objeto + " ?");    
            if (confirmar) {            
            $.ajax({
              url: metodo,
              type: "GET",            
              dataType: 'text',
              success: function (data) {
              $("#" + div).html(data);
            }
        });
    }
}
</script>