个人中心
gpt4 book ai didi

javascript - Grails、javascript 渲染模板后不响应

转载 作者：行者123 更新时间：2023-12-03 04:38:02 25 4
gpt4 key购买 nike

我有一个页面，其中维护几个列表:产品和优惠。这两个列表都是在自己的模板中构建的。首先，可以使用选择来过滤产品列表。当选择更改时，产品列表将被过滤并呈现模板。当您单击产品列表中的某个点时，将呈现报价列表。现在，当页面第一次更新时，当您第一次进入页面或通过刷新时，您可以点击产品，报价列表将被更新。然后，如果您更改 SELECT 以使产品列表被过滤，那么您将无法再更新商品列表，除非您先刷新页面。

脚本位于页面标题，如下所示:

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

然后我们就有了 Controller :

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

如果有人能在这里找到我的代码中可能导致我的问题的任何故障，那就太好了。

最佳答案

我想在对几个 gsp 进行一些更改后，我可以按照您的描述工作了。

_ListOffers.gsp

只需删除封闭的 div <div id="offerList"> ，第一行和最后一行。

索引.gsp

此处的主要更改是添加 <div id="offerList"></div>到正文的底部，并通过单击 .offers 类来更改 javascript 在呈现报价时的工作方式。我们现在使用 .on see 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>

关于javascript - Grails、javascript 渲染模板后不响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43205900/

25 4 0
文章推荐： javascript - 点击按钮时，knockout.js 在 vi​​ewmodel2 中从 viewmodel1 进行更改
文章推荐： language-agnostic - 什么是不变量？
文章推荐： angularjs - ng-model、ng-repeat 和输入方面的困难
文章推荐： javascript - 如何在 webix 应用程序中读取和查看光盘文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com