Jquery Ui Laravel Package

Getting Started

Minimal Setup

1. Installation Add the package via Composer:

   composer require contao-components/jquery-ui
   

   Publish the assets (if using Laravel Mix or Vite):

   npm install jquery-ui-dist
   

2. Basic Usage Include jQuery and jQuery UI in your layout (e.g., resources/js/app.js):

   import 'jquery-ui-dist/jquery-ui';
   

   Or via CDN in a Blade template:

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
   

3. First Widget Initialize a simple dialog in a Blade view:

   <button id="open-dialog">Open Dialog</button>
   <div id="dialog" title="Basic dialog" style="display: none;">
       Hello, jQuery UI!
   </div>
   
   <script>
       $(function() {
           $("#dialog").dialog();
       });
   </script>
   

4. Laravel Mix/Vite Integration Add to webpack.mix.js:

   mix.js('resources/js/app.js', 'public/js')
       .postCss('resources/css/app.css', 'public/css', []);
   

   Ensure jquery-ui is imported in your entry file.

Implementation Patterns

Common Workflows

1. Dynamic Widget Initialization Use Laravel Blade directives or Alpine.js to conditionally load widgets:

   @if(auth()->check())
       <div id="user-panel" style="display: none;">
           <p>Welcome, {{ auth()->user()->name }}!</p>
       </div>
       <script>
           $(function() {
               $("#user-panel").dialog({ autoOpen: false });
               $("#open-panel").click(() => $("#user-panel").dialog("open"));
           });
       </script>
   @endif
   

2. Form Integration Enhance Laravel form validation with jQuery UI:

   <form id="my-form">
       <input type="text" name="username" required>
       <button type="submit">Submit</button>
   </form>
   
   <script>
       $(function() {
           $("#my-form").validate({
               rules: { username: { required: true } },
               messages: { username: "Please enter a username" },
               submitHandler: function(form) {
                   $.ajax({
                       url: "{{ route('form.submit') }}",
                       method: "POST",
                       data: $(form).serialize(),
                   });
               }
           });
           // Add jQuery UI styling to error messages
           $(".error").dialog({ modal: true, buttons: { Ok: function() { $(this).dialog("close"); } } });
       });
   </script>
   

3. AJAX-Driven Widgets Load widgets dynamically via Laravel routes:

   // Example: Lazy-load a sortable list
   $("#load-sortable").click(function() {
       $.get("{{ route('admin.sortable.items') }}", function(data) {
           $("#sortable-list").html(data).sortable({
               update: function() {
                   $.post("{{ route('admin.sortable.update') }}", $(this).sortable("serialize"));
               }
           });
       });
   });
   

4. Laravel Blade + jQuery UI Pass data from Laravel to jQuery UI widgets:

   <div id="user-list" style="display: none;">
       @foreach($users as $user)
           <div class="user-item" data-id="{{ $user->id }}">
               {{ $user->name }}
           </div>
       @endforeach
   </div>
   
   <script>
       $(function() {
           $("#user-list").dialog({
               title: "Users ({{ $users->count() }})",
               width: 600
           });
       });
   </script>
   

Integration Tips

1. Laravel Mix/Vite

   • Use jquery-ui/dist/jquery-ui.css for themes (e.g., jquery-ui/themes/base/all.css).
   • Configure Mix to copy theme assets:

     mix.copy('node_modules/jquery-ui-dist/themes/base', 'public/css/jquery-ui');
     

2. Laravel Echo/Pusher Update widgets in real-time:

   Echo.channel('user-updates')
       .listen('UserUpdated', (e) => {
           $("#user-panel").dialog("option", "title", `Updated: ${e.user.name}`);
       });
   

3. Laravel Validation Sync jQuery UI validation with Laravel’s FormRequest:

   $("#my-form").validate({
       rules: {
           email: { required: true, email: true },
           password: { minlength: 8 }
       },
       errorElement: "span",
       errorPlacement: function(error, element) {
           error.addClass("ui-state-error").insertAfter(element);
       }
   });
   

4. Laravel Livewire/Alpine Combine with Livewire for reactive UI:

   <div x-data="{ open: false }">
       <button @click="open = true">Open Modal</button>
       <div x-show="open" @click.away="open = false" class="ui-dialog">
           <!-- jQuery UI dialog content -->
       </div>
   </div>
   

Gotchas and Tips

Pitfalls

1. jQuery Conflicts

   • Ensure jQuery is loaded before jQuery UI.
   • Avoid multiple jQuery instances (e.g., from Laravel Echo and jQuery UI).
   • Use $.noConflict() if needed:

     var jqu = $.noConflict();
     jqu("#dialog").dialog();
     

2. CSS Overrides

   • jQuery UI themes may conflict with Laravel/Bootstrap CSS.
   • Override styles in your main CSS:

     .ui-widget { font-family: 'Inter', sans-serif; }
     

3. Lazy Loading Issues

   • Dynamically loaded widgets may fail if jQuery UI isn’t ready.
   • Use event delegation:

     $(document).on("ajaxSuccess", function() {
         $("#dynamic-dialog").dialog();
     });
     

4. Laravel Mix Caching

   • Clear Mix cache after adding jQuery UI:

     npm run dev -- --no-cache
     

5. Theme Loading

   • Missing themes break widgets. Ensure paths are correct:

     import 'jquery-ui-dist/jquery-ui.css';
     import 'jquery-ui-dist/themes/base/all.css'; // Explicit theme
     

Debugging Tips

1. Console Errors

   • Check for jQuery is not defined (missing jQuery).
   • Verify widget methods exist (e.g., $.ui.dialog for jQuery UI 1.13+).

2. Network Tab

   • Confirm jQuery UI assets are loaded (e.g., jquery-ui.min.js).

3. Laravel Logs

   • Check for missing routes or 404s in AJAX calls.

4. Widget Initialization

   • Ensure widgets are initialized after DOM is ready:

     $(document).ready(function() { ... });
     // or
     $(function() { ... });
     

Extension Points

1. Custom Themes

   • Extend jQuery UI themes by overriding Sass variables:

     // resources/scss/jquery-ui.scss
     @import "~jquery-ui-dist/themes/base/theme.scss";
     $primary-color: #6c5ce7;
     

2. Laravel Service Provider

   • Register jQuery UI globally in AppServiceProvider:

     public function boot()
     {
         View::composer('*', function ($view) {
             $view->with(['jqueryUi' => [
                 'dialog' => ['autoOpen' => false],
                 'sortable' => ['cursor' => 'move']
             ]]);
         });
     }
     

3. Laravel Blade Directives Create a directive for reusable widgets:

   // app/Providers/BladeServiceProvider.php
   Blade::directive('jqueryUi', function ($expression) {
       return "<?php echo \$__env->make('components.jquery-ui', ['widget' => $expression])->render(); ?>";
   });
   

   Usage:

   @jqueryUi('dialog', ['title' => 'Custom'])
   

4. Laravel Livewire Components Integrate with Livewire for reactive widgets:

   // app/Http/Livewire/UserPanel.php
   public function mount()
   {
       $this->widgetOptions = ['title' => 'User Panel'];
   }
   
   public function render()
   {
       return view('livewire.user-panel', [
           'options' => $this->widgetOptions
       ]);
   }
   

   <!-- resources/views/livewire/user-panel.blade.php -->
   <div x-data="{ open: false }">
       <button @click="open = true">Open</button>
       <div x-show="open"