Question

遵循Jquery的简单示例：Accordion Example

使用grails中的remoteLink函数（ AJAX ），信息将从控制器中拉回并发送回GSP，这样可以正常工作。但我希望将这些数据放在Accordion容器中...点击此处查看当前功能的screenshot。

（事件创建页面呈现表单模板）_form - GSP：

<g:remoteLink controller="event"  action="showContacts" method="GET" update="divContactList">Show Contacts!</g:remoteLink>

<div id="divContactList">
     <g:render template="contactListAjax" model="[contactList: contactList]" />
</div>

<script type="text/javascript">
$(document).ready(function()
{
    alert("Checking if I'm ready :)");

    $( "#accordion" ).accordion({
        header: 'h3',
        collapsible: true
    });
});
</script>

_contactListAjax - GSP模板

<div id="accordion">
<g:each in="${contactList}" status = "i" var="contact">
    <h3>${contact.contactForename}</h3>
    <div><p>${contact.email}</p></div>
</g:each>
</div>

我不太确定我在这里做错了什么，因为我用div手风琴包装数据，但是没有加载。请参阅上面的屏幕截图链接，了解当前正在发生的事情。

更新

事件（标准生成的CRUD，仅显示重定位导入的位置）创建 - GSP

<link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.ui.accordion.css')}"/>
<g:javascript src="jquery-1.7.1.min.js"></g:javascript>
<g:javascript src="jquery-ui.min.js"></g:javascript>

Answer 1

尝试更换：

$(function() {
    $( "#accordion" ).accordion({
        collapsible: true
    });
})

与

$( "#accordion" ).accordion({
    collapsible: true
});

编辑：

请求完成后，您无法使用<r:script />标记。服务器已经布置了所有资源。将其更改为标准的javascript标记。此外，您的javascript和css文件应该包含在页面的其他位置。

Answer 2

我解决了这个问题......（井哈克＆Slash现在......不是最好的，但现在唯一可行的解决方案）

var whatever是由AJAX生成的存储HTML，并放置在divContactList上的update function中。手风琴被删除然后重建（不是我意识到的最佳方法）

var whatever = $('#divContactList').html();

$('#accordion').append(whatever)
         .accordion('destroy').accordion({
             collapsible: true,
             active: false
        });

Grails remoteLink ajax问题填充JQuery手风琴

2 个答案: