2017-04-04 1 views
0

J'ai une page qui maintient une couple de listes: produits et offres. Les deux listes sont construites dans leurs propres modèles. Tout d'abord, la liste de produits peut être filtrée à l'aide d'un select. Lorsque la sélection est modifiée, la liste de produits est filtrée et le modèle est rendu. La liste des offres est rendue lorsque vous cliquez sur un certain point dans la liste des produits. Maintenant, lors de la première mise à jour de la page, lorsque vous entrez pour la première fois dans la page ou par actualisation, vous pouvez cliquer sur le produit et la liste des offres sera mise à jour. Ensuite, si vous modifiez SELECT pour que la liste de produits soit filtrée, vous ne pourrez plus mettre à jour la liste d'offres tant que vous n'aurez pas actualisé la page en premier.Grails, javascript ne répond pas après le rendu d'un modèle

Les scripts sont situés à l'en-tête de la page et ressemble à ceci:

<script type="text/javascript"> 

// Update product list: 
    function availableProducts(){ 
    $.ajax({ 
      url:'${g.createLink(controller:'ordersAndStore', action:'availableProducts')}', 
      data: [sawMill], 
      type: 'get' 
     }).success(function (data) { $('#divToUpdate').html(data); }); 
    } 

// Updates offer list: 
    $(document).ready(function() { 
     $('.offers').click(function (event){ 
      $.ajax({ 
       url: '${g.createLink(controller:'ordersAndStore', action:'listOffers')}', 
       data: {id:this.id}, 
       type: 'get' 
      }).success(function (data) { $('#offerList').html(data);  }); 
     }); 
    }); 

</script>  

Voici la partie la plus importante de la page:

<body> 
    <g:render template="/menue"/> 
    <g:set var="entityName" value='Product' /> 
    <div id="scroll1 class scrolls"> 
     <div id="list-prodBuffer" class="content scaffold-list" role="main"> 
      <h1><g:message code="default.list.label" args="[entityName]" /></h1> 
      <g:if test="${flash.message}"> 
       <div class="message" role="status">${flash.message}</div> 
      </g:if> 
      <g:form action="createOffer"> 
       <div id="selectMill"> 
        Select mill: 
         <g:select name="sawMill" from="${millList}" value="" onchange="availableProducts(sawMill)" noSelection = "${['':'All']}" /> 
       </div> 
       <g:render template="AvailableProductData" model="[prodBuffer:prodBuffer]"/> 
      </g:form> 
     </div> 
    </div> 

    <g:render template="ListOffers" model="[offerDetails:offerDetails]"/> 

</body> 

Ensuite, nous avons les deux modèles: _AvailableProductData.gsp et _ListOffers.gsp

<!-- _AvailableProductData --> 
<div id="divToUpdate"> 
    <table> 
     <thead> 
      <tr> 
       <g:sortableColumn property="Id" title='Id' /> 
       <g:sortableColumn property="sawMill" title='Mill' /> 
       <g:sortableColumn property="product" title='Product' /> 
       <g:sortableColumn property="volumeAvailable" title='Avail' /> 
      </tr> 
     </thead> 
     <tbody> 

      <g:each in="${prodBuffer}" status="i" var="pb"> 
       <tr class="${ (i % 2) == 0 ? 'even': 'odd'}"> 
        <td><g:link action="edit_prodbuffer" id="${pb.id}">${pb.id}</g:link></td> 
        <td>${pb.sawMill}</td> 
        <td>${pb.product}</td> 
        <td>${pb.volumeAvailable}</td> 
       </tr> 
      </g:each> 

     </tbody> 
    </table> 
</div> 

<!-- _ListOffers --> 
<div id="offerList"> 
    <g:if test = "${offerDetails != null}"> 
     <g:set var="entityName" value='Offer' /> 
     <div id="list-offers" class="content scaffold-list" role="main"> 
      <h1><g:message code="default.list.label" args="[entityName]" /></h1> 
      <table style="width:100%"> 
       <thead> 
        <tr> 
         <g:sortableColumn property="product" title='Product' /> 
         <g:sortableColumn property="sawMill" title='Sawmill' /> 
        </tr> 
       </thead> 
       <tbody> 
        <g:each in="${offerDetails}" status="i" var="od"> 
         <tr class="${ (i % 2) == 0 ? 'even': 'odd'}"> 
          <td><g:link class="edit" action="edit" resource="offerDetail" id="${od?.id}"> ${od.product?.encodeAsHTML()}</g:link></td> 
          <td>${od.offerHeader.sawMill} 
         </tr> 
        </g:each> 
       </tbody> 
      </table> 
     </div> 
    </g:if> 
</div> 

Ensuite, nous avons le contrôleur:

@Secured(['ROLE_ADMIN','ROLE_SALES', 'ROLE_SUPPLIER']) 
class OrdersAndStoreController { 
    def springSecurityService 
    def list(Integer max) { 

     System.out.println("Controller List <<<<<<<<") 

     def orders = Orders.list() 
     def offerDetails = null//OfferDetail.list() 

     def List<String> millList = getMills() 
     [orders: orders, prodBuffer: getBufferList(), offerDetails: offerDetails, millList: millList, selectedMill:false] 
    } 

    def availableProducts() { 

     System.out.println(params) 

     def List<ProdBuffer> prodBuffer = getBufferList() 
     render(template:"AvailableProductData", model:[prodBuffer: prodBuffer]) 
    } 

    def listOffers(){ 
     System.out.println("#--#"+params) 

     def User user 
     user = springSecurityService.isLoggedIn() ? springSecurityService.getCurrentUser() : null 
     def us = user.getUserSettings() 
     def roles = springSecurityService.getPrincipal().getAuthorities() 
     for(def role in roles){ if((role.getAuthority() == "ROLE_ADMIN") || (role.getAuthority() == "ROLE_SALES")){ 
       def List<OfferDetail> offerDetails = getOfferList() 
       System.out.println("OfferDetail filtered count: "+offerDetails.count) 
       def orders = Orders.list() 
       render(template:"ListOffers", model:[offerDetails: offerDetails]) 
      } 
     } 
    } 

Serait bien si quelqu'un pouvait trouver un problème dans mon code ici qui pourrait causer mon problème.

+0

Ceci est une grande question, vous feriez mieux d'ajouter un projet complet à github avec toutes les classes de domaine pertinentes et certaines données ajoutées dans Bootstrap. Une chose à noter est que vous pouvez simplifier votre vérification de rôle dans listOffers comme 'SpringSecurityUtils.ifAnyGranted (ROLE_ADMIN)' –

+0

Ok, voici un projet de test sur github. https://github.com/larand54/TestX.git – larand

+0

des erreurs dans la console JS? – injecteer

Répondre

1

Je pense que je l'ai fonctionné selon votre description après quelques changements à un couple de GSP.

_ListOffers.gsp

enlèverait juste le englobante div <div id="offerList">, la première et la dernière ligne.

index.gsp

Les principaux changements ici sont en ajoutant <div id="offerList"></div> au pied du corps et changer la façon dont les travaux javascript lors du rendu une offre en cliquant sur la classe .offers. Nous utilisons maintenant .on voir this question pour quelques bonnes explications. Nous devons l'utiliser parce que nous sommes en train de rendre la liste des produits après chaque changement de liste déroulante.

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="layout" content="main" /> 
    <g:set var="entityName" value="${message(code: 'product.label', default: 'Product')}" /> 
    <title><g:message code="default.list.label" args="[entityName]" /> </title> 

<style> 
    .offers { 
    color: #ff0000 
    } 
</style> 
<script type="text/javascript"> 
    function availableProducts(){ 
     $.ajax({ 
      url:'${g.createLink(controller:'product', action:'availableProducts')}', 
       data: [supplier], 
       type: 'get' 
     }).success(function (data) { $('#divToUpdate').html(data); }); 
    } 


    $(document).ready(function() { 
     $(document).on('click', '.offers', function(event){ 
      $.ajax({ 
       url: '${g.createLink(controller:'product', action:'listOffers')}', 
        data: {id:this.id}, 
        type: 'get' 
      }).success(function (data) { $('#offerList').html(data);  }); 
     }); 
    }); 

</script>  
</head> 
<body> 
<a href="#list-product" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a> 
<div class="nav" role="navigation"> 
    <ul> 
     <li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li> 
     <li><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></li> 
     </ul> 
    </div> 
    <div id="list-product" class="content scaffold-list" role="main"> 
     <h1><g:message code="default.list.label" args="[entityName]" /></h1> 
    <g:if test="${flash.message}"> 
     <div class="message" role="status">${flash.message}</div> 
    </g:if> 
    <div id="selectMill"> 
     Select mill: 
     <g:select name="supplier" from="${millList}" value="" onchange="availableProducts(supplier)" noSelection = "${['':'All']}" /> 
    </div> 

    <g:render template="AvailableProductData" model="[product:product]"/> 
    <div class="pagination"> 
     <g:paginate total="${productCount ?: 0}" /> 
    </div> 


     <div id="offerList"></div> 
</div> 
</body> 
</html> 
+0

Merci beaucoup! Très utile! – larand