Semantic-Org/Semantic-UI · warning

There was an error contacting the server

Error message

There was an error contacting the server

What it means

Unlike the other entries this is a UI message shown inside the dropdown menu to the end user, not a console error. It fires from the API module's onError/onFailure callbacks inside queryRemote() when a dropdown configured with apiSettings gets an error or failure response from the server.

Solutions

1. Open DevTools Network and inspect the failed request (status, body, CORS headers)
2. Fix the endpoint or the apiSettings.url template so {query} matches the server contract
3. Add CORS headers server-side or proxy cross-origin requests
4. Override message.serverError or handle apiSettings.onError/onFailure to show a friendlier message or retry

Example fix

// before
$('.ui.dropdown').dropdown({ apiSettings: { url: '/api/missing?q={query}' } });
// after
$('.ui.dropdown').dropdown({
  apiSettings: {
    url: '/api/search?q={query}',
    onError: function() { /* show retry UI */ }
  },
  message: { serverError: 'Search is unavailable. Try again.' }
});

// Handle remote failures at the apiSettings boundary rather than letting the
// default serverError message confuse users.
$('.ui.dropdown').dropdown({
  apiSettings: {
    url: '/api/search?q={query}',
    onError: function () {
      // show cached results or a retry control instead of the raw message
      showCachedResults();
    },
    onFailure: function (resp) {
      if (window.navigator.onLine) {
        scheduleRetry();
      } else {
        showOfflineNotice();
      }
    }
  }
});

When it happens

Trigger: $('.ui.dropdown').dropdown({apiSettings:{url:'/search?q={query}'}}) when /search returns HTTP 4xx/5xx, times out, or the network drops; the message 'There was an error contacting the server' appears in the open menu.

Common situations: Backend endpoint down or route changed; CORS blocking the cross-origin response; apiSettings.url template with a wrong {query} placeholder; slow backend exceeding the API module throttle/timeout.

Related errors

• Saving remote data requires session storage
• The API module is required to load resources remotely
• Allowing user additions currently requires the use of…
• No search endpoint was specified
• Once a select has been initialized behaviors must be called…

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

Appendix: source

Thrown at src/definitions/modules/dropdown.js:3789

  onRemove      : function(value, text, $selected){},

  onLabelSelect : function($selectedLabels){},
  onLabelCreate : function(value, text) { return $(this); },
  onLabelRemove : function(value) { return true; },
  onNoResults   : function(searchTerm) { return true; },
  onShow        : function(){},
  onHide        : function(){},

  /* Component */
  name           : 'Dropdown',
  namespace      : 'dropdown',

  message: {
    addResult     : 'Add <b>{term}</b>',
    count         : '{count} selected',
    maxSelections : 'Max {maxCount} selections',
    noResults     : 'No results found.',
    serverError   : 'There was an error contacting the server'
  },

  error : {
    action          : 'You called a dropdown action that was not defined',
    alreadySetup    : 'Once a select has been initialized behaviors must be called on the created ui dropdown',
    labels          : 'Allowing user additions currently requires the use of labels.',
    missingMultiple : '<select> requires multiple property to be set to correctly preserve multiple values',
    method          : 'The method you called is not defined.',
    noAPI           : 'The API module is required to load resources remotely',
    noStorage       : 'Saving remote data requires session storage',
    noTransition    : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>'
  },

  regExp : {
    escape   : /[-[\]{}()*+?.,\\^$|#\s]/g,
    quote    : /"/g
  },

View on GitHub (pinned to 597843ab84)