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.

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)

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

• The API module is required to load resources remotely
• Saving remote data requires session storage
• There was an error with your request
• Your request timed out
• No search endpoint was specified

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