Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Prototype and jquery conflict

    First of all. I know no javascript whatsoever. That's why I am asking here.

    I have these files included:
    Code:
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    
    <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="js/jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
    <script src="js/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>
    and it seems like the jquery files from the codaslider breaks the lightbox, so now images opens in new window like normal. The site ignores the lightbox stuff.

    It's obvious that there's some kind of conflict here.
    What should I do? Any help is really appreciated
    Last edited by Gnowoga; 07-22-2008 at 05:53 PM.

  • #2
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    jQuery will allow it's object to be assigned to something other than $, so you can run something like this:

    Code:
    var $$ = jQuery.noConflict();
    // Do something with jQuery
    $$("div p").hide();
    // Do something with another library's $()
    $("content").style.display = 'none';
    Check out this link for more info: http://docs.jquery.com/Core/jQuery.noConflict
    My Website: DumpsterDoggy

  • #3
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    Prototype has a $$ function as well though, so set it to something else

    Or find a lightbox that works with jquery.
    My thoughts on some things: http://codemeetsmusic.com
    And my scrapbook of cool things: http://gjones.tumblr.com

  • #4
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    I wasn't aware of the $$ in prototype. Good to know!

    Here's a jQuery lightbox plugin: http://www.balupton.com/sandbox/jquery_lightbox/
    My Website: DumpsterDoggy

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much for the help. I am going to the jquery lightbox then, since I have no idea how to implement that jquery fix.

    Thanks again!

  • #6
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    On the front of JQuery's website there is this link: http://docs.jquery.com/Using_jQuery_...ther_Libraries

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #7
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So I applied
    Code:
       <script>
         jQuery.noConflict();
         
         // Use jQuery via jQuery(...)
         jQuery(document).ready(function(){
           jQuery("div").hide();
         });
         
         // Use Prototype with $(...), etc.
         $('someid').hide();
       </script>
    after my js includes and no luck, no change.

    Do I have to edit that code some way to match what I want to do?

  • #8
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I realise I have to edit the noConflict code somehow, though I do not know how.

    As mentioned I am using codaslider and lightbox 2:
    http://jqueryfordesigners.com/coda-slider-effect/
    http://www.huddletogether.com/projects/lightbox2/

    Any and all help is truly appreciated!

  • #9
    New to the CF scene
    Join Date
    Mar 2009
    Location
    Bangalore, India
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try to use this

    <script src="jquery.js"></script>
    <script src="prototype.js"></script>
    <script>
    // Use jQuery via jQuery(...)
    jQuery(document).ready(function(){
    jQuery("div").hide();
    });

    // Use Prototype with $(...), etc.
    $('someid').hide();
    </script>


    Its from same jQuery official page "http://docs.jquery.com/Using_jQuery_with_Other_Libraries" you might have visited already.

    This solution worked for me. Which is under heading "Including jQuery before Other Libraries".

    Try to include jquery before prototype. use "jQuery" instead of "$". and There is no need for overriding the $-function by calling "jQuery.noConflict()". also remove "$" given as argument if using following solution.

    jQuery.noConflict();

    // Put all your code in your document ready area
    jQuery(document).ready(function($){
    // Do jQuery stuff using $
    $("div").hide();
    });


    notice the "$" as argument in "jQuery(document).ready(function($){".

    Hope it'll help.
    Last edited by fusionstrings; 03-20-2009 at 08:47 AM.

  • #10
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you can change $ variable in jquery you can also change the same variable in prototype and that's what I did. It worked for me. I replaced all $ to $$$ in prototype.js.

  • #11
    New to the CF scene
    Join Date
    Jun 2009
    Location
    Bangkok
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks

  • #12
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    I think I have a simular problem.
    Could you pls look at my testpage here:
    http://www.bertismy.name/fff/

    FF and IE are reacting different.

  • #13
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    64
    Thanks
    2
    Thanked 1 Time in 1 Post
    To avoid problems with Prototype, I use the no conflict as in my example:
    Code:
    var $j = jQuery.noConflict();
            $j(document).ready(function() {
                    
                    //Enter jQuery code here
                    $j('form').submit();
                    
            });
    Works perfectly!

  • #14
    New to the CF scene
    Join Date
    Sep 2009
    Location
    Hyderabad, India
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is more detailed explanation and work around.
    http://praveenbattula.blogspot.com/2...different.html

  • #15
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    Quote Originally Posted by tman0410 View Post
    If you can change $ variable in jquery you can also change the same variable in prototype and that's what I did. It worked for me. I replaced all $ to $$$ in prototype.js.
    I anyone tries this try not do do a 'replace all' on $ with `new name`

    You have to worry about

    regexps
    this.replace(filter || Prototype.JSONFilter, '$1');
    JSONFilter: /^\/\*-secure-([\s\S]*)\*\/\s*$/,

    and other functions
    $A(arguments);

    try a regexp replace all such as \$\s*\(


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •