Semantic-Org/Semantic-UI · info

onTabLoad has been renamed to onLoad in 2.0. Please adjust…

Error message

onTabLoad has been renamed to onLoad in 2.0. Please adjust your code

What it means

Semantic UI Tab deprecation notice logged at tab.js:167 by fix.callbacks(): if parameters.onTabLoad is present it is renamed to parameters.onLoad, the legacy key is deleted, and this message is logged. Automatic conversion preserves behavior; the notice nudges migration to the 2.x callback name.

Solutions

  1. Rename onTabLoad to onLoad in the tab settings object.
  2. Delete the deprecated key after migration.
  3. Update copy-pasted examples to the new callback names.

Example fix

// before
$('.menu .item').tab({ onTabLoad: function(path, params, evt){ /*...*/ } });
// after
$('.menu .item').tab({ onLoad: function(path, params, evt){ /*...*/ } });
Defensive patterns

Strategy: validation

Validate before calling

function migrateTabLoad(cfg) {
  if (cfg && cfg.onTabLoad) { console.warn('Rename onTabLoad -> onLoad'); cfg.onLoad = cfg.onTabLoad; delete cfg.onTabLoad; }
  return cfg;
}

Type guard

function usesModernTabLoadName(cfg) { return !cfg || typeof cfg.onTabLoad === 'undefined'; }

Prevention

When it happens

Trigger: Initializing tab with the 1.x callback name: $('.menu .item').tab({ onTabLoad: function(){...} }).

Common situations: Copy-paste from 1.x docs; legacy bundled templates that haven't been updated for 2.x.

Related errors


AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/0c7cae5c57438913. Report an issue: GitHub.

Appendix: source

Thrown at src/definitions/modules/tab.js:930

  onFirstLoad : function(tabPath, parameterArray, historyEvent) {}, // called first time loaded
  onLoad      : function(tabPath, parameterArray, historyEvent) {}, // called on every load
  onVisible   : function(tabPath, parameterArray, historyEvent) {}, // called every time tab visible
  onRequest   : function(tabPath, parameterArray, historyEvent) {}, // called ever time a tab beings loading remote content

  templates : {
    determineTitle: function(tabArray) {} // returns page title for path
  },

  error: {
    api        : 'You attempted to load content without API module',
    method     : 'The method you called is not defined',
    missingTab : 'Activated tab cannot be found. Tabs are case-sensitive.',
    noContent  : 'The tab you specified is missing a content url.',
    path       : 'History enabled, but no path was specified',
    recursion  : 'Max recursive depth reached',
    legacyInit : 'onTabInit has been renamed to onFirstLoad in 2.0, please adjust your code.',
    legacyLoad : 'onTabLoad has been renamed to onLoad in 2.0. Please adjust your code',
    state      : 'History requires Asual\'s Address library <https://github.com/asual/jquery-address>'
  },

  metadata : {
    tab    : 'tab',
    loaded : 'loaded',
    promise: 'promise'
  },

  className   : {
    loading : 'loading',
    active  : 'active'
  },

  selector    : {
    tabs : '.ui.tab',
    ui   : '.ui'
  }

View on GitHub (pinned to 597843ab84)