2017-01-11 1 views
0

Grailsフレームワークでjqueryとajaxを使用してコンテンツ登録ページをロードしようとしています。GrailsでAjaxを使用して負荷データを試しています

しかし、私はページをロードするときに期待される結果を表示しますが、ページのメニューと問題を登録するフィールドもページ内で繰り返されます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<html> 
<head> 
    <script src="/Escola/js/Aplicacao/Mensagens.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     function carregarMaterias() { 
      $.ajax({ 
       method: "POST", 
       url:"/Escola/Materia/gerenciar", 
       data: {}, 
       success: function (data) { 
        console.log(data) 
        $("#cadastrarMaterias").html(data) 
       } 
      }); 
     } 

    </script> 
         <title>Gerenciar Matérias</title> 

 <h2>Gerenciar Matérias</h2> 

    <div class="col-md-6 col-md-offset-3"> 

     <g:formRemote name="formMateria" url="[controller: 'Materia', action: 'salvarMateria']" 
         onSuccess="cadastarMaterias(data)"> 

      <div class="form-group"> 
       <label>Código da Matéria</label> 
       <input required class="form-control" type="text" name="codigoMateria"/> 
      </div> 

      <div class="form-group"> 
       <label>Matéria</label> 
       <input required class="form-control" type="text" name="nome"/> 
      </div> 


      <div class="text-left"> 
       <button type="submit" class="btn btn-primary btn-block">Salvar</button> 
      </div> 

      <script> 
       $('form').submit(function() { 
        this.reset(); 
       }) 
      </script> 
      <br/> 

      <div id="content"></div> 
     </g:formRemote> 

     <div class="text-center"> 
      <h2>Matérias</h2> 
     </div> 


      <div class="table-responsive" id="cadastrarMaterias"> 
       <table class="table"> 

        <thead> 
        <th>Código da Matéria</th> 
        <th>Nome da Matéria</th> 
        </thead> 

        <tbody> 

        <g:each in="${lista}" var="materia"> 
         <tr> 
          <td>${materia.codigoMateria}</td> 
          <td>${materia.nome}</td> 

         </tr> 
        </g:each> 
       </tbody> 
      </table> 
     </div> 
     </div> 
    </div> 
</section> 

だから、結果が、ページが二度同じ構造を繰り返し参照してください。

答えて

0

ビットにあなたが示されていないことをためです:あなたはすべての上に再びビューを胸が張り裂けるている

controller: Materia Action: salvarMateria

。このビューでは、メインテンプレート、したがってあなたの問題をレンダリングするメタタグが適用されます。 salvarMateriaアクションで代わりに

はこれを試してみてください。

if (request.xhr) { 
    render template:'page',model:model 
} else { 
    render view:'page',model:model 
} 

は今_page.gspを作成し、これは、あなたが少しでpage.gspと_page.gsp

を有する場合になりますないrequest.xhrそのように、すべての反復が_page.gspに起こり、それは、AJAXを経由して、同様かのように呼び出されます

をロードする場合、それはつまり、AJAXれていなかった場合、それは(あなたの実際の結果のための反復を行い、メインpage.gsp非アヤックスコンテンツはg:renderテンプレートによって駆動されます.. example hereがあります。

関連する問題