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.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    Unhappy Conflict between two JQuery elements

    I do not know much about JQuery, but I have come to the conclusion that the reason my web page is not showing correct, is due to something with JQuery.

    I paid a friend to make me a new side menu, which can drop down twice, who said he would make it using JQuery. I thought nothing of this, and started making the content on a different page, this also involved using JQuery's Tabs and Dialogue Box.

    I tried to put these together and, well, as you may of guessed.... It went badly wrong!

    Menu Page: http://www.tornhq.com/Index.html#
    Content Page: http://www.tornhq.com/Crimes/test.html

    Attempt 1: http://www.tornhq.com/Crimes/index.html
    Attempt 2: http://www.tornhq.com/Crimes/TEST-3.html#

    I do not understand why both attempts look differently... Not including the unlinked images...

    Thank you so much for any help and/or advice on how I can solve this not knowing much about JQuery...

    Best Regards,
    Tim

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    First:
    On all pages you have included several different jQuery versions.
    Maybe they have some kind of conflict.
    Try sticking to one of them.

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by lerura View Post
    First:
    On all pages you have included several different jQuery versions.
    Maybe they have some kind of conflict.
    Try sticking to one of them.
    Do you know where I could find this? Just tried google with no luck...

  • #4
    New Coder
    Join Date
    May 2011
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    newbie here... but this seemed to have worked for me:

    http://www.codingforums.com/showpost...47&postcount=2

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Including jQuery more than once is likely to cause problems - it should be included once and only once. It's included twice in both "Attempts" as lerura points out.

    jQuery .noConflict() is typically used to resolve problems where two different frameworks - eg. jQuery and prototype are both using the same $ variable, and are conflicting. You shouldn't need noConflict if you're just using jQuery for two different purposes.

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    Including jQuery more than once is likely to cause problems - it should be included once and only once. It's included twice in both "Attempts" as lerura points out.

    jQuery .noConflict() is typically used to resolve problems where two different frameworks - eg. jQuery and prototype are both using the same $ variable, and are conflicting. You shouldn't need noConflict if you're just using jQuery for two different purposes.
    I am sorry, I do not fully understand what your solution is. Are you saying there is some code I can add to the page to allow both JQuery contents to work together?

    I would hate to have to start either one again via a different method

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    No, you just need to load jQuery just once.

  • #8
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by rsantamarina View Post
    newbie here... but this seemed to have worked for me:

    http://www.codingforums.com/showpost...47&postcount=2
    Quote Originally Posted by SB65 View Post
    No, you just need to load jQuery just once.
    But what about this example of how to fix? Surely there is a way to fix it?

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    There is.
    Just call jQuery once.

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    <script type="text/javascript" src="../jqmenu/js/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="../jqmenu/js/jqaec.js"></script>
    <script type="text/javascript" src="../jqmenu/js/menu.js"></script>
    <script type="text/javascript" src="../TabSwitchTesting/js/jquery-1.5.1.min.js"></script>
    The highlighted are two versions of the same library.

    If you're not sure which one to delete then perhaps delete 1.5.1 (the oldest one) and then test your site thoroughly.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by AndrewGSW View Post
    Code:
    <script type="text/javascript" src="../jqmenu/js/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="../jqmenu/js/jqaec.js"></script>
    <script type="text/javascript" src="../jqmenu/js/menu.js"></script>
    <script type="text/javascript" src="../TabSwitchTesting/js/jquery-1.5.1.min.js"></script>
    The highlighted are two versions of the same library.

    If you're not sure which one to delete then perhaps delete 1.5.1 (the oldest one) and then test your site thoroughly.
    I have tried various ways regarding your post this failed attempt seems to be the best I can get....

  • #12
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    FireBug gives an error in your file CrimePageJQ.js saying
    Code:
    $('#tabs').tabs()
    is not a function. Presumably the plug-in that provides this function tabs is not loaded or its path is incorrect.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It looks like you have also removed your link to jQuery UI which provides the tabs function. You need to reinsert this after you call jQuery itself.
    Can't see the css to make the tabs display properly, either, probably called something like jquery-ui.css - you may need to reinclude that as wll.
    Last edited by SB65; 06-05-2011 at 07:05 PM.

  • #14
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    It looks like you have also removed your link to jQuery UI which provides the tabs function. You need to reinsert this after you call jQuery itself.
    Can't see the css to make the tabs display properly, either, probably called something like jquery-ui.css - you may need to reinclude that as wll.
    I feel so stupid... I hate being a newbie, lol....

    My recent attempt is here.

    When I tried adding the code below, it massively went wrong:
    Code:
    <script type="text/javascript" src="../TabSwitchTesting/js/jquery-1.5.1.min.js"></script>


  •  

    Posting Permissions

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