Troubleshooting popups, autocompletes, or other javascript problems.

[Coleman Watts]

This is a "meta topic" to collect troubleshooting tips for javascript-related problems. If you are experiencing any of the following, read on:

Symptoms

• Popup forms, tabs, custom fields, and other dynamic content fail to load or save correctly.
• Autocompletes or profile selectors look wrong (like a textbox that doesn't do anything) or fail to get results when you try to search.
• The CiviCRM menubar fails to appear at the top of the page.
• You frequently see error messages like "Network Error - Unable to reach the server."

Background
Javascript (JS) is what makes web-apps interactive. Without it, nothing on a webpage can change without refreshing or clicking to a new page. The CiviCRM UI, especially in newer versions, uses javascript for everything from popup forms to date and time inputs. If a bug or misconfiguration on your website interferes with some aspect of JS, certain elements of the CiviCRM interface may function badly or not at all.
AJAX is a complicated-sounding acronym for the simple task of loading more stuff from the server on-demand. When you see a spinning triangle or have to wait for autocomplete results, the content is loading via AJAX. The J stands for Javascript, so if your site is having JS toubles, AJAX may not work either.

Troubleshooting Tools
Finding out what's wrong is 90% of fixing it.

• CiviCRM has a debugging mode which will help you get more information about errors. Go to Administer->System Settings->Debugging and Error Handling and temporarily turn on "Enable Debugging" and "Display Backtrace".
• Your web-browser (Firefox/Chrome/etc.) has a javascript console where you can view error messages. Press F12 to turn it on and then click over to the "Console" tab.
• With these tools enabled, try triggering the symptom again and watch for error messages on the screen or in the console.
• If you see an error message, try doing a google search for it to see if others have solved the same problem.

Problems and Solutions

• Incompatible/buggy extensions for CiviCRM might crash javascript. Try temporarily turning them all off. If your problem is fixed, re-enable them one at a time to find the culprit.
• If your site is accessible from more than one url (e.g. http://mysite.org and http://www.mysite.org) AJAX requests may fail. Ask your host or sysadmin to restrict access to one url or the other, and ensure the one you choose matches $civicrm_root in civicrm.settings.php.
• Some people customize CiviCRM by overriding templates and php code. This custom code can become out-of-date and incompatible with the latest version, causing problems after upgrading. To see if your site has custom code, go to Administer->System Settings->Directories and check if either "Custom Templates" or "Custom PHP Path Directory" has been set (they are both blank by default). If so, try deleting them temporarily (don't forget to copy their values into a text file on your computer so you can restore them later). Check if your problem is solved, and if so, you can conclude that your custom code is in need up updating.
• On-screen php error messages can interfere with dynamic content loading from the server. Ensure the display_errors setting is off in your php.ini configuration.
• Certain website plugins have been known to cause javascript errors. Check this list of known incompatibilities.
• Ensure you are using the latest version of CiviCRM.
• Clear your site's caches.

If none of the above works

• Create a new post on the forum.
• Indicate that you have already read this and list what solutions you tried and what happened.
• List exact steps to reproduce the problem, and paste in the complete error message(s) you are seeing.