AppGini V5.40 - Bootstrap 3.3.4 & Prototype.js conflict

Please report bugs and any annoyances here. Kindly include all possible details: steps to reproduce, expected result, actual result, screenshots, ... etc.
Post Reply
peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

AppGini V5.40 - Bootstrap 3.3.4 & Prototype.js conflict

Post by peebee » 2015-05-26 02:43

Updated to Appgini V5.40 and found that Bootstrap tabs, pills, dropdowns and some other javascript functions that had been working in Appgini 5.31 suddenly stopped working!

Bootstrap elements "disappeared" when clicked. I identified the problem to be a "display: none;" style tag being added to the elements when clicked.

After 3 days of pulling my hair out, I finally identified the issue to be resources/lightbox/js/prototype.js. To cut the story short, there is an identified conflict with Bootstrap V3.3.x and Prototype.js.

See here: http://www.softec.lu/site/DevelopersCor ... peConflict for the problem, the cause and suggested workarounds.

I actually opted for another simple solution as the workarounds above did not work for me(?). I replaced the Appgini version of resources/lightbox/js/prototype.js with a Bootstrap friendly version of prototype.js found here: https://raw.githubusercontent.com/zikul ... ototype.js

Apart from these bootstrap compatibility changes to prototype.js that are listed here: https://github.com/zikula/core/commit/0 ... 768e1f0554 I also edited the isBootstrapEvent variable (found on line 9) to include the code below which fixes Bootstraps tabs & pills:

Code: Select all

var isBootstrapEvent = false;
if (window.jQuery) {  
  jQuery('*').on('hide.bs.dropdown', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.collapse', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.modal', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.tab', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.pill', function( event ) {
    isBootstrapEvent = true;
  });
}
PS: Thanks for Appgini V5.40 Ahmad. An excellent upgrade and well worth the very nominal fee you charge.

Diogenes
Posts: 16
Joined: 2015-05-07 14:03

Re: AppGini V5.40 - Bootstrap 3.3.4 & Prototype.js conflict

Post by Diogenes » 2015-05-26 13:35

thanks a lot for jumping into v5.40!
I just downloaded it and have not installed.

I will be copycatting your "updates" described here.

Thank you, peebee!

User avatar
a.gneady
Site Admin
Posts: 1287
Joined: 2012-09-27 14:46
Contact:

Re: AppGini V5.40 - Bootstrap 3.3.4 & Prototype.js conflict

Post by a.gneady » 2015-05-26 23:19

Thanks Peebee for the helpful info. I didn't encounter these issues while testing ... Did they occur with a specific theme, or with all themes? Could you list some steps to reproduce this please?

Prototype hasn't received any official updates for quite some time, and I plan to remove it altogether from future releases of AppGini as jQuery is far more superior and is being very actively developed and updated. But till I completely remove Prototype, I'll consider applying your suggested fixes. Thanks a lot :)
:idea: AppGini plugins to add more power to your apps:
  • DataTalk is an innovative AppGini plugin based on ChatGPT that allows you to interact with your AppGini database using natural language questions, without writing any SQL. Check the demo video
  • Mass Update plugin: Update multiple records at once and improve your workflow efficiency.
  • Check our other plugins and get a generous discount of up to 30% when buying 2 or more plugins.

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: AppGini V5.40 - Bootstrap 3.3.4 & Prototype.js conflict

Post by peebee » 2015-05-27 00:02

Hi Ahmad,

It's not actually any default Appgini theme related issue and probably won't effect too many Users unless they customise their templates with Bootstrap's javascript plugins. The problems only occur if you add (some of) Bootstrap's built in javascript plugins to your themes - such as tabs, pills, dropdowns, accordions, tooltips or modals. I don't think Appgini adds any of these Bootstrap javascript features by default to my knowledge?

For example; I have tables containing hundreds of fields so there are far too many data fields to display straight down the page as Appgini generates the default table_templateDV.html file. I heavily edit the table_templateDV.html so the data is displayed in tables and across the page. I then add Bootstrap tabs so the content is neatly and orderly displayed across the page, behind the relevant tab.

To achieve this, I use Bootstrap's built-in jQuery javascript tabs plugin as listed here: http://getbootstrap.com/javascript/#tabs Unfortunately, those tabs will no longer work with a combination of Bootstrap 3.3.x and Prototype. You click on a tab and is just disappears. Here's some examples of the exact problem: http://jsfiddle.net/dgervalle/bba1hv7y/embedded/result

The fact that Appgini comes prebuilt with Bootstrap is a major bonus for users. Apart from the obvious great looking themes available, Bootstrap's javascript plugins are simple to implement, look great, work really well, require virtually no additional styling and more importantly it uses Bootstrap's own bootstrap.min.js so no need to load any additional library.

It took me seriously hours to work out what the problem was (as there was no javascript errors showing in the console) but fortunately, once the problem was identified it was a very simple fix to apply.

Perry

User avatar
a.gneady
Site Admin
Posts: 1287
Joined: 2012-09-27 14:46
Contact:

Re: AppGini V5.40 - Bootstrap 3.3.4 & Prototype.js conflict

Post by a.gneady » 2015-05-27 20:36

Thanks Perry for the detailed explanation ... AppGini makes use of Bootstrap tabs and modals ... for example, see this page from the online demo: http://bigprof.com/demo/employees_view.php?SelectedID=5 ... If you scroll down the page, you'll see the children records organized in 2 tabs and when clicking the view button on any, it opens in a modal. However, maybe that doesn't mimic the exact conditions in your code ... I've read many reports indeed of Prototype issues with Bootstrap components and I remember that I did encounter several issues and fix them before.

I'll consider implementing the javascript code you mentioned above .. I guess it won't have side effects but I'll test that thoroughly. Thanks once more for sharing this.
:idea: AppGini plugins to add more power to your apps:
  • DataTalk is an innovative AppGini plugin based on ChatGPT that allows you to interact with your AppGini database using natural language questions, without writing any SQL. Check the demo video
  • Mass Update plugin: Update multiple records at once and improve your workflow efficiency.
  • Check our other plugins and get a generous discount of up to 30% when buying 2 or more plugins.

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: AppGini V5.40 - Bootstrap 3.3.4 & Prototype.js conflict

Post by peebee » 2015-05-27 23:17

Yes, I see what you mean in your demo and the fact that the tabs/modals are working just fine. Strange?

There's no doubt that the Bootstrap/Prototype conflict was causing the issue in my instance because if I simply commented out <script src="resources/lightbox/js/prototype.js"></script> in the header, the problem was gone. Adding the modified prototype.js script I mentioned also had the desired effect with no need for any further edits to the project at all.

Just for the sake of information; the tabs I added were coded directly according to the markup shown here on Bootstrap's own site: http://getbootstrap.com/javascript/#tabs I added no additional javascript whatsoever to the project and it was an otherwise clean Appgini generated app. The tab elements were added directly to table_templateDV.html I tried Bootstrap pills too - same problem. Both had previously worked on Appgini 5.31 generated code. The only difference I could see was bootstrap.min.js has been updated from V3.0.0 to 3.3.4

I have a few more Bootstrap javascript elements to add. I might test with/without the modified prototype.js and see what happens. I'll let you know if there's anything to report.

TheNoLifer
Veteran Member
Posts: 67
Joined: 2015-06-06 12:10

Re: AppGini V5.40 - Bootstrap 3.3.4 & Prototype.js conflict

Post by TheNoLifer » 2016-04-11 15:08

Resurrecting this post! Just to say THANK YOU! I just ran into this issue, using AppGini 5.50 and a custom page which included the AppGini generated header. My bootstrap tabs were disappearing after click and by making the changes detailed in Op's post, they now work. Rest of application seems unaffected by prototype.js change.

Is there any plan to include this "fix" in the core AppGini as was mentioned?

Thanks everyone for hard troubleshooting and development!

Post Reply