0

遵循 Jquery 中的简单示例：手风琴示例

使用remoteLink来自 grails ( AJAX ) 的函数，信息从控制器中拉回并发送回 GSP，这工作正常。但是，我确实希望将这些数据放置在 Accordion 容器中...单击此处查看当前功能的屏幕截图。

（事件创建页面渲染表单模板）_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>

不太确定我在这里做错了什么，因为我正在用带有 id 手风琴的 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>
4

2 回答 2

0

尝试更换：

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

和

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

编辑：

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

于 2013-01-01T03:58:27.210 回答
0

我解决了这个问题......（好吧，Hack & Slash 现在......不是最好的，但目前唯一可行的解​​决方案）

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

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

$('#accordion').append(whatever)
         .accordion('destroy').accordion({
             collapsible: true,
             active: false
        });
于 2013-01-02T17:42:30.343 回答