Forums

Bootstrap4 Theme - Error with popover.js

Permalink
I have created a Theme using Bootstrap4 in V5.8.2 which is fine until I try to added images or files using the standard Image and Files Blocks. After selecting an image or file I get returned to the Image/File block with no file or image loaded. On checking the browser console I see the issue is caused by popover.js throwing a TypeError: No Method named "destroy" It appears that this new version of popover.js has changed naming of a method from "destroy" to "dispose".

How can I switch to the V5.8.2 version of popper when in edit mode? Or is there another approach to resolve this issue. The following is the current asset registration in page_theme.php

$this->requireAsset('javascript', 'jquery');
      $this->requireAsset('javascript', 'picturefill'); // Responsive images fallback
      $this->requireAsset('javascript', 'site');
      $this->requireAsset('css', 'font-awesome');
      $this->requireAsset('javascript', 'bootstrap/tooltip');
      $this->requireAsset('javascript', 'bootstrap/popover');
      $this->requireAsset('javascript', 'bootstrap/*');
      $this->providesAsset('css', 'bootstrap/*');


And this is the loading of bootstrap4 and popper in my footer.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
toddgl
 
toddgl replied on at Permalink Reply
toddgl
I have now solved this problem. I used the following code in page_theme.php to load / or not assets based on whether the user is in edit mode:
public function registerAssets()
   {
     $c = \Page:: getCurrentPage();
     $currentPermissions = new \Permissions($c);
     $user = new \User;
     if ($currentPermissions->canViewToolbar() || $user->isLoggedIn())
     {
       $this->requireAsset('javascript', 'jquery');
       $this->requireAsset('javascript', 'jquery-ui');
       $this->requireAsset('javascript', 'bootstrap/*');
    } else {
       $this->providesAsset('javascript', 'jquery');
       $this->providesAsset('javascript', 'jquery-ui');
       $this->providesAsset('javascript', 'bootstrap/*');
     }
Viewing 15 lines of 20 lines. View entire code block.

The loading of the jquery (3.4.1), jquery-ui (1.12.1), popper (1.14.1) & bootstrap (4.4.1) assets are still in my footer.php but I have moved them before the line:
<?php View::element('footer_required'); ?>


The reason I went with Bootstrap4 was for cards so the approach I have taken may throw up some issues when editing pages that contain these constructs. This I have yet to test.