Search code examples
javascriptprototypejs

prototype.js and some other js's conflicts


I don't know much things about javascript and i don't have any friends that knows javascript :( that's why im asking stackoverflow community again for help. I've got a new template for my script but the problem is that i have some conflicts on the prototype.js that is required for my script to work with some js's from template and i dont know how to solve this problem, because the template wont work properly without comments js, main js and the script wont work properly without prototype js I dont know if somebody has time to take a look in the scripts and maybe give a solution to merge them, because are big scripts, at last i will try.

I have uploaded the scripts on some locations and putted the links here

pastebin.com/n5dnr6i7 here is the main.js required for template

pastebin.com/YisnTuBM comments.js recuired for template

pastebin.com/Cibn1NA2 prototype.js required for main script  

comments and main are not working properly with prototype loaded

Thank you in advance!

Edit: Im sorry for posting this in Java thanks for the correction

Edit 2: The problem is that the web script is encrypted with IonCube and i have access just to the template html files, it is a bit complicated because the template is for a modified/cracked verion of the web script that im using, it is a video tube script and for example the original web script that i have uses comments.html included in the video.html the cracked/modified is different and i had to include the old comments.html file in the new video.html template, now if i use jquery-1.9.1 the comment area box slide down as it should when i click it but i cant comment to the video if i use prototype i can comment to the video but the comment area box is frozen it doesent slide down when i click it, and i have no ideea how to merge them


Solution

  • I've added those files to a jsfiddle, and are you sure Prototype is even required? I've commented it out and replaced with jQuery (as the comments file seems to require it, as does the combined [main] file).

    After doing this I get no errors on page load.

    <!-- prototype -->
    <!--script src="http://pastebin.com/raw.php?i=Cibn1NA2"></script-->
    
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <!--script>jQuery.noConflict();</script-->
    
    <!-- comments -->
    <script src="http://pastebin.com/raw.php?i=YisnTuBM"></script>
    
    <!-- main = Modernizr + extras -->
    <script src="http://pastebin.com/raw.php?i=n5dnr6i7"></script>
    

    Edit for comments: Second fiddle to show a use of jQuery noConflict():

    The setup - either leave both script tags uncommented, or try commenting one or the other to see which errors you get.

    The tests use the addClass function of jQuery, and the addClassName function of Prototype in order to see which version of $ is active. One or other of the methods will fail depending on which $ is active at that time.

    <!-- Comment one of these script tags, or leave both uncommented for noConflict mode -->
    <!-- jQuery must come second in order to properly use noConflict -->
    <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    

    The tests:

    // local var for jQuery - this might be undefined if jQuery not imported
    var jQuery = window["jQuery"];
    // if jQuery exists, put into noConflict mode - i.e. return jQuery $ to Prototype $
    if (jQuery) jQuery.noConflict();
    
    try {
        // addClassName is prototype only, not jquery
        $("output").addClassName("prototype");
        setOutput("$.addClassName ok");
    } catch (e) {
        setOutput("Prototype > $.addClassName error: " + e);
    }
    
    try {
        // addClass is jquery only, not prototype
        $("output").addClass("jquery");
        setOutput("$.addClass ok");
    } catch (e) {
        setOutput("jQuery > $.addClass error: " + e);
    }
    
    try {
        // try using jQuery with the 'full' jQuery name
        jQuery("output").addClass("jquery");
        setOutput("jQuery.addClass ok");
    } catch (e) {
        setOutput("jQuery > jQuery.addClass error: " + e);
    }
    
    // wrap the code that needs $ to be jQuery $ in a function.
    // and pass in jQuery to be aliased as $ within the function.
    (function($) {
        try {
            $("output").addClass("jquery");
            setOutput("$.addClass ok when wrapped");
        } catch (e) {
            setOutput("jQuery > wrapped $.addClass error: " + e);
        }
    }(jQuery));
    

    Sample output when both Prototype and jQuery are included:

    $.addClassName ok
    jQuery > $.addClass error: TypeError: $(...).addClass is not a function
    jQuery.addClass ok
    $.addClass ok when wrapped