0

Jquery の簡単な例に従ってください:アコーディオンの例

remoteLinkgrails ( AJAX ) の関数を使用して、情報がコントローラーから引き戻され、正常に動作する GSP に送り返されます。ただし、このデータをアコーディオン コンテナ内に配置したいのですが、現在の機能のスクリーンショットについては、ここをクリックしてください。

(イベント作成ページ レンダリング フォーム テンプレート) _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、relivant インポートの場所のみを表示) 作成 - 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

私はこれを解決しました...（まあ、今のところハック＆スラッシュ...最善ではありませんが、今のところ実行可能なソリューションのみです）

var whateverdivContactListは、AJAX によって生成され、 のに配置された、格納された HTMLupdate functionです。アコーディオンは削除されてから再構築されます（私が認識する最良のアプローチではありません）

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

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

置き換えてみてください：

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

と

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

編集：

<r:script />リクエストが終了した後は、タグを使用できません。サーバーはすでにすべてのリソースを配置しています。標準の JavaScript タグに変更します。また、javascript および css ファイルをページの別の場所に含める必要があります。

于 2013-01-01T03:58:27.210 に答える