Grails remoteLink ajax 问题填充 JQuery 手风琴答案

【问题标题】：Grails remoteLink ajax issue populating JQuery accordionGrails remoteLink ajax 问题填充 JQuery 手风琴
【发布时间】：2012-12-31 18:27:19
【问题描述】：

按照 Jquery 中的简单示例：Accordion Example

使用来自 grails (AJAX) 的 remoteLink 函数，信息从控制器中拉回并发送回 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>

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

【问题讨论】：

标签： ajax jquery-ui grails grails-2.0

【解决方案1】：

尝试替换：

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

与

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

编辑：

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

【讨论】：

不幸的是，这不起作用，无论如何，谢谢。一定有更深层次的原因......
我已经改变了你所说的詹姆斯，我试图将 JS 和 CSS 包含在事件中 - GSP 并更改了
所以数据被渲染了，但它没有得到手风琴。你有没有检查你的 javascript 控制台是否有错误？
是的，我已经检查过了，它加载了 JS 得到 200 响应......我刚刚做了一个单独的测试，看看它是否会在不使用上面的 ajax 功能的情况下加载手风琴......它不会加载它，所以我将快速创建一个单独的项目，看看它是否存在冲突或导致其他问题。再次感谢詹姆斯的帮助
Screenshot with static test data。 @James 此处的屏幕截图在 _form.gsp 页面上填充了一些静态数据，并且工作正常。我不认为这是有效的，因为当脚本正在寻找那个 div 来设置手风琴表时，没有呈现 ID 为 <div id="accordion"> 的 div 你对此有什么想法吗？我已经完全没有东西可以尝试了

【解决方案2】：

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

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

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

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

【讨论】：