2017-04-04 36 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