Bootstrap3 Dialog Laravel Package

Getting Started

Minimal Setup

1. Installation Add the package via Composer:

   composer require cross-solution/bootstrap3-dialog
   

   Publish the assets (if needed) and include the JS/CSS in your resources/views/layouts/app.blade.php:

   @vite(['resources/css/bootstrap-dialog.css', 'resources/js/bootstrap-dialog.js'])
   

2. First Use Case Trigger a basic modal dialog in a Laravel Blade view:

   <button id="open-dialog" class="btn btn-primary">Open Dialog</button>
   
   <script>
       $(document).ready(function() {
           $('#open-dialog').click(function() {
               BootstrapDialog.show({
                   title: 'Welcome',
                   message: 'This is a basic dialog.'
               });
           });
       });
   </script>
   

3. Where to Look First

   • Documentation: Check the BootstrapDialog docs (the package wraps this library).
   • Source: Review vendor/cross-solution/bootstrap3-dialog/src/ for Laravel-specific helpers (if any).
   • Examples: Look for resources/js/bootstrap-dialog.js or public/js/ for pre-configured setups.

Implementation Patterns

Common Workflows

1. Dynamic Dialogs from Laravel Backend Pass dialog data from a controller to a Blade view and render it client-side:

   // Controller
   return view('dialog.example', [
       'dialogTitle' => 'User Confirmation',
       'dialogMessage' => 'Are you sure you want to delete this?',
       'dialogCallback' => 'deleteUser(' . $userId . ')'
   ]);
   

   <!-- Blade View -->
   <script>
       BootstrapDialog.show({
           title: '@json($dialogTitle)',
           message: '@json($dialogMessage)',
           buttons: [{
               label: 'Delete',
               action: function(dialog) {
                   eval('@json($dialogCallback)'); // Executes JS function
                   dialog.close();
               }
           }]
       });
   </script>
   

2. Reusable Dialog Components Create a Laravel helper or service to standardize dialogs:

   // app/Services/DialogService.php
   class DialogService {
       public static function confirm(string $title, string $message, callable $callback) {
           return <<<JS
           BootstrapDialog.show({
               title: '{$title}',
               message: '{$message}',
               buttons: [{
                   label: 'Confirm',
                   action: function() { {$callback()} }
               }]
           });
           JS;
       }
   }
   

   Usage in Blade:

   <script>
       @php echo \App\Services\DialogService::confirm(
           'Delete Item',
           'This action cannot be undone.',
           "deleteItem({$id})"
       ) @endphp
   </script>
   

3. Integration with Laravel Mix/Vite Ensure the package’s JS/CSS is bundled:

   // vite.config.js
   import { defineConfig } from 'vite';
   export default defineConfig({
       build: {
           rollupOptions: {
               input: {
                   bootstrapDialog: './resources/js/bootstrap-dialog.js'
               }
           }
       }
   });
   

4. AJAX-Driven Dialogs Use Laravel AJAX responses to populate dialogs dynamically:

   // Controller (API route)
   public function showDialog(Request $request) {
       return response()->json([
           'title' => 'Dynamic Content',
           'message' => 'Data fetched at: ' . now()
       ]);
   }
   

   <!-- Blade -->
   <script>
       $.get('/dialog-data', function(data) {
           BootstrapDialog.show(data);
       });
   </script>
   

Gotchas and Tips

Pitfalls

1. Missing Dependencies

   • Ensure jQuery is loaded before bootstrap-dialog.js:

     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="{{ asset('js/bootstrap-dialog.js') }}"></script>
     

   • If using Laravel Mix/Vite, confirm the order in your app.js:

     import 'jquery';
     import 'bootstrap-dialog';
     

2. CSRF Token Conflicts If using AJAX with Laravel’s CSRF protection, include the token in dialog requests:

   $.ajaxSetup({
       headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
       }
   });
   

3. Styling Overrides BootstrapDialog may override Bootstrap 3/4/5 styles. Customize via:

   /* resources/css/app.css */
   .bootstrap-dialog {
       max-width: 800px !important;
   }
   

4. Closure Scope Issues Avoid passing PHP variables directly to JS without sanitization:

   // Bad: Vulnerable to XSS
   echo "BootstrapDialog.show({ message: '{$userInput}' })";
   
   // Good: Use JSON encoding
   echo "BootstrapDialog.show(" . json_encode(['message' => $userInput]) . ")";
   

Debugging Tips

1. Console Errors Check browser console for missing dependencies or syntax errors. Example:

   Uncaught ReferenceError: BootstrapDialog is not defined
   

   → Likely missing JS file or incorrect load order.

2. Dialog Not Showing?

   • Verify the DOM is ready:

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

   • Check for JavaScript errors in the console.

3. Stuck Modals If a dialog freezes, force-close it via:

   $('.bootstrap-dialog').remove();
   

Extension Points

1. Custom Buttons Extend dialog functionality with custom buttons:

   BootstrapDialog.show({
       buttons: [
           {
               label: 'Save',
               cssClass: 'btn-primary',
               action: function(dialog) {
                   // Custom logic
                   dialog.close();
               }
           },
           {
               label: 'Cancel',
               action: function(dialog) {
                   dialog.close();
               }
           }
       ]
   });
   

2. Laravel Events Trigger dialogs from Laravel events (e.g., Illuminate\Auth\Events\Registered):

   // Event Listener
   public function handle(Registered $event) {
       // Queue a job to show a dialog on the next request
       ShowWelcomeDialog::dispatch($event->user);
   }
   

   // Frontend (e.g., via Laravel Echo/Pusher)
   Echo.channel('user.{id}')
       .listen('WelcomeDialog', (data) => {
           BootstrapDialog.show(data);
       });
   

3. Server-Side Validation Use dialogs for inline validation feedback:

   // Controller
   $validator = Validator::make($request->all(), [...]);
   if ($validator->fails()) {
       return response()->json([
           'errors' => $validator->errors(),
           'dialog' => true
       ]);
   }
   

   $.post('/submit', data).then(function(response) {
       if (response.dialog) {
           BootstrapDialog.show({
               title: 'Validation Errors',
               message: `<ul>${Object.values(response.errors).flat().map(e => `<li>${e}</li>`).join('')}</ul>`
           });
       }
   });
   

4. Localization Localize dialog messages using Laravel’s trans() helper:

   <script>
       BootstrapDialog.show({
           title: '@json(__("dialog.title"))',
           message: '@json(__("dialog.message"))'
       });
   </script>