通过AJAX在jQuery-Tabs中加载grails操作

Question

我在我的jQuery应用程序中使用Grails UI中的Tabs。

在不同的选项卡中，我希望显示来自控制器的操作(这样就没有静态的html站点之类的)。

<script>
    $(function() {$("#tabs").tabs()
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <g:include controller="controller1" action="action1" />
    </div>
    <div id="tabs-2">
        <g:include controller="controller2" action="action2" />
    </div>
</div>

是否可以通过AJAX加载这些操作或gsp站点？

在jQuery-Website (http://jqueryui.com/demos/tabs/#ajax)上有一个例子，但是在这个例子中他们只加载了一个静态的html站点。

Answer 1

如果希望在切换选项卡时动态加载选项卡内容，Grails方法看起来与jQuery-UI示例非常相似。只需用createLink()代替.php链接即可。此外，您的JavaScript初始化函数中缺少右大括号& paren (尽管这可能在复制/粘贴过程中丢失)：

<script>
    $(function() { $("#tabs").tabs() });
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="${createLink(controller: 'controller2', action: 'action2')}">Tab 2</a></li>
        <li><a href="${createLink(controller: 'controller3', action: 'action3')}">Tab 3</a></li>
    </ul>
    <!-- Render content for first tab on initial page load, could also do this via jQuery -->
    <div id="tabs-1">
        <g:include controller="controller1" action="action1" />
    </div>
    <!-- divs for other tabs' content will be created automatically -->
</div>

Answer 2

是的，这是可能的。您还没有提到什么事件将触发加载内容的AJAX请求。例如，如果内容是在用户单击链接时加载的，您可以通过替换以下内容来实现此目的：

<div id="tabs-1">
    <g:include controller="controller1" action="action1" />
</div>

有了这个：

<div id="tabs-1">
    <g:remoteLink controller="controller1" action="action1" update="tabs-1">click to load</g:remoteLink>
</div>

如果是其他事件，那么您可能希望使用g.remoteFunction。

Answer 3

<script>
    $(function() {
         $("#tabs").tabs()
         jQuery("a[href=#tabs-2]").click(function() {
                ${remoteFunction(action: 'test1',update: [success: 'tabs-2'])}
         });
         jQuery("a[href=#tabs-1]").click(function() {
                ${remoteFunction(action: 'test2',update: [success: 'tabs-1'])}
         });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
    </div>
    <div id="tabs-2">
    </div>
</div>