![](/img/trans.png)
[英]Dropdown bootstrap after <g:remotelink> / Ajax call in Grails
[英]Refresh g:each tag via AJAX call in Grails
我有一個統計面板,顯示最近注冊的用戶。 我想實現AJAX調用來上傳面板,而不必重新加載整個頁面。
我認為以下代碼如下 :
<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>
另外,單擊時有一個按鈕稱為AJAX函數。 Ajax函數成功以JSON格式接收數據。 從那里,我不知道上傳我的g:each標簽。
我嘗試了Grails的remoteFunction來使用upload屬性,但是出現錯誤: 沒有配置javascript提供程序,並且我已經搜索了解決方案,但是一切正常。
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(){
},
});
謝謝你幫我
您可以使用grails模板和jQuery load方法來代替JSON數據。 這是一個快速的POC。
模板 (_userComments.gsp)
這將作為可重用的視圖,可以通過AJAX調用或直接將其包含在其他視圖中。
<g:each in="${lastUsers}" var="user">
<div class="mt-comments">
.....
</div>
</g:each>
查看 (main.gsp)
我們的主要觀點。
<div class="userComments">
<!-- When the Page is Loaded, We need render this without an Ajax Call -->
<g:render template="userComments" model="['lastUsers':lastUsers]"/>
</div>
Java腳本
$('.button').click(function() {
$( ".userComments" ).load( "user/userComments" );
});
控制者
我們定義了兩種方法,一種用於主視圖,一種用於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.