3

After 7 days of search and after i have tried different solutions and it did not work i would like to ask: I have a page with prototype js, protaplasm, and scriptaculous and jquery and Jquery-ui and it was working perfectly with the jquery no conflict until i recently downloaded a design with Bootstrap and here comes the trouble. Prototype js fonctionalities are no more working. The ajax update of prototype js and the inplaceeditor the scriptaculous are no more working. I have tried most work around but i did not really get the result. Does someone have a working solution ?

John Max
  • 432
  • 8
  • 23
  • 3
    http://www.softec.lu/site/DevelopersCorner/BootstrapPrototypeConflict – Christina Dec 05 '14 at 18:29
  • I have tried this early on but It did not work. JQuery and bootstrap worked but not prototype js and scriptaculous – John Max Dec 05 '14 at 21:39
  • are any JS errors thrown when attempting to use the components? – TotalWipeOut Dec 08 '14 at 12:40
  • the js error uncaught exception: controls.js requires including script.aculo.us' effects.js library ReferenceError: Effect is not defined dragdrop.js:8 TypeError: this.element.getStyle is not a function controls.js:498 TypeError: this.element.getStyle is not a function controls.js:498 TypeError: this.element.getStyle is not a function controls.js:498 TypeError: this.element.getStyle is not a function controls.js:498 TypeError: this.element.getStyle is not a function controls.js:498 TypeError: element.dispatchEvent is not a function prototype.js:7066 But i do have effect.js – John Max Dec 08 '14 at 12:43
  • Maybe i am missing something here. How to introduce the prototype js with require.js . It seems in the exampld you gavs me prototype.js is not include – John Max Dec 10 '14 at 04:31

1 Answers1

2

I have found the answer. To avoid conflict between Jquery, Prototype js, protoplasm, twitter bootstrap First i added the jquery noconlict after jquery

<script type="text/javascript">

    $.noConflict();

    </script>

and i put every jquery code between 

 jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.


///////////////////////////////////////////////////////////////////////////////


///////////////////////////////////////////////////////////////////////////////

});

And most importantly i opened every other js file that uses jquery like bootstrap.min.js and i copied and pasted the code inside between 

 jQuery( document ).ready(function( $ ) {
    // Code that uses jQuery's $ can follow here.


    ///////////////////////////////////////////////////////////////////////////////


    ///////////////////////////////////////////////////////////////////////////////

    });

I still have an error like TypeError: this.element is null controls.js with Firebug but everything works perfectly

John Max
  • 432
  • 8
  • 23