SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast HitRaj 47's Avatar
    Join Date
    Nov 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery/Ajax conflicts

    I am having a problem with two Magento extensions that I've installed on a client web site. They want to have these two extensions, but I can only get one of them to work, because of a conflict.

    The file in question that is causing the conflict is 'jquery.latest.js'. Upon opening this file, the comment at the top says jQuery version 1.4.2.

    Now I have two extentions: an (1) ajax shopping cart and (2) a pop up login form (when a user clicks "login" it pops up a dialog instead of loading a login page).

    If I comment out (and not include) the jquery.latest.js file, the ajax cart works, but the pop up login doesn't. Conversely if I include the .js file, it's the other way round.

    How do I get around this conflict to allow both to work at the same time?
    Beware of Raj - My Portfolio and Blog.

  2. #2
    SitePoint Enthusiast HitRaj 47's Avatar
    Join Date
    Nov 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I figured something out. There is another script which the ajax cart uses called 'qTip2'. I disabled that and the pop up login works, but the cart doesn't... So still kinda back to square one =/
    Beware of Raj - My Portfolio and Blog.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    We might be able to find a solution if there is a test page somewhere that demonstrates the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast HitRaj 47's Avatar
    Join Date
    Nov 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Our development site is located here: http://sanitopia.com/dev/
    Beware of Raj - My Portfolio and Blog.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    It looks like you have both jQuery and Prototype libraries running at the same time. Both want to use the $ symbol, and fortunately you can tell jQuery not to globally use the $ symbol, so that it doesn't conflict with other libraries.

    This information on using jQuery's noconflict might be useful for you here.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast HitRaj 47's Avatar
    Join Date
    Nov 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does this mean I have to find ever .js file that this shopping cart plugin uses, and find and replace the '$' with 'jQuery'?
    Beware of Raj - My Portfolio and Blog.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by HitRaj 47 View Post
    Does this mean I have to find ever .js file that this shopping cart plugin uses, and find and replace the '$' with 'jQuery'?
    Not it does not. It means that you can apply the technique as shown in our tips and techniques post about using jquery noconfict which allows you to continue to use the $ symbol from within the jQuery wrapper.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Not it does not. It means that you can apply the technique as shown in our tips and techniques post about using jquery noconfict which frees up the global $ symbol or the other library to use, and allows you to continue to use a local $ symbol from within the jQuery wrapper instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast HitRaj 47's Avatar
    Join Date
    Nov 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code javascript:
    jQuery.noConflict();
    jQuery(function ($) {
        // jQuery code in here
    });

    I have used the above method and wrapped the code from qtip2-min.js in the above code and it's still not displaying the login. The cart is still functional though.
    Beware of Raj - My Portfolio and Blog.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by HitRaj 47 View Post
    [highlight="javascript"]I have used the above method and wrapped the code from qtip2-min.js in the above code and it's still not displaying the login. The cart is still functional though.
    This is not a one shot cures all process. It's a step by step matter where issues are observed and steps are taken to resolve those issues one at a time.

    Welcome to the world of development and testing.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,688
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by HitRaj 47 View Post
    Code javascript:
    jQuery.noConflict();
    jQuery(function ($) {
        // jQuery code in here
    });

    I have used the above method and wrapped the code from qtip2-min.js in the above code and it's still not displaying the login. The cart is still functional though.
    The qtip2-min.js file doesn't need that technique applied to it. You should revert that back to how it was.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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