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

我在我的Grails应用程序中使用jQuery UI中的Tabs。
在不同的选项卡中，我想显示来自控制器的动作（因此没有静态html网站等）。通过AJAX在jQuery-Tabs中加载grails操作

<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网站。

来源

2012-02-29 root

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

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

来源

2012-02-29 13:50:18

谢谢！它还适用于：

接触点主

但我想，这是做同样为建立连结（）... – root 2012-02-29 13:58:54

在标签ul/li链接中使用'remoteLink'会导致加载发生两次：一次是通过jQuery UI，另一次是由'remoteLink'标签生成的JavaScript。我建议坚持使用'createLink'创建一个普通的URL ，而不需要额外的AJAX调用。 – 2012-02-29 14:20:19

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

来源

2012-02-29 12:13:26

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

来源

2013-09-22 09:40:43 Visme

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

回答

相关问题