[英]Refresh g:each tag via AJAX call in Grails
I have a statistical panel which displays the last registered users. 我有一个统计面板,显示最近注册的用户。 I want to implement a AJAX call to upload the panel without having to reload the full page.
我想实现AJAX调用来上传面板,而不必重新加载整个页面。
I have the following code in my view : 我认为以下代码如下 :
<g:each in="${lastUsers}" var="user">
<div class="mt-comments">
<div class="mt-comment">
<div class="mt-comment-img">
<g:if test="${user?.avatar}">
<img src="${createLink(controller:'controllerUser',
action:'image', id: user?.id)}" />
</g:if>
<g:else>
<img class="img-circle"
src="${resource(dir: 'img/profile', file: 'user_profile.png')}"/>
</g:else>
</div>
<div class="mt-comment-body">
<div class="mt-comment-info">
<span class="mt-comment-author">${user?.username}</span>
<span class="mt-comment-date">
<g:formatDate date="${user?.dateCreated}"/>
</span>
</div>
<div class="mt-comment-text">${user?.email}</div>
<div class="mt-comment-details">
<g:if test="${user?.enabled}">
<span class="mt-comment-status label label-sm label-success circle">
</g:if>
<g:else>
<span class="mt-comment-status label label-sm label-info circle">
</g:else>
<g:formatBoolean boolean="${user?.enabled}"/>
</span>
<ul class="mt-comment-actions">
<li>
<g:link controller="user" action="edit" id="${user?.id}">Edit</g:link>
</li>
</ul>
</div>
</div>
</div>
</div>
</g:each>
Also, I have a button when it is clicked calls the AJAX function. 另外,单击时有一个按钮称为AJAX函数。 The Ajax function receives the data successful in JSON format.
Ajax函数成功以JSON格式接收数据。 From there, I don't know upload my g:each tag.
从那里,我不知道上传我的g:each标签。
I have tried the remoteFunction of Grails to use the upload attribute, but an error appears: No javascript provider is configured and I have searched the solution but anything works me. 我尝试了Grails的remoteFunction来使用upload属性,但是出现错误: 没有配置javascript提供程序,并且我已经搜索了解决方案,但是一切正常。
The AJAX call: AJAX调用:
$('.button').click(function() {
$.ajax({
url: URL,
success: function(data) {
console.log(data[index]);
console.log(val.username);
console.log(val.dateCreated);
console.log(val.email);
console.log(val.enabled);
console.log(val.avatar);
console.log(val.id);
},
error: function(){
},
});
Thanks for helping me. 谢谢你帮我
Instead of Using JSON Data, You can do this using grails templates and jQuery load method. 您可以使用grails模板和jQuery load方法来代替JSON数据。 Here is a quick POC.
这是一个快速的POC。
Template (_userComments.gsp) 模板 (_userComments.gsp)
This will act as a reusable view which can be called via AJAX or can be included directly in other views. 这将作为可重用的视图,可以通过AJAX调用或直接将其包含在其他视图中。
<g:each in="${lastUsers}" var="user">
<div class="mt-comments">
.....
</div>
</g:each>
View (main.gsp) 查看 (main.gsp)
Our Main View. 我们的主要观点。
<div class="userComments">
<!-- When the Page is Loaded, We need render this without an Ajax Call -->
<g:render template="userComments" model="['lastUsers':lastUsers]"/>
</div>
Javascript Java脚本
$('.button').click(function() {
$( ".userComments" ).load( "user/userComments" );
});
Controller 控制者
We are defining two methods one for the main view and one for the ajax call. 我们定义了两种方法,一种用于主视图,一种用于ajax调用。
def index() {
def lastUsers = User.list();
render(view:'main', model: [lastUsers: lastUsers])
}
// Ajax Call
def userComments() {
def lastUsers = User.list(); // what ever your fetch logic is
render(template:'userComments', model: [lastUsers: lastUsers])
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.