Not support Ajax

Hi msn5158, no, it doesn't. You can have a look Quicktabs:
https://www.drupal.org/project/quicktabs →

It's possible to ajaxify jquery UI Tabs, but it must have real page on the site for it:
https://jqueryui.com/tabs/#ajax

Quick Tabs has SEO issue because of it:
https://2bits.com/bing/how-google-and-bing-crawlers-was-confused-quickta...

It's possible to make ajax tabs easy only for Views pages or node pages, but for blocks and non-pages content we will need to create route or response for $.ajax dynamically. It's possible to do, but it's require some work around.

Yes, I know about this module, but it doesn't have a stable version yet and doesn't support text tabs. When using block tabs, it sometimes not work. I am also following it. Thank you for your response.


Maybe we could use Lazy Load for blocks and display blocks only when they are visible:
https://chatgpt.com/share/5795a201-426c-4255-8644-49751030e78c

I need to investigate it, but it looks promising.

From ChatGPT:

o ensure that a block in Drupal only loads via AJAX when it becomes visible on the page, you can use the Intersection Observer API in combination with Drupal's AJAX functionality. Here's how you can achieve this:

Add JavaScript for Intersection Observer:

First, add a custom JavaScript file to your Drupal theme or module to handle the Intersection Observer logic.

Create a file named lazy_load_block.js and add the following code:

javascript
Copy code
(function ($, Drupal) {
    Drupal.behaviors.lazyLoadBlock = {
        attach: function (context, settings) {
            // Check if IntersectionObserver is supported
            if ('IntersectionObserver' in window) {
                // Get the block element
                var block = document.querySelector('.your-block-class');

                // Create a new IntersectionObserver instance
                var observer = new IntersectionObserver(function (entries, observer) {
                    entries.forEach(function (entry) {
                        if (entry.isIntersecting) {
                            // Trigger AJAX request when the block is visible
                            $.ajax({
                                url: Drupal.url('path/to/your/block/ajax'),
                                type: 'GET',
                                dataType: 'html',
                                success: function (data) {
                                    $(block).html(data);
                                }
                            });

                            // Stop observing after loading the block
                            observer.unobserve(entry.target);
                        }
                    });
                });

                // Start observing the block element
                observer.observe(block);
            }
        }
    };
})(jQuery, Drupal);
Replace .your-block-class with the actual class of your block and path/to/your/block/ajax with the actual path to your block's AJAX callback.

Attach JavaScript File to Your Theme or Module:

If you are adding this to your theme, edit your theme's .info.yml file to include the JavaScript file:

yaml
Copy code
libraries:
  - yourtheme/lazy_load_block
Then, in your theme's yourtheme.libraries.yml file, add:

yaml
Copy code
lazy_load_block:
  js:
    js/lazy_load_block.js: {}
  dependencies:
    - core/jquery
    - core/drupal
If you are adding this to a custom module, you can add the following to your module's .module file:

php
Copy code
/**
 * Implements hook_library_info_build().
 */
function your_module_library_info_build() {
  $libraries['lazy_load_block'] = [
    'js' => [
      'js/lazy_load_block.js' => [],
    ],
    'dependencies' => [
      'core/jquery',
      'core/drupal',
    ],
  ];
  return $libraries;
}

/**
 * Implements hook_page_attachments().
 */
function your_module_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'your_module/lazy_load_block';
}
Create the AJAX Callback:

In your custom module, create an AJAX callback function to return the block content. Here's an example:

php
Copy code
use Drupal\Core\Ajax\HtmlCommand;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Controller\ControllerBase;

class YourModuleController extends ControllerBase {
    public function loadBlockAjax() {
        $response = new AjaxResponse();

        // Load the block content
        $block = \Drupal\block\Entity\Block::load('your_block_id');
        $block_content = \Drupal::entityTypeManager()
            ->getViewBuilder('block')
            ->view($block);

        // Render the block content
        $rendered_block = render($block_content);

        // Add the rendered block to the AJAX response
        $response->addCommand(new HtmlCommand('.your-block-class', $rendered_block));

        return $response;
    }
}

/**
 * Implements hook_menu().
 */
function your_module_menu() {
  $items = [];

  $items['path/to/your/block/ajax'] = [
    'title' => 'Load Block AJAX',
    'page callback' => 'Drupal\your_module\Controller\YourModuleController::loadBlockAjax',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
  ];

  return $items;
}
Replace your_block_id with the ID of your block and path/to/your/block/ajax with the actual path for your AJAX callback.

Clear Cache:

Finally, clear your Drupal cache to ensure the changes take effect:

bash
Copy code
drush cr
By following these steps, your block will be loaded via AJAX only when it becomes visible in the viewport, improving page load performance and user experience.