2016-10-23 10 views
0

私はajaxを使用してオブジェクト(ステータス)の値を変更していますが、ajaxが呼び出されると、オブジェクトは変更されますが、ページは再ロードされます。 は、ここに私のテンプレートです:ajaxがロードされたテンプレート内で呼び出された場合、Ajaxは機能しませんか?

<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> 

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); 
      } 
     }); 
    } 
} 

と方法:

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]) 
    } 

は私が何をしないのですか?

答えて

0

<g:link onClick="inativar('/aluno/inativar/${aluno.id}', 'divForm', '${aluno.nome}')"> <i class="fa fa-trash button delete"></i></g:link>の代わりに以下のコードを試してください。onClick onClick JS関数は、グローバルスコープ内でインラインonClick呼び出し呼び出しルックスの関数定義として呼び出します。

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

JSコード:

<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> 
+0

は、それを試してみました。このエラーを得た:エラー評価される式[aluno.id]行の[30]:nullオブジェクトにプロパティ 'ID' を取得できません。そして、それは非常に良い選択肢ではありません。なぜなら、多くのページでそのajaxを使用するつもりです。 – xSlok

+1

aluno.idがnullの場合、JSエラーではありません。最初に、このIDをオブジェクトをレンダリングする前に設定します。また、jquery $(document).ready(function(){});ページの読み込みに負荷がかかる。 –

+0

このメソッドは正しく動作し、オブジェクトは変更されますが、問題はページがその後に再読み込みされることです。 – xSlok

関連する問題