Jump to content

Front end Editor conflict with bootstrap 4


quickjeff
 Share

Recommended Posts

3 hours ago, quickjeff said:

Hey guys I am using the front end editor for people to be able to edit a custom page they created. However, bootstrap 4 is being used as the framework and it seems to conflict with the editor. Any suggestions? 

The editor should be "namespaced". Are you able to provide a screenshot of the conflict (with inspect element on the issue). 

  • Like 2
Link to comment
Share on other sites

What PW version? There have been some updates to PageFrontEdit a few months ago. It also looks like jQuery is not loaded before other scripts. PageFrontEdit doesn't play well with Jquery 3 used on the frontend. See https://github.com/processwire/processwire-issues/issues/609 and https://github.com/processwire/processwire-issues/issues/574

  • Like 1
Link to comment
Share on other sites

On 8/25/2018 at 3:26 AM, matjazp said:

What PW version? There have been some updates to PageFrontEdit a few months ago. It also looks like jQuery is not loaded before other scripts. PageFrontEdit doesn't play well with Jquery 3 used on the frontend. See https://github.com/processwire/processwire-issues/issues/609 and https://github.com/processwire/processwire-issues/issues/574

Using latest version of PW and loading the bootstrap 4 scripts in top and bottom. I tested both ways and it doesnt work. I think its the .slim.min.js file thats breaking things. However this is needed for the toggle drop down and other menu/navigation drop downs in Bootstrap. 

Link to comment
Share on other sites

  • 1 month later...

Can confirm we've run into this same issue with the latest Bootstrap, latest PW and latest jQuery. We're currently doing this to ensure latest jQuery for the public and the compatible older version for editors.

<?php
//Load older version of jQuery for front end editor
if ($user->isLoggedin()) {
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>';
} else {
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>';
}	
?>

 

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...
On 10/3/2018 at 8:59 PM, Guy Incognito said:

Can confirm we've run into this same issue with the latest Bootstrap, latest PW and latest jQuery. We're currently doing this to ensure latest jQuery for the public and the compatible older version for editors.

But this is only a workaround... we need a pw fix here... 😞 

It makes no sense to use an old version permanently.

Link to comment
Share on other sites

  • 1 year later...
  • 7 months later...
  • 11 months later...

Not really a solution, but you can instead load jquery-migrate for editors after jquery:

if ($page->editable()) { echo '<script src="/path-to-js/jquery-migrate-3.3.2.min.js?NoMinify" defer></script>'; }

This way you have at least the full functionality of the current jquery version for the editors, too.

The same problem is discussed here.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...