laravel views in Semantic-UI tabbed layout

问题

I have a very basic problem with AJAX. I wish to use a tabbed layout with AJAX loading of my content.

http://semantic-ui.com/modules/tab.html#/examples

see Retreiving Remote Content section.

My problem: I have no clue how replace the mockup AJAX

      mockResponse    : function(settings) {
    var response = {
      first  : 'AJAX Tab One',
      second : 'AJAX Tab Two',
      third  : 'AJAX Tab Three'
    };

with views defined in my controller.

May I ask somebody to show me a working example.

Thank you in advance.

回答1:

You can use the Semantic UI "api settings" in your js.

Tab buttons;

<div class="ui top attached tabular menu">
  <a class="active item" data-tab="gallery" id="gallery_tab">Gallery</a>
  <a class="item" data-tab="youtube" id="youtube_tab">Youtube Videos</a>
</div>

Tab contents;

<div class="ui bottom attached active tab" data-tab="gallery" id="gallery_tab_content"></div>

<div class="ui bottom attached tab" data-tab="youtube" id="youtube_tab_content"></div>

API settings for tabs;

$.fn.api.settings.api = {
    // laravel route or url 
    'get gallery'       : '{!! url('gallery/images') !!}}',
    'get youtube'       : '{!! route('youtube.videos') !!}}'
};

Then add the following codes for tab buttons

$('#gallery_tab').api({
    action: 'get gallery',
    method : 'GET',
    dataType: 'html',
    stateContext : '#gallery_tab_content',
    data: {
        // if you want to send url data via POST/GET method
    },
    onSuccess: function(response) {
      // load response content in "gallery_tab_content"
      $('#gallery_tab_content').html(response);
    },
});

$('#youtube_tab').api({
    action: 'get youtube',
    method : 'GET',
    dataType: 'html',
    stateContext : '#youtube_tab_content',
...
...

来源：https://stackoverflow.com/questions/31812876/laravel-views-in-semantic-ui-tabbed-layout

标签

jquery

ajax

laravel

response

semantic-ui