通过AJAX在jQuery选项卡中加载grails操作

我在Grails应用程序中使用jqueryui中的选项卡
在不同的选项卡中，我想显示来自控制器的操作（因此没有静态html站点等等）

$（function（）{$（“#tabs”）.tabs（）

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

---

jQuery网站（）上有一个例子，但在这个例子中，他们只加载一个静态html网站。

是的，这是可能的。您没有提到什么事件会触发加载内容的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>

单击以加载

---

如果是其他事件，则您可能希望改用它。

是的，这是可能的。您没有提到哪个事件将触发加载内容的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>

单击以加载

---

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

如果您希望在切换选项卡时动态加载选项卡内容，Grails方法看起来与jQuery UI示例非常相似。只需替换

createLink（）

用于.php链接。此外，您的JavaScript init函数缺少一个右大括号和括号（尽管这可能在复制/粘贴过程中丢失）：

$（function（）{$（“#tabs”）.tabs（）}）；

如果您希望在切换选项卡时动态加载选项卡内容，Grails方法看起来与jQuery UI示例非常相似。只需将.php链接替换为

createLink（）

。此外，您的JavaScript init函数中缺少一个右大括号&paren（尽管这可能在复制/粘贴过程中丢失）：

$（function（）{$（“#tabs”）.tabs（）}）；

$（函数（）{
$（“#制表符”）.tabs（）
jQuery（“a[href=#tabs-2]”。单击（函数（）{
${remoteFunction（操作：'test1'，更新：[success:'tabs-2']）}
});
jQuery（“a[href=#tabs-1]”。单击（函数（）{
${remoteFunction（操作：'test2'，更新：[success:'tabs-1']）}
});

$（函数（）{
$（“#制表符”）.tabs（）
jQuery（“a[href=#tabs-2]”。单击（函数（）{
${remoteFunction（操作：'test1'，更新：[success:'tabs-2']）}
});
jQuery（“a[href=#tabs-1]”。单击（函数（）{
${remoteFunction（操作：'test2'，更新：[success:'tabs-1']）}
});

谢谢！它也适用于：

接触点主机

但我想，这与createLink（）的作用相同…在选项卡ul/li links中使用

remoteLink

将导致两次加载：一次是由jQuery UI加载，一次是由

remoteLink

标记生成的JavaScript加载。我建议坚持使用

createLink

，它创建一个普通URL，而不需要任何额外的AJAX调用。谢谢！它还适用于：

TouchPoint Master

b但我想，这与createLink（）的做法相同……在选项卡ul/li links中使用

remoteLink

会导致加载发生两次：一次是由jQuery UI加载，一次是由

remoteLink

标记生成的JavaScript加载。我建议坚持使用

createLink

，它创建一个简单的URL，而不需要任何额外的AJAX调用。

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