Загрузить действие Grails в jQuery-Tabs через AJAX - PullRequest
Новая
       10

Загрузить действие Grails в jQuery-Tabs через AJAX

1 голос
/ 29 февраля 2012

Я использую вкладки из jQuery UI в своем приложении Grails.
На разных вкладках я хочу отображать действия с контроллера (поэтому нет статического 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>

Можно ли загрузить эти действия или gsp-сайт через AJAX?

На jQuery-Website есть пример (http://jqueryui.com/demos/tabs/#ajax),, но в этом примере они загружают только статический HTML-сайт.

Ответы [ 3 ]

1 голос
/ 29 февраля 2012

Если вы хотите, чтобы содержимое вкладок динамически загружалось при переключении вкладок, подход 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>
0 голосов
/ 22 сентября 2013 
<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>
0 голосов
/ 29 февраля 2012

Да, это возможно. Вы не упомянули, какое событие вызовет 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 .

...