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

Question

我在Grails应用程序中使用了jQuery UI中的Tabs。
在不同的选项卡中，我想显示来自 Controller 的操作(因此，没有静态的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网站上有一个示例( http://jqueryui.com/demos/tabs/#ajax)，但在此示例中，它们仅加载静态html网站。

Answer 1

如果您希望在切换标签时动态加载标签内容，那么Grails方法看起来与jQuery-UI示例非常相似。只需用createLink()代替.php链接。另外，您还缺少JavaScript init函数的右括号和括号(尽管在复制/粘贴过程中可能刚刚丢失了它):

<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>