jqueryajaxtwitter-bootstrapprototypejsscriptaculous

Conflict Bootstrap, Prototype Js and Jquery


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 ?


Solution

  • 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