Grails，javascript don'；在呈现模板后不响应
我有一个页面可以维护两个列表：产品和优惠。 这两个列表都是在各自的模板中构建的。 首先，可以使用select来过滤产品列表。更改“选择”后，将过滤产品列表并呈现模板。 当您单击产品列表中的某个点时，将呈现报价列表。 现在，当页面第一次更新时，当您第一次进入页面或通过刷新时，您可以单击该产品，并更新报价列表。 然后，如果更改“选择”以过滤产品列表，则在您首先刷新页面之前，您将无法更新报价列表 脚本位于页面的标题处，如下所示：Grails，javascript don'；在呈现模板后不响应,javascript,jquery,grails,gsp,Javascript,Jquery,Grails,Gsp,我有一个页面可以维护两个列表：产品和优惠。 这两个列表都是在各自的模板中构建的。 首先，可以使用select来过滤产品列表。更改“选择”后，将过滤产品列表并呈现模板。 当您单击产品列表中的某个点时，将呈现报价列表。 现在，当页面第一次更新时，当您第一次进入页面或通过刷新时，您可以单击该产品，并更新报价列表。 然后，如果更改“选择”以过滤产品列表，则在您首先刷新页面之前，您将无法更新报价列表 脚本位于页面的标题处，如下所示： <script type="text/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>
//更新产品列表：
功能可用产品（）{
$.ajax({
url:“${g.createLink（控制器：'OrderSanStore'，操作：'availableProducts'）}”，
数据：[锯木厂]，
键入：“获取”
}).success（函数（数据）{$（'#divToUpdate'）.html（数据）；}）；
}
//更新优惠名单：
$（文档）.ready（函数（）{
$（'.offers'）。单击（函数（事件）{
$.ajax({
url:“${g.createLink（控制器：'OrderSanStore'，操作：'listOffers'）}”，
数据：{id:this.id}，
键入：“获取”
}).success（函数（数据）{$（'#offerList'）.html（数据）；}）；
});
});
<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>
${flash.message}
选择磨机：
<!-- _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>
${pb.id}
${pb.锯木厂}
${pb.product}
${pb.volumeAvailable}
${od.product？.encodeAsHTML（）}
${od.OFFEREHEADER.sawMill}
@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])
}
}
}
@Secured（['ROLE\u ADMIN'、'ROLE\u SALES'、'ROLE\u SUPPLIER']））
类命令控制器{
def springSecurityService
定义列表（最大整数）{
System.out.println（“控制器列表我想在对几个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>
只需删除封闭的div
，即第一行和最后一行
普惠制指数
这里的主要更改是将
添加到正文的底部，并通过单击.offers类来更改javascript在呈现报价时的工作方式。我们现在使用.on，以获得一些好的解释。我们必须使用它，因为我们在每次下拉更改后呈现产品列表
<!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…"/></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>
.报价{
颜色：#ff0000
}
功能可用产品（）{
$.ajax({
url:“${g.createLink（控制器：'product'，操作：'availableProducts'）}”，
数据：[供应商]，
键入：“获取”
}).success（函数（数据）{$（'#divToUpdate'）.html（数据）；}）；
}
$（文档）.ready（函数（）{
$（文档）.on（'click'，'offers'，函数（事件）{
$.ajax({
url:“${g.createLink（控制器：'product'，操作：'listOffers'）}”，
数据：{id:this.id}，
键入：“获取”
}).success（函数（数据）{$（'#offerList'）.html（数据）；}）；
});
});
${flash.message}
选择磨机：
这是一个大问题，您最好向github添加一个完整的项目，并在引导中添加所有相关的域类和一些数据。需要注意的是，您可以简化在列表中的角色检查，如SpringSecurityUtils.ifanygrated（角色\管理员）
好的，这是github上的一个测试项目。JS控制台中有错误吗？没有，控制台中没有任何错误，我不太擅长这个，但我很确定控制台是干净的。非常感谢！非常有用！