JavaScript Functionality Not Working

When DigiBlocks JavaScript features stop working properly, it can affect interactive elements like forms, animations, countdowns, and other dynamic content. This guide will help you identify and resolve common JavaScript-related issues.

Common Symptoms

JavaScript functionality issues typically manifest as:

Interactive blocks not responding to user actions
Animations not playing or appearing broken
Form submissions failing silently
Countdown timers not updating
Google Maps not loading or displaying incorrectly
Newsletter signup forms not working
Lottie animations remaining static
Console errors appearing in browser developer tools

Basic Troubleshooting Steps

Check Browser Console

The first step in diagnosing JavaScript issues is to check your browser’s developer console for errors.

Open your website in a web browser
Right-click on the page and select “Inspect” or “Inspect Element”
Navigate to the “Console” tab
Look for any red error messages
Take note of any errors mentioning “digiblocks” or related to the blocks that aren’t working

Common error messages and their meanings:

“Uncaught ReferenceError” – Missing JavaScript library or function
“Uncaught TypeError” – Attempting to use undefined variables or functions
“Script error” – General JavaScript execution failure
“Failed to load resource” – JavaScript files not loading properly

Verify JavaScript Files Are Generated

DigiBlocks automatically generates JavaScript files for posts containing interactive blocks. Check if these files exist:

Go to your WordPress admin dashboard
Navigate to DigiBlocks > Settings
Click the “Regenerate All Assets” button
Wait for the process to complete

If the regeneration fails or reports errors, there may be an issue with file permissions or server configuration.

Check File Permissions

Ensure your server can create and modify JavaScript files:

Access your website files via FTP or file manager
Navigate to /wp-content/uploads/digiblocks/
Check that this directory exists and is writable
Look for .js files with names like digiblocks-123.js (where 123 is your post ID)
Verify these files contain JavaScript code and aren’t empty

If files are missing or empty, try regenerating assets or contact your hosting provider about write permissions.

Block-Specific JavaScript Issues

Forms Block Not Submitting

If your forms aren’t submitting or processing correctly:

Check reCAPTCHA Configuration:

Verify your Site Key and Secret Key in DigiBlocks > Settings
Ensure keys are from Google reCAPTCHA v3 (not v2)
Test with reCAPTCHA temporarily disabled

Verify AJAX Functionality:

Ensure WordPress AJAX is working by testing with other plugins
Check for JavaScript conflicts with form processing

Animations Not Playing

For animation-related issues:

Verify Animation Settings:

Check that animations are enabled in block settings
Ensure animation triggers are properly configured
Test with different animation types

Check Animation Dependencies:

Animation functionality requires the animations JavaScript file
Verify the file is loading by checking browser developer tools

Google Maps Not Loading

When Google Maps blocks aren’t working:

API Key Issues:

Verify your Google Maps API key in DigiBlocks > Settings
Ensure the API key has proper permissions for Maps JavaScript API
Check API usage limits in Google Cloud Console

JavaScript Loading:

Verify Google Maps API script is loading without errors
Check for conflicts with other map-related plugins

Lottie Animations Not Playing

For Lottie animation problems:

Animation File Issues:

Ensure Lottie JSON files are valid and accessible
Test animation files in Lottie preview tools
Verify file URLs are correct and files aren’t blocked

Player Loading:

Check that the Lottie player library is loading correctly
Look for console errors related to Lottie player initialization

Plugin and Theme Conflicts

Identify Conflicting Plugins

Plugin conflicts can interfere with DigiBlocks JavaScript:

Deactivate all other plugins except DigiBlocks
Test the problematic functionality
If it works, reactivate plugins one by one until you find the conflict
Once identified, look for alternative plugins or contact plugin developers

Test with Default Theme

Theme conflicts can also cause JavaScript issues:

Switch to a default WordPress theme (like Twenty Twenty-Four)
Test DigiBlocks functionality
If it works with the default theme, the issue is theme-related
Contact your theme developer for assistance

Common Conflict Sources

JavaScript framework conflicts – Conflicting libraries like React, Vue, or Angular
Minification plugins – Aggressive caching or minification breaking JavaScript
Security plugins – Blocking or modifying JavaScript files

Caching and Optimization Issues

Clear All Caches

Caching can serve outdated JavaScript files:

Clear WordPress caches (if using caching plugins)
Clear browser cache and hard refresh (Ctrl+F5 or Cmd+Shift+R)
Clear CDN cache if using services like Cloudflare
Purge any optimization plugin caches

Disable JavaScript Optimization

Temporarily disable JavaScript optimization to test:

Disable minification in caching plugins
Disable JavaScript concatenation
Disable defer/async loading for DigiBlocks scripts
Test functionality and re-enable optimizations gradually

Server and Configuration Issues

PHP Memory and Execution Limits

Insufficient server resources can prevent JavaScript generation:

Check PHP Limits:

Memory limit should be at least 256MB
Execution time should allow for asset processing
Contact your hosting provider if limits are too low

File System Permissions

Ensure proper permissions for JavaScript file creation:

Required Permissions:

/wp-content/uploads/ should be writable (755 or 775)
/wp-content/uploads/digiblocks/ should be writable
Web server should have permission to create and modify files

HTTPS and Mixed Content

Mixed content warnings can block JavaScript:

Verify HTTPS Configuration:

Ensure your site is properly configured for HTTPS
Check that all resources load over HTTPS
Look for mixed content warnings in browser console

Advanced Troubleshooting

Debug Mode

Enable WordPress debug mode for more detailed error information:

// Add to wp-config.php
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Check /wp-content/debug.log for JavaScript-related errors.

Manual JavaScript Testing

Test DigiBlocks JavaScript manually:

Open browser developer tools
Navigate to Sources or Debugger tab
Find DigiBlocks JavaScript files
Set breakpoints to test function execution
Step through code to identify where issues occur

Network Tab Analysis

Use browser developer tools to analyze resource loading:

Open Network tab in developer tools
Reload the page
Filter by JS files
Check for failed requests (red entries)
Verify DigiBlocks JavaScript files are loading

Prevention and Maintenance

Regular Asset Regeneration

Periodically regenerate DigiBlocks assets:

After plugin updates
When switching themes
After server migrations
If functionality stops working unexpectedly

Monitor Console Errors

Regularly check browser console for JavaScript errors:

Set up monitoring for production sites
Test major functionality after updates
Keep browser developer tools open during content editing

Keep Dependencies Updated

Ensure all components are current:

Update DigiBlocks plugin regularly
Keep WordPress core updated
Update themes and other plugins
Monitor for compatibility issues after updates

When to Seek Additional Help

Contact DigiBlocks support if:

Issues persist after following all troubleshooting steps
You encounter complex server configuration problems
Multiple blocks are affected simultaneously
JavaScript errors reference DigiBlocks core files directly

Provide the following information when seeking help:

Specific error messages from browser console
List of active plugins and theme
Server PHP version and configuration
Steps you’ve already taken to resolve the issue
Screenshots of error messages or broken functionality