2017-04-04 37 views
0

我有一个页面可以维护几个列表:产品和优惠。 这两个列表都是在自己的模板中构建的。 首先,产品列表可以使用select进行过滤。当选择被改变时,产品列表被过滤并且模板被渲染。 当您点击产品列表中的某个点时,呈现商品列表。 现在,当页面首次更新时,当您首次进入页面或刷新页面时,您可以点击该产品并且更新优惠列表。 然后,如果您更改SELECT以便过滤产品列表,则无法再获取更新的商品列表,直到您首先刷新页面。Grails,JavaScript在渲染模板后不响应

这些脚本位于页面的标题,看起来像这样:

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

这里是页面的最重要的部分:

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

然后我们有两个模板: _AvailableProductData.gsp和_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> 

然后我们有控制器:

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

如果有人可以在我的代码中发现任何可能导致我的问题的故障,那会很好。

+0

这是一个很大的问题,你最好将一个完整的项目添加到github中,并在Bootstrap中添加所有相关的域类和一些数据。有一件事要注意的是,你可以简化你在listOffers中的角色检查,比如'SpringSecurityUtils.ifAnyGranted(ROLE_ADMIN)' –

+0

好吧,这里是一个关于github的测试项目。 https://github.com/larand54/TestX.git – larand

+0

在JS控制台中的任何错误? – injecteer

回答

1

我想我已经按照你的描述工作几个更改后的几个gsps。

_ListOffers.gsp

只需卸下封闭DIV <div id="offerList">,第一个和最后一行。

index.gsp中

的主要变化在这里都将<div id="offerList"></div>到身体的脚和不断变化如何通过点击.offers类呈现要约时的JavaScript的作品。我们现在正在使用,请参阅this question以获得一些很好的解释。我们必须使用它,因为我们在每次更改下拉列表后重新呈现产品列表。

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

非常感谢!真的有帮助! – larand