Getting Started

Minimal Setup

Install via Composer (if still usable):
```
composer require ajgl/jqueryui-bundle
```
Note: Due to Symfony 2.x dependency (<2.2-dev), this may require legacy tooling or a Symfony 2.x project.
Enable the Bundle in app/AppKernel.php:
```
new Ajgl\JQueryUiBundle\AjglJQueryUiBundle(),
```
Ensure Ajgl\JQueryBundle (dependency) is also installed/enabled.

First Use Case: Basic jQuery UI Integration Add the bundle’s assets to your base template (base.html.twig):

{{ ajgl_jqueryui_bundle_javascript() }}

Include the CSS in your layout:

{{ ajgl_jqueryui_bundle_stylesheets({
    theme: 'ui-lightness',  // Default theme
    components: ['core', 'widget']  // Load only needed components
}) }}

Verify Installation Check the generated <head> for loaded jQuery UI assets and confirm the bundle’s Twig functions work.

Implementation Patterns

Workflow: Component-Specific Integration

Selective Loading Use Twig functions to load only required components (reduces payload):
```
{{ ajgl_jqueryui_bundle_javascript({
    components: ['dialog', 'datepicker']
}) }}
```
Theme Customization Override the default theme via config (config.yml):
```
ajgl_jqueryui:
    theme: 'smoothness'  # Custom theme path: `web/bundles/ajgljqueryui/themes/smoothness`
```
Place themes in src/Ajgl/JQueryUiBundle/Resources/public/themes/ for autoloading.

Symfony Asset Integration Combine with Symfony’s Asset component for versioned URLs:

{% for css in ajgl_jqueryui_bundle_stylesheets() %}
    {{ asset(css) }}
{% endfor %}

Event-Driven Initialization Initialize jQuery UI widgets via JavaScript (e.g., after DOM ready):

$(document).ready(function() {
    $('#datepicker').datepicker();  // Requires 'datepicker' component
});

Common Patterns

Dialogs/Modals: Use ajgl_jqueryui_bundle_javascript({'components': ['dialog']}) + custom markup.
Forms: Pair with Ajgl\JQueryBundle for AJAX form handling + jQuery UI widgets (e.g., autocomplete).
Lazy Loading: Load components dynamically via AJAX if needed (bundle doesn’t support this natively).

Gotchas and Tips

Pitfalls

Symfony 2.x Dependency
- The bundle targets Symfony 2.0–2.1, requiring legacy tooling (e.g., sensio/distribution-bundle:2.0.*).
- Workaround: Use a Symfony 2.x project or fork the bundle for Symfony 3+/4/5 (check Symfony Upgrade Guide).
Missing Documentation
- The Resources/doc/index.md is referenced but not publicly available in the repo.
- Tip: Inspect AjglJQueryUiBundle.php and Resources/views/ for undocumented features.
Theme Path Assumptions
- The bundle expects themes in web/bundles/ajgljqueryui/themes/. Custom themes must be manually placed here.
- Fix: Override the theme path in config or extend the bundle’s ThemeLoader.
jQuery Dependency
- Requires ajgl/jquery-bundle (v1.8.2). Ensure it’s installed and loaded before jQuery UI.
- Debug: Check browser console for jQuery is not defined errors.
Component Naming
- Component names (e.g., 'datepicker') must match jQuery UI’s official names. Typos break loading.

Debugging Tips

Asset Loading Issues:
- Verify assets are in web/bundles/ajgljqueryui/ after app/console assets:install.
- Clear cache: php app/console cache:clear --env=prod.
Console Errors:
- Check for Uncaught ReferenceError: $ is not defined → Ensure jQuery is loaded first.
- Check for 404 on theme/CSS files → Confirm paths in config.yml.

Extension Points

Custom Components Extend the bundle to add non-standard jQuery UI components:

// src/Ajgl/JQueryUiBundle/DependencyInjection/AjglJQueryUiExtension.php
$loader->addComponents(array(
    'custom_component' => array('path' => 'path/to/custom.js'),
));

Asset Versioning Override the AssetLoader to add query strings for cache busting:

// src/Ajgl/JQueryUiBundle/Resources/config/services.yml
ajgl_jqueryui.asset_loader:
    class: Your\CustomAssetLoader
    arguments: [@asset_packages]

Symfony 3+/4/5 Compatibility Fork the bundle and update:
- composer.json (drop Symfony 2.x constraints).
- AjglJQueryUiBundle.php (extend Bundle base class).
- Replace Twig_Extension with TwigExtensionInterface.

Pro Tips

Bundle Order: Load Ajgl\JQueryBundle before Ajgl\JQueryUiBundle in AppKernel.php.
Minification: Use Symfony’s assetic or webpack to minify jQuery UI assets in production.

Fallbacks: For critical functionality, include a local copy of jQuery UI as a fallback:

{% if ajgl_jqueryui_bundle_is_loaded() %}
    {{ ajgl_jqueryui_bundle_javascript() }}
{% else %}
    {{ include('bundles/yourtheme/jquery-ui-fallback.js') }}
{% endif %}

Jqueryui Bundle Laravel Package